Skip to content

Heading

Headings create a semantic outline of the content.

Overview

Each heading or subheading should succinctly sum up content that follows. Use the correct font size for each heading where possible. In cases where the design calls for a different font size, the correct underlying element should still be used.

Usage

Heading 1

Heading 2

Heading 3

Heading 4

Variations

The semantic element can be changed to a different style by using the as prop from styled components (opens in new window) .

Heading 2 as h3

Tokens