Heading

Ready

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.

Code

Usage

Specifications

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	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`	regular	`font-normal`
`text-transform`	initial
`letter-spacing`	-12.5px / -0.0125em	`font-tracking-tight-01`

Headings H2

Property	Value	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`	regular	`font-normal`
`text-transform`	initial
`letter-spacing`	0px / 0em	`font-tracking-normal`

Headings H3

Property	Value	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`	regular	`font-normal`
`text-transform`	initial
`letter-spacing`	0px / 0em	`font-tracking-normal`

Headings H4

Property	Value	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`	regular	`font-normal`
`text-transform`	initial
`letter-spacing`	0px / 0em	`font-tracking-normal`

Headings H5

Property	Value	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`	regular	`font-normal`
`text-transform`	initial
`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.