Heading

View Source

Headings communicate the hierarchy of content to users and assistive technologies.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Copy

Edit

render(
  <StackView spacing={2}>
    {[1, 2, 3, 4, 5, 6].map((level) => (
      <Heading key={level} level={level}>
        Heading {level}
      </Heading>
    ))}
  </StackView>
)

render(
  <StackView spacing={2}>
    {[1, 2, 3, 4, 5, 6].map((level) => (
      <Heading key={level} level={level}>
        Heading {level}
      </Heading>
    ))}
  </StackView>
)

Props

level1 | 2 | 3 | 4 | 5 | 6

Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme fontSizes

Props

PreviousGroup NextHeadingUppercase