Europa Component Library

Headings

Documentation • Demo

EMA Headings

{% include '@ec-europa/ecl-typography-headings' %}
 
/* h1 */
{
  "element": "h1",
  "class": "ecl-heading ecl-heading--ema-h1",
  "text": "Heading <h1>: class ecl-heading ecl-heading--ema-h1"
}


/* h2 */
{
  "element": "h2",
  "class": "ecl-heading ecl-heading--ema-h2",
  "text": "Heading <h2>: class ecl-heading ecl-heading--ema-h2"
}


/* h3 */
{
  "element": "h3",
  "class": "ecl-heading ecl-heading--ema-h3",
  "text": "Heading <h3>: class ecl-heading ecl-heading--ema-h3"
}


/* h4 */
{
  "element": "h4",
  "class": "ecl-heading ecl-heading--ema-h4",
  "text": "Heading <h4>: class ecl-heading ecl-heading--ema-h4"
}


<!-- h1 -->
<h1 class="ecl-heading ecl-heading--ema-h1" style="">Heading &lt;h1&gt;: class ecl-heading ecl-heading--ema-h1</h1>


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


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


<!-- h4 -->
<h4 class="ecl-heading ecl-heading--ema-h4" style="">Heading &lt;h4&gt;: class ecl-heading ecl-heading--ema-h4</h4>
  • 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();
}
  • URL: /components/raw/ema-typography-headings/_editor-headings.scss
  • Filesystem Path: framework/content/ema-typography/ema-typography-headings/_editor-headings.scss
  • Size: 302 Bytes
  • Content: 
    @mixin heading() {
  color: rgb(64, 64, 64);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  max-width: 56em;
  padding: 0;
}

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

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

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

@mixin heading-4() {
  color: #000;
  font-size: map-get($ecl-font-size, 'm');
  font-weight: bold;
  line-height: 1.1;
}
  • URL: /components/raw/ema-typography-headings/_headings-mixins.scss
  • Filesystem Path: framework/content/ema-typography/ema-typography-headings/_headings-mixins.scss
  • Size: 656 Bytes
  • Content: 
    // EMA Headers
@import 'headings-mixins';

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

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

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

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

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

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

* + .ecl-heading--ema-h3 {
  margin-top: map-get($ecl-spacing, 'l');
}
  • URL: /components/raw/ema-typography-headings/ema-typography-headings.scss
  • Filesystem Path: framework/content/ema-typography/ema-typography-headings/ema-typography-headings.scss
  • Size: 560 Bytes
  • Handle: @ec-europa/ema-typography-headings
  • Preview:
  • Filesystem Path: framework/content/ema-typography/ema-typography-headings/ema-typography-headings.twig