Skip to content
Vy logo
Components
React
React Native
Figma

Heading

Headings are used to create a structural hierarchy in written content

Examples

Different heading styles

<Stack>
  <Heading as="h1" variant="2xl">
    Main heading
  </Heading>
  <Heading as="h2" variant="xl-display">
    Sub heading with a display font
  </Heading>
  <Heading as="h2" variant="xl-sans">
    Sub heading with a sans font
  </Heading>
  <Heading as="h3" variant="lg">
    Large heading
  </Heading>
  <Heading as="h4" variant="md">
    Medium heading
  </Heading>
  <Heading as="h5" variant="sm">
    Small heading
  </Heading>
</Stack>

A heading with a custom heading level

<Heading as="h4" variant="2xl">
  A large, but semantically unimportant, heading
</Heading>

A heading with an auto-generated id, that makes it easy to link to

<Heading as="h2" variant="lg" autoId>
  Check out the ID of this bad boy
</Heading>