Heading

Heading component is an essential element that contributes to define a great hierarchy within the application. It helps to give semantic meaning to the content as well as contributing to define a good structure for SEO (search engine optimization). The implementation will rely on the use of HTML tags.

Design tokens

Color

An inherit color from the definition of the application is received, so the component could change his color based on that parameter. There is no specific color tokens for this component.

Typography

Headings H1

Property	Value	Core token
`font-family`	'Open Sans', sans-serif;	`font-family-sans`
`font-weight`	600	`font-weight-semibold`
`font-size`	32px / 2.5rem	`font-scale-07`
`font-style`	normal	`font-normal`
`letter-spacing`	-12.5px / -0.0125em	`font-tracking-tight-01`

Headings H2

Property	Value	Core token
`font-family`	'Open Sans', sans-serif;	`font-family-sans`
`font-weight`	600	`font-weight-semibold`
`font-size`	24px / 1.5rem	`font-scale-05`
`font-style`	normal	`font-normal`
`letter-spacing`	0px / 0em	`font-tracking-normal`

Headings H3

Property	Value	Core token
`font-family`	'Open Sans', sans-serif;	`font-family-sans`
`font-weight`	600	`font-weight-semibold`
`font-size`	20px / 1.25rem	`font-scale-04`
`font-style`	normal	`font-normal`
`letter-spacing`	0px / 0em	`font-tracking-normal`

Headings H4

Property	Value	Core token
`font-family`	'Open Sans', sans-serif;	`font-family-sans`
`font-weight`	600	`font-weight-semibold`
`font-size`	16px / 1rem	`font-scale-03`
`font-style`	normal	`font-normal`
`letter-spacing`	0px / 0em	`font-tracking-normal`

Headings H5

Property	Value	Core token
`font-family`	'Open Sans', sans-serif;	`font-family-sans`
`font-weight`	600	`font-weight-semibold`
`font-size`	14px / 0.875rem	`font-scale-02`
`font-style`	normal	`font-normal`
`letter-spacing`	0px / 0em	`font-tracking-normal`

Accessibility

Heading components should be in order. That means an Headings-H1 is followed by an Headings-H2, an Headings-H2 is followed by a Headings-H2 or Headings-H3 and so on.
Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for users using assistive technologies.
Headings are not interactive elements and therefore have no keyboard or pointer interaction.

SC 1.3.1 - Info and relationships
SC 2.4.6 - Headings and labels

Design tokens
- Color
- Typography
Accessibility
- WCAG 2.1 Related Success Criterion

Edit this page on GitHub

Report an issue on GitHub

Header

NextImage