Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Heading

Usage notes

Heading is a typography component used to create various levels of hierarchies between text.

Heading XXXL

Heading XXXL heavy

Heading XXXL light

Heading XXL

Heading XXL heavy

Heading XXL light

Heading XL

Heading XL heavy

Heading XL light

Heading L

Heading L heavy

Heading L light

Heading M

Heading S

Heading XS

Heading XXS

Heading--1

Heading--2

Heading--3

Heading--4

Heading--5

Toggle markup


        <h3 class="coral-Heading--XXXL">Heading XXXL</h3>
        <h3 class="coral-Heading--XXXL coral-Heading--heavy">Heading XXXL heavy</h3>
        <h3 class="coral-Heading--XXXL coral-Heading--light">Heading XXXL light</h3>
        <h3 class="coral-Heading--XXL">Heading XXL</h3>
        <h3 class="coral-Heading--XXL coral-Heading--heavy">Heading XXL heavy</h3>
        <h3 class="coral-Heading--XXL coral-Heading--light">Heading XXL light</h3>
        <h3 class="coral-Heading--XL">Heading XL</h3>
        <h3 class="coral-Heading--XL coral-Heading--heavy">Heading XL heavy</h3>
        <h3 class="coral-Heading--XL coral-Heading--light">Heading XL light</h3>
        <h3 class="coral-Heading--L">Heading L</h3>
        <h3 class="coral-Heading--L coral-Heading--heavy">Heading L heavy</h3>
        <h3 class="coral-Heading--L coral-Heading--light">Heading L light</h3>
        <h3 class="coral-Heading--M">Heading M</h3>
        <h3 class="coral-Heading--S">Heading S</h3>
        <h3 class="coral-Heading--XS">Heading XS</h3>
        <h3 class="coral-Heading--XXS">Heading XXS</h3>

        <!-- Deprecated headings -->
        <h3 class="coral-Heading coral-Heading--1">Heading--1</h3>
        <h3 class="coral-Heading coral-Heading--2">Heading--2</h3>
        <h3 class="coral-Heading coral-Heading--3">Heading--3</h3>
        <h3 class="coral-Heading coral-Heading--4">Heading--4</h3>
        <h3 class="coral-Heading coral-Heading--5">Heading--5</h3>