Heading

Basic Heading

Heading wraps an h1 element, it should be used for section title.

Default Heading

The default heading is an H1 element with size Mouse

Sizes and Hierarchy

You may override the font size by specifying size.

You may also want to override the default heading level (h1) by specifying level. This is particularly important for accessibility purposes.

Custom Font Weight and Text Alignment

Depending on the font-face, sometimes the size and weight don't linearly correlate in the sizing hierarchy (snail, mouse, otter, etc.).

You may use the fontWeight property to override with a custom font weight. All values from the CSS property font-weight are available.

The heading text can also be centered using the textAlign prop:

Capping Font Size on mobile

Sometimes Whale and Mammoth fonts are too big for mobile, for that reason there is the capMobileSize prop, it caps font size to Hippo on mobile