Heading

The Heading component replaces <h1> <h2> <h3> <h4> tags.

Tag names are not associated with any specific tag size, since tag choices should be made based on hierarchy for SEO purposes.

Copy
import { Heading } from 'minerva-ui';

Heading
<Heading>Heading</Heading>
<Heading>Heading</Heading>

Heading Font Sizes#

2x Large Heading
Extra Large Heading
Large Heading
Medium Heading
Small Heading
Extra Small Heading
<Stack>
  {/* use `as` prop to change heading tag type */}
  <Heading as="h1" fontSize="2xl">
    2x Large Heading
  </Heading>
  <Heading as="h2" fontSize="xl">
    Extra Large Heading
  </Heading>
  <Heading as="h3" fontSize="lg">
    Large Heading
  </Heading>
  <Heading as="h4" fontSize="md">
    Medium Heading
  </Heading>
  <Heading as="h5" fontSize="sm">
    Small Heading
  </Heading>
  <Heading as="h6" fontSize="xs">
    Extra Small Heading
  </Heading>
</Stack>
<Stack>
  {/* use `as` prop to change heading tag type */}
  <Heading as="h1" fontSize="2xl">
    2x Large Heading
  </Heading>
  <Heading as="h2" fontSize="xl">
    Extra Large Heading
  </Heading>
  <Heading as="h3" fontSize="lg">
    Large Heading
  </Heading>
  <Heading as="h4" fontSize="md">
    Medium Heading
  </Heading>
  <Heading as="h5" fontSize="sm">
    Small Heading
  </Heading>
  <Heading as="h6" fontSize="xs">
    Extra Small Heading
  </Heading>
</Stack>

Props#

These are props related to the Heading component.