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.

import { Heading } from 'minerva-ui'

Preview

Heading

Source

<Heading>Heading</Heading>

<Heading>Heading</Heading>

Heading Font Sizes

Preview

2x Large Heading

Extra Large Heading

Large Heading

Medium Heading

Small Heading

Extra Small Heading

Source

<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.

Name	Type	Is Required	Default	Description
fontSize	'xs', 'sm', 'md', 'lg', 'xl', '2xl'	optional	xl	Sets size of heading font