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