Europa Component Library

Headlines and headings

Documentation • Demo

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 &lt;h1&gt; with class ecl-heading ecl-heading--h1</h1>


<!-- h2 -->
<h2 class="ecl-heading ecl-heading--h2" style="">Heading &lt;h2&gt; with class ecl-heading ecl-heading--h2</h2>


<!-- h3 -->
<h3 class="ecl-heading ecl-heading--h3" style="">Heading &lt;h3&gt; with class ecl-heading ecl-heading--h3</h3>


<!-- h4 -->
<h4 class="ecl-heading ecl-heading--h4" style="">Heading &lt;h4&gt; with class ecl-heading ecl-heading--h4</h4>


<!-- h5 -->
<h5 class="ecl-heading ecl-heading--h5" style="">Heading &lt;h5&gt; 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: 
    // Headers
@import 'headings-mixins';

.ecl-editor h1 {
  @include heading();
  @include heading-1();
}

.ecl-editor h2 {
  @include heading();
  @include heading-2();
}

.ecl-editor h3 {
  @include heading();
  @include heading-3();
}

.ecl-editor h4 {
  @include heading();
  @include heading-4();
}

.ecl-editor h5 {
  @include heading();
  @include heading-5();
}

.ecl-editor {
  * + h1 {
    margin-top: map-get($ecl-spacing, 'xxl');
  }

  * + h2 {
    margin-top: map-get($ecl-spacing, 'xl');
  }

  * + h3 {
    margin-top: map-get($ecl-spacing, 'l');
  }
}
  • URL: /components/raw/ecl-typography-headings/_editor-headings.scss
  • Filesystem Path: framework/content/ecl-typography/ecl-typography-headings/_editor-headings.scss
  • Size: 567 Bytes
  • Content: 
    @mixin heading() {
  margin: 0 0 map-get($ecl-spacing, 'm');
  padding: 0;
}

@mixin heading-1() {
  color: #000;
  font-size: map-get($ecl-font-size, 'xxl');
  font-weight: 600;
  line-height: 1.1;
}

@mixin heading-2() {
  color: #000;
  font-size: map-get($ecl-font-size, 'xl');
  font-weight: 600;
  line-height: 1.1;
}

@mixin heading-3() {
  color: $ecl-color-shade;
  font-size: map-get($ecl-font-size, 'l');
  font-weight: 600;
  line-height: 1.1;
  max-width: 32em;
}

@mixin heading-4() {
  color: $ecl-color-shade;
  font-size: map-get($ecl-font-size, 'm');
  font-weight: 600;
  line-height: 1.1;
  max-width: 32em;
}

@mixin heading-5() {
  color: $ecl-color-shade;
  font-size: map-get($ecl-font-size, 's');
  line-height: 1.1;
  max-width: 32em;
  text-transform: uppercase;
}
  • URL: /components/raw/ecl-typography-headings/_headings-mixins.scss
  • Filesystem Path: framework/content/ecl-typography/ecl-typography-headings/_headings-mixins.scss
  • Size: 792 Bytes
  • Content: 
    // Headers
@import 'headings-mixins';

.ecl-heading {
  @include heading();
}

.ecl-heading--h1 {
  @include heading-1();
}

.ecl-heading--h2 {
  @include heading-2();
}

.ecl-heading--h3 {
  @include heading-3();
}

.ecl-heading--h4 {
  @include heading-4();
}

.ecl-heading--h5 {
  @include heading-5();
}

.ecl-heading--headline {
  color: #fff;
  font-size: map-get($ecl-font-size, 'm');
  font-weight: 600;
  line-height: 2.2;
}

// Spacing
* + .ecl-heading--h1 {
  margin-top: map-get($ecl-spacing, 'xxl');
}

* + .ecl-heading--h2 {
  margin-top: map-get($ecl-spacing, 'xl');
}

* + .ecl-heading--h3 {
  margin-top: map-get($ecl-spacing, 'l');
}

// Deprecated
.ecl-h1,
.ecl-h2,
.ecl-h3,
.ecl-h4,
.ecl-h5,
.ecl-h6 {
  margin: 0;
  padding: 0;
}
  • URL: /components/raw/ecl-typography-headings/_headings.scss
  • Filesystem Path: framework/content/ecl-typography/ecl-typography-headings/_headings.scss
  • Size: 751 Bytes
  • Handle: @ec-europa/ecl-typography-headings
  • Preview:
  • Filesystem Path: framework/content/ecl-typography/ecl-typography-headings/ecl-typography-headings.twig