Skip to content
Theme UI
GitHub

Heading

Primitive heading component, defaults to <h2>.

import { Heading } from 'theme-ui'

Hello

Subhead

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',
},
}
}
Edit the page on GitHub
Previous:
Text
Next:
Link