Contents

Summary Heading Level

Whether the summary also counts as a heading in the page outline, and at which level.

Where to find it
Labelled Summary Heading Level 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

Headings are how a page announces its structure. A screen reader can list them and jump between them, which is how a lot of people skim a long page rather than reading it top to bottom. This setting decides whether the accordion summaries join that list.

Left at none — the default — a summary is a line of text that happens to be clickable. Set to h2, h3 and so on, the same words are also a heading, and the level says how it nests: an h3 belongs to the nearest h2 above it.

Pick the level from what surrounds the accordion, not from how big you want the text. If the FAQ sits under an h2 reading "Frequently asked questions", each question is an h3. Size and weight come from Typography on the column either way.

What each option does

OptionWhat you will see
noneThe summary is ordinary text. The default, and right most of the time.
h2A main section heading, for an accordion that is a section of the page.
h3A heading under an h2 — the usual choice for the questions in an FAQ.
h4A heading under an h3, for an accordion nested inside a subsection.
h5Rarely needed. Only correct if the surrounding page really is this deep.
h6The deepest level there is.

When you would use it

  • An FAQ or a set of collapsible sections that is the structure of the page rather than an aside within it.
  • Anywhere a reader might reasonably want to jump between the summaries instead of reading every one.

How to change it

  1. Click the accordion on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Summary Heading Level".
  3. Choose the level that fits the headings around it, or none.
  4. Uncheck "Same value for all resolutions" to differ 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

  • Do not skip levels. Jumping from an h2 straight to an h4 leaves a hole in the outline, which reads as a section that went missing.
  • Do not make every summary a heading out of habit. A "show more" toggle in the middle of an article is not a section of the page, and adding it to the outline makes the outline longer without making it more useful.
  • This changes what the words mean, not how they look. Nothing moves or resizes when you set it; Typography on the column does that.

Related settings

For developers

The technical reference for what this setting produces: MDN: the heading elements. 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