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#link-default"
    class="ecl-link ecl-link--default">the European Union</a> and promotes its general interest.</p>

Try it yourself on the playground

Playground

Standalone link

<a href="/example#link-standalone" class="ecl-link ecl-link--standalone">Standalone link</a>

Try it yourself on the playground

Playground

Link with icon

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#link-icon"
    class="ecl-link ecl-link--default ecl-link--icon ecl-link--icon-after"><span class="ecl-link__label">the European
      Union</span> <svg focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--fluid">
      <use xlink:href="/dist/media/icons.db866e2e.svg#ui--external"></use>
    </svg></a> and promotes its general interest.</p>

Try it yourself on the playground

Playground

Call-to-action link

<a href="/example#link-cta" class="ecl-link ecl-link--cta">Call to action link</a>

Try it yourself on the playground

Playground
<a href="/example#link-cta" class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
    class="ecl-link__label">Call to action link with icon</span> <svg focusable="false" aria-hidden="true"
    class="ecl-link__icon ecl-icon ecl-icon--fluid ecl-icon--rotate-90">
    <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
  </svg></a>

Try it yourself on the playground

Playground