Heading

Primitive heading component, defaults to <h2>.

import { Heading } from 'theme-ui'

<Heading>Hello</Heading>
<Heading as='h3'>Subhead</Heading>
<Heading>Hello</Heading>
<Heading as='h3'>Subhead</Heading>

Use the as prop to set the correct HTML element independent from styling.

Variants

Text style variants can be defined in the theme.text object. The Heading component uses theme.text.heading as its default variant style.

// example theme variants
{
  text: {
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.2em',
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
  }
}