Europa Component Library

EMA Paragraphs

Default ECL paragraphs, with custom EMA font.

It uses an extra modifier ecl-paragraph--ema

{% include '@ec-europa/ecl-typography-paragraphs' with modifier %}
/* Leading paragraph */
{
  "modifier": "ecl-paragraph ecl-paragraph--ema ecl-paragraph--l"
}

/* Medium paragraph */
{
  "modifier": "ecl-paragraph ecl-paragraph--ema ecl-paragraph--m"
}

/* Small paragraph */
{
  "modifier": "ecl-paragraph ecl-paragraph--ema ecl-paragraph--s"
}

/* Extra small paragraph */
{
  "modifier": "ecl-paragraph ecl-paragraph--ema ecl-paragraph--xs"
}

/* Extra extra small paragraph */
{
  "modifier": "ecl-paragraph ecl-paragraph--ema ecl-paragraph--xxs"
}

<!-- Leading paragraph -->
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.</p>
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--l">Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque
  enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?</p>

<!-- Medium paragraph -->
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.</p>
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--m">Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque
  enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?</p>

<!-- Small paragraph -->
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.</p>
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--s">Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque
  enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?</p>

<!-- Extra small paragraph -->
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.</p>
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--xs">Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque
  enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?</p>

<!-- Extra extra small paragraph -->
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--xxs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.</p>
<p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--xxs">Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque
  enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?</p>

  • Handle: @ec-europa/ema-typography-paragraphs
  • Preview:
  • Filesystem Path: framework/content/ema-typography/ema-typography-paragraphs/ema-typography-paragraphs.twig