Headings

full screen new window example HTML markup

Headings give structure and separation between areas of content.

Usage

Default heading styles are set on the h1 to h6 elements. For styling non-heading elements as headings, additional classes are provided in the format of [namespace]-h*.

Heading 1 (H1)

Heading 1 (H1) - mobile

Heading 2 (H2) with line

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)

Heading 6 (H6)

Heading 1 (p)

Heading 2 (p)

Heading 3 (p)

Heading 4 (p)

Heading 5 (p)

Heading 6 (p)

Markup: typography\headings-default.hbs

Copy

<h1>Heading 1 (H1)</h1>
<h1 class="slb-h1-mobile">Heading 1 (H1) - mobile</h1>
<h2 class="slb-underlined slb-underlined--full-width">Heading 2 (H2) with line</h2>
<h2>Heading 2 (H2)</h2>
<h3>Heading 3 (H3)</h3>
<h4>Heading 4 (H4)</h4>
<h5>Heading 5 (H5)</h5>
<h6>Heading 6 (H6)</h6>
<p class="slb-h1">Heading 1 (p)</p>
<p class="slb-h2">Heading 2 (p)</p>
<p class="slb-h3">Heading 3 (p)</p>
<p class="slb-h4">Heading 4 (p)</p>
<p class="slb-h5">Heading 5 (p)</p>
<p class="slb-h6">Heading 6 (p)</p>

Source: components/_typography.scss