BRAID
Braid Logo
 

Heading

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

Open in Playroom

Alternatives

  • Accordion — For expanding/collapsing sections with headings.
  • Text — For body copy.

Custom semantics

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.

Open in Playroom

Alignment

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' }}

Left

Center

Right

Center on mobile

Open in Playroom

Limiting the number of lines

When displaying user-generated content that may not fit within your layout, you can control the number of lines to display with the maxLines prop.

Limited to 1 line that won’t fit in the layout

Another example of long text, but limited to 3 lines, and won’t fit in the layout.

Open in Playroom

Inserting an icon

For decoration or help distinguishing between headings, an icon can be provided. This will be placed to the left of the text.In the case of wrapping text, the icon will remain on the left — with the text not wrapping beneath it. If this is not desired, place the icon inside the Heading component, instead of providing it to the icon prop.

Heading with an icon

Open in Playroom

Contrast

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.

Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Heading
  data={{ testid: 'heading-1' }}
  // => data-testid="heading-1"
>
  ...
</Heading>
Open in Playroom