Heading Level 1 Regular

Heading Level 1 Weak

Heading Level 2 Regular

Heading Level 2 Weak

Heading Level 3 Regular

Heading Level 3 Weak

Heading Level 4 Regular

Heading Level 4 Weak

  • Accordion For expanding/collapsing sections with headings.
  • Text For body copy.
By default, the semantic heading level matches the visual heading level, e.g.
<Heading level="2">
will render an h2 element. If you need the semantics to be different from the visuals, you can provide the desired HTML tag via the component prop.

This looks like an H2, but it’s actually an H3.

Headings can be aligned via the align prop. If you need alignment to differ across various screen sizes, you can provide an array of values describing the alignment of each breakpoint.

Left

Center

Right

Center on mobile

If you’re displaying user-generated content that may not fit within your layout, you can truncate text with the truncate prop.

Really long text that won’t fit in the layout

To ensure headings have sufficient contrast, when on a dark background the foreground colour is inverted.
When using custom backgrounds or images, this behaviour can be applied using the BackgroundProvider and specifying whether the background is dark or light.

This Heading is inverted to improve contrast.