Utilities

Typography

Headings

<h1 class="ecl-u-type-heading-1">About the European Commission</h1>
<h2 class="ecl-u-type-heading-2">About the European Commission</h2>
<h3 class="ecl-u-type-heading-3">About the European Commission</h3>
<h4 class="ecl-u-type-heading-4">About the European Commission</h4>
<h5 class="ecl-u-type-heading-5">About the European Commission</h5>
<h6 class="ecl-u-type-heading-6">About the European Commission</h6>

Try it yourself on the playground

Playground

Paragraph

Try it yourself on the playground

Playground

Text colour

Note: this list is not exhaustive, please read the usage page to know available colours.

Colour dark
Colour primary
Colour dark 60
Colour error
Colour success
<div class="ecl-u-type-m ecl-u-type-color-dark">Colour dark</div>
<div class="ecl-u-type-m ecl-u-type-color-primary">Colour primary</div>
<div class="ecl-u-type-m ecl-u-type-color-dark-60">Colour dark 60</div>
<div class="ecl-u-type-m ecl-u-type-color-error">Colour error</div>
<div class="ecl-u-type-m ecl-u-type-color-success">Colour success</div>

Try it yourself on the playground

Playground

Text style

About the European Commission
About the European Commission
About the European Commission
About the European Commission
About the European Commission
About the European Commission
About the European Commission

Try it yourself on the playground

Playground