Headings

These classes help you to match the styling of a heading, but without using the associated HTML tag.

info

There is one differnce when using an heading utility: there is no margin-bottom applied.
Since the class can be used for a lot of elements, if you want to get the same margin, you need to add the class .u-mb-2.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p class="u-h1 u-mb-2">Heading 1</p>
<p class="u-h2 u-mb-2">Heading 2</p>
<p class="u-h3 u-mb-2">Heading 3</p>
<p class="u-h4 u-mb-2">Heading 4</p>
<p class="u-h5 u-mb-2">Heading 5</p>
<p class="u-h6 u-mb-2">Heading 6</p>

You can also use it on hn elements. For example, on a <h2> element to render it as an <h5> with <h2 class="u-h5">Heading</h2>.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1 class="u-h6">Heading 1</h1>
<h2 class="u-h5">Heading 2</h2>
<h3 class="u-h4">Heading 3</h3>
<h4 class="u-h3">Heading 4</h4>
<h5 class="u-h2">Heading 5</h5>
<h6 class="u-h1">Heading 6</h6>

The CSS properties as generated in the same way as the file _elements.heading.scss and from the same variables (e.g. $g-headings-*).