Contents

Summary

The line a reader sees while the accordion is closed, and clicks to open it.

Where to find it
Labelled Summary in the "Selected Component" section of the Modify drawer.
Offered by
The Accordion component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This is the visible half of an accordion — the one line that shows whether the detail is open or shut. A reader decides whether to read on from these words alone, so they have to say what is behind them.

Write it as a whole thought rather than a label. "How long does delivery take?" and "What the deposit covers" both tell a reader what they will get; "More" and "Details" tell them nothing, and a page of those is a row of closed doors with no signs on them.

It is one line. Press Enter and the break is folded away rather than becoming a second line, because the browser gives a summary a single row beside its arrow. If what you have is two sentences, the second one belongs in Detail.

When you would use it

  • The question, in an FAQ.
  • The section title, in a set of collapsible sections.
  • The words on a "show more" toggle, where the detail is a long explanation most readers will skip.

How to change it

  1. Click the accordion on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Summary".
  3. Type the line.
  4. Uncheck "Same text for all device resolutions" to word it differently per device.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Link markers do not work here. Typing {1|pricing} shows the word "pricing" as ordinary text, deliberately: a link inside the summary would both follow the address and toggle the accordion, and a reader could not tell which they were about to get. Put links in Detail.
  • Clearing it brings back the placeholder line rather than leaving the row blank. An accordion with no summary is a control with nothing to click.
  • The arrow beside it is drawn by the browser, not by a setting here, so it looks slightly different from one browser to the next.

Related settings

For developers

The technical reference for what this setting produces: MDN: the summary element. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next