Navigation

Links

Default link

The European Commission is the executive of The European Union and promotes its general interest.

Fullscreen
<p class="ecl-u-type-paragraph">The European Commission is the executive of <a href="/example" class="ecl-link"
    aria-label="Read more about the European Union">The European Union</a> and promotes its general interest.</p>

Try it yourself on the playground

Playground

Standalone link

<a href="/example" class="ecl-link ecl-link--standalone" aria-label="Read more about the Standalone link">Standalone
  link</a>

Try it yourself on the playground

Playground

Link with icon

Note: all types of links listed on this page can have icons before or after the label.

The European Commission is the executive of The European Unionand promotes its general interest.

Fullscreen
<p class="ecl-u-type-paragraph">The European Commission is the executive of <a href="/example"
    class="ecl-link ecl-link--default ecl-link--icon ecl-link--icon-after"
    aria-label="Read more about the European Union"><span class="ecl-link__label">The European Union</span><svg
      class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
      <use xlink:href="/dist/media/icons.3278a5c4.svg#external"></use>
    </svg></a> and promotes its general interest.</p>

Try it yourself on the playground

Playground

Call-to-action link

<a href="/example" class="ecl-link ecl-link--cta" aria-label="Read more about the CTA link component">Call to action
  link</a>

Try it yourself on the playground

Playground

Primary link

<a href="/example" class="ecl-link ecl-link--primary" aria-label="Read more about the primary link component">Primary
  link</a>

Try it yourself on the playground

Playground

Secondary link

<a href="/example" class="ecl-link ecl-link--secondary"
  aria-label="Read more about the secondary link component">Secondary link</a>

Try it yourself on the playground

Playground

Negative link

The European Commission is the executive of The European Union and promotes its general interest.

Fullscreen
<p class="ecl-u-type-paragraph ecl-u-bg-blue-100 ecl-u-type-color-white-100">The European Commission is the executive of
  <a href="/example" class="ecl-link ecl-link--negative" aria-label="Read more about the European Union">The European
    Union</a> and promotes its general interest.</p>

Try it yourself on the playground

Playground