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 responsive values describing the alignment of each breakpoint, e.g. align={{ mobile: 'center', tablet: 'left' }}




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 on a Box component, this behaviour can be applied by setting the background to either customLight or customDark.

This Heading is inverted to improve contrast.