Interface of Heading
🏗 Coming Soon

The <Heading /> component is used to render a HTML <h1> - <h6> element, by default it will render a <h2> element

Hello Good Looker 👋

Heading Levels

To use a different HTML heading element, the <Heading /> component accepts a is attribute that corresponds to the <h1> - <h6> elements. The font-size of each heading element maps to the type ramp

I’m a h1 element (25px/40px)

I’m a h2 element (22px/32px)

I’m a h3 element (18px/28px)

I’m a h4 element (16px/24px)

I’m a h5 element (14px/20px)
I’m a h6 element (12px/16px)

Heading Sizes

When creating accessible pages it is important that headings create a logical document outline, but sometimes the font-size of the heading element doesn't match to the needs of the design or layout. Composing the is and the fontSize attributes lets you choose the semantically correct level heading and the desired size. The available size values come from the type ramp.

Viral meditation live-edge

Pork belly beard mustache

Iceland trust fund hell of plaid

Tofu heirloom hammock fam tweet

Helvetica hashtag cronut unicorn

Franzen semiotics sustainable, gluten-free

8-bit coloring book authentic squid pok pok

Beard truffaut fashion axe, butcher raclette

Man bun cardigan succulents vice

Weight and Transform

Another common pattern for headings is to control the font-weight and the text-transform properties. The <Heading /> component allows you to adjust those with the fontWweight and textTransform attributes.


This is the DEFAULT and It will DESPLAY WhatEver is PASSED

semi-bold and upper

Bold and caps

Heading alignment

The align property allows you to adjust the text-align property of your <Heading /> component. This is useful if you need to center or right align the text.

<Heading textAlign="left">◀️ Align left (Default) </Heading>
<Heading textAlign="center">◀️ Align Center ▶️</Heading>
<Heading textAlign="right">Align Right ▶️</Heading>

Heading Variants

We provide a few variants for the <Heading /> component based on common patterns we use in our applications, the variant property will change that will change the color the rendered heading.

Regular Heading

Secondary Heading

Subdued Heading

Critical Heading

Positive Heading