Headings
File: ./scss/base/typography
The below HTML headings are available. They are displayed on a lightblue background to easily visualize how their line-height is following the vertical rhythm.
H1 (stockholm)
H2 (madrid)
H3 (berlin)
H4 (london)
H5 (paris)
Branded text
Branded text
Branded text
Branded text
Branded text
<h1>H1 (stockholm)</h1>
<h2>H2 (madrid)</h2>
<h3>H3 (berlin)</h3>
<h4>H4 (london)</h4>
<h5>H5 (paris)</h5>
<h1 class="text-styled">Branded text</h1>
<h2 class="text-styled">Branded text</h2>
<h3 class="text-styled">Branded text</h3>
<h4 class="text-styled">Branded text</h4>
<h5 class="text-styled">Branded text</h5>Usage
Classes for <h1> through <h5> are also available when you want to match the font styling of a heading but cannot use the associated HTML element. The type-class will automatically handle resize of font-size, line-height and margin-bottom for mobile/desktop.
Mimic h1 heading
Mimic h2 heading
Mimic h3 heading
Mimic h4 heading
Mimic h5 heading
<p class="heading-stockholm">Mimic h1 heading</p>
<p class="heading-madrid">Mimic h2 heading</p>
<p class="heading-berlin">Mimic h3 heading</p>
<p class="heading-london">Mimic h4 heading</p>
<p class="heading-paris">Mimic h5 heading</p>.example {
@include heading-stockholm; // Mimics all styling of an H1
}
h2 {
@include heading-london; // A smaller h2 with the london styling
}font-size | line-height | margin-bottom
The heading-classes and mixins will automatically scale up from default font-size, line-height and margin-bottom when the viewport is greater than 768px.