Heading

A heading is a primitive component matching Hopper's typography type scale.

View sourceView on npmReport an issue

Usage

Sizes

You can alter the size of the heading by specifying a size prop. The available sizes match Hopper Typography Type Scale — a type scale is a set of font-size and line-height pairs.

Levels

You can alter the level of the heading by specifying a level prop. The available levels match HTML heading elements — h1-h6.

Inherit

You can alter the size of a heading to match the parent element's type scale by using the inherit size.

Props

These props are also available for H1, H2, H3, H4, H5 and H6 components.

size?

The Typography Type Scale to use.

Defaults to md.
style?
level?
className?
id?

Migration Notes

Coming from Orbiter, you should be aware of the following change:

  • Headings no longer come with margin by default; you're now responsible for adding the appropriate margin yourself.

In order to migrate to Hopper Heading seamlessly here's a cheatsheet regarding the applied margin-bottom of each heading sizes:

xs calc(1.125rem * .5) | 9px
sm calc(1.375rem * .5) | 11px
md calc(1.75rem * .5) | 14px
lg calc(2rem * .5) | 16px
xl calc(2.5rem * .5) | 20px
2xl calc(1rem * .5) | 8px
3xl calc(1rem * .5) | 8px

Some UI might require different margins, this table is provided as a guidance to kickstart youre migration toward Hopper.