Headings
Headings and subheadings should be organised in a hierarchy, with heading first, followed by subheadings in order (An H2 will nestle under H1, and H2 under H3, and so on down).
Size | Leading | Weight | Colour | Usage | |
---|---|---|---|---|---|
Headline | M | 40px | Bold / regular | White | Headline on Page header (only used on homepage) |
Heading 1 | XXL | 44px | 600 | White/Black | Page titles (page header)/body of text |
Heading 2 | XL | 33px | 600 | Black | Body of the page |
Heading 3 | L | 24px | 600 | EC Grey | Body of the page/Listing components |
Heading 4 | M | 30px | 600 | EC Grey | |
Heading 5 | S | 22px | Regular / uppercase | EC Grey |
Line height
Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself. Ideal line-heights for standard copy has a ratio of 1.66. For example, a type at 1em/16px would have a line-height of 24px (16 x 1.66). The exception to this rule are headings, which need less spacing and therefore have a line-height ratio of 1.1.
Headings line-height: type size x 1.1
<{{ element }} class="{{ class }}" style="{{ style }}">{{ text|escape }}</{{ element }}>
/* h1 */
{
"element": "h1",
"class": "ecl-heading ecl-heading--h1",
"text": "Heading <h1> with class ecl-heading ecl-heading--h1"
}
/* h2 */
{
"element": "h2",
"class": "ecl-heading ecl-heading--h2",
"text": "Heading <h2> with class ecl-heading ecl-heading--h2"
}
/* h3 */
{
"element": "h3",
"class": "ecl-heading ecl-heading--h3",
"text": "Heading <h3> with class ecl-heading ecl-heading--h3"
}
/* h4 */
{
"element": "h4",
"class": "ecl-heading ecl-heading--h4",
"text": "Heading <h4> with class ecl-heading ecl-heading--h4"
}
/* h5 */
{
"element": "h5",
"class": "ecl-heading ecl-heading--h5",
"text": "Heading <h5> with class ecl-heading ecl-heading--h5"
}
/* headline */
{
"element": "div",
"class": "ecl-heading ecl-heading--headline",
"style": "background-color: #004494",
"text": "Headline with class ecl-heading ecl-heading--headline and background"
}
<!-- h1 -->
<h1 class="ecl-heading ecl-heading--h1" style="">Heading <h1> with class ecl-heading ecl-heading--h1</h1>
<!-- h2 -->
<h2 class="ecl-heading ecl-heading--h2" style="">Heading <h2> with class ecl-heading ecl-heading--h2</h2>
<!-- h3 -->
<h3 class="ecl-heading ecl-heading--h3" style="">Heading <h3> with class ecl-heading ecl-heading--h3</h3>
<!-- h4 -->
<h4 class="ecl-heading ecl-heading--h4" style="">Heading <h4> with class ecl-heading ecl-heading--h4</h4>
<!-- h5 -->
<h5 class="ecl-heading ecl-heading--h5" style="">Heading <h5> with class ecl-heading ecl-heading--h5</h5>
<!-- headline -->
<div class="ecl-heading ecl-heading--headline" style="background-color: #004494">Headline with class ecl-heading ecl-heading--headline and background</div>
-
Content:
@import '@ecl/eu-base/eu-base'; @import '@ecl/generic-style-typography-heading/generic-style-typography-heading--editor'; @include exports('eu-style-typography-heading--editor') { @include ecl-editor-typography-heading(); }
- URL: /components/raw/eu-style-typography-heading/eu-style-typography-heading--editor.scss
- Filesystem Path: ../../src/systems/eu/eu-style/eu-style-typography/eu-style-typography-heading/eu-style-typography-heading--editor.scss
- Size: 227 Bytes
-
Content:
/** * Headings * @define heading */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-style-typography-heading/generic-style-typography-heading'; // Use generic mixin @include exports('eu-style-typography-heading') { @include ecl-typography-heading(); }
- URL: /components/raw/eu-style-typography-heading/eu-style-typography-heading.scss
- Filesystem Path: ../../src/systems/eu/eu-style/eu-style-typography/eu-style-typography-heading/eu-style-typography-heading.scss
- Size: 292 Bytes
- Handle: @ecl/eu-style-typography-heading
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-style/eu-style-typography/eu-style-typography-heading/eu-style-typography-heading.twig