heading

A heading names a page, or a section of it, in large monospace type. The page's title can start with the blue chevron.

when to use

• Once per page, for its title: the first level. On product screens, the title starts with the chevron.
• For the sections of a page: the second level.

when to use something else

• For the title of a card or a panel. Use the card's own title.
• For a third level, or deeper. Today the heading stops at the second level. A sub-section gets its third-level heading from the text component instead.
• For emphasis, or a big number. Headings are the structure of a page: people who use a screen reader jump from one heading to the next. For emphasis, use the text component in its interface style.
• For the product's name or logo. Use the lockup; brand shows it.

anatomy

1. Heading. A real heading, of the first or the second level, with no space of its own around it. It is set in the page title's or the section title's type role (see typography): bright monospace, large for a page and a step smaller for a section.
2. Chevron (optional). The brand's mark, bold and blue, a short space before the text. Assistive technology doesn't see it.

variants and states

The level sets both what the heading is and how big it looks, so a second-level heading always looks like one.

The chevron leads the heading with the brand's mark, always in blue.

behaviour

• A heading doesn't do anything, and the keyboard passes over it: it takes no focus and isn't in the tab order.
• Screen readers have their own keys for jumping from heading to heading, such as h while they read a page in browse mode. That is why the levels must follow the page's outline.

The keyboard map is on the heading's React page.

accessibility

• A heading is a real heading, so it is part of the page's outline, and screen readers can jump to it.
• One first-level heading per page, for its title; its sections are second-level headings. Pick the level for the outline, never for the size.
• The chevron is hidden from assistive technology, so the heading's name is your text alone. Don't type a chevron into the text yourself: a typed “>” is read out as “greater than”.
• The heading changes no letters to capitals or to lowercase: the text is shown and read exactly as you write it. Write it in lowercase, as content & voice asks.

Today: there are only two levels.

content

• A lowercase noun phrase, with no full stop: “volumes”, “recent runs”, “storage settings”.
• Keep it short. A heading that wraps onto a second line at the page title's size is too long.
• The chevron once, on the page's title. On every heading, it stops meaning anything.

do and don't

related

• Text: text for reading, and a third-level heading when a page needs one.
• Card: titles for panels.
• Brand: the chevron and the lockup.
• Typography: the type roles of the page title and the section title.

specs

• Chevron: chevron. A bold (700) > in --cloud-blue, 0.4em before the text, in a span with aria-hidden="true".
• Spacing: margin: 0.
• Case: no text-transform: the text is shown and read as written.
• Third level: none today. Text with as="h3" renders a native h3.
• Emphasis: Text with variant="ui", not a heading.
• Keyboard: not focusable, not in the tab order.