Skip to content
Vy logo


Headings are used to create a structural hierarchy in written content


Different heading styles

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

A heading with a custom heading level

<Heading as="h4" variant="2xl">
  A large, but semantically unimportant, 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