Heading

Short phrase describing what the succeeding section is all about

Usage

Semantically, set heading with <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tag.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<section class="flex flex-column flex-justify-content-start gap-row-small">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</section>

furthermore, heading can be done with add heading-* class to block element like <div> tag.

Small
Medium
Large
x-Large
2x-Large
<section class="flex flex-column flex-justify-content-start gap-row-small">
    <div class="heading-small">Small</div>
    <div class="heading-medium">Medium</div>
    <div class="heading-large">Large</div>
    <div class="heading-xlarge">x Large</div>
    <div class="heading-2xlarge">2x Large</div>
</section>

Appearance

With inline smaller heading

Heading 1 small

Heading 2 small

Heading 3 small

<section class="flex flex-column flex-justify-content-start gap-row-small">
    <h1>Heading 1 <small>small</small></h1>
    <h2>Heading 2 <small>small</small></h2>
    <h3>Heading 3 <small>small</small></h3>
</section>

With inline icon

Heading 1

Heading 2

<section class="flex flex-column flex-justify-content-start gap-row-small">
    <h1>
        <span>
            <svg class="icon">
                <use xlink:href="icons/graff-icons.svg#link" />
            </svg>
        </span>Heading 1
    </h1>
    <h2>
        <span>
            <svg class="icon">
                <use xlink:href="icons/graff-icons.svg#link" />
            </svg>
        </span>Heading 2
    </h2>
</section>

Variables

Coming soon

Table of contents