Headings

Sometimes we need to make some text as large as a heading, but without it actually being a heading. Or, sometimes we need to change a heading size without breaking the semantic heirarchical ordering, as that would be bad for SEO.

Heading utility examples

The following are all <div> elements:

<div class="h1">Heading level 1</div>

<div class="h2">Heading level 2</div>

<div class="h3">Heading level 3</div>

<div class="h4">Heading level 4</div>

<div class="h5">Heading level 5</div>

<div class="h6">Heading level 6</div>

Why we may need heading utilities

We may have situations where we want to enlarge some text (to make it look like a header), but not actually have it to be a header that would interupt the sematic hierarchical ordering.

For example we may want a title in a sidebar, footer, card, or modal to be enlaged but not by using an actual <h1> through to <h6> tag.