Links - Navigation

Default link

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

<p class="ecl-u-type-paragraph">The European Commission is the executive of <a href="/component-library/v3.13.0/example"
    class="ecl-link">The European Union</a> and promotes its general interest.</p>

Try it yourself on the playground

Playground

Standalone link

Fullscreen

<a href="/component-library/v3.13.0/example" class="ecl-link ecl-link--standalone">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="/component-library/v3.13.0/example"
    class="ecl-link ecl-link--default ecl-link--icon ecl-link--icon-after"><span class="ecl-link__label">The European
      Union</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="false" role="img">
      <title>Links to an external domain</title>
      <use xlink:href="/component-library/v3.13.0/dist/media/icons.75c96284.svg#external"></use>
    </svg></a> and promotes its general interest.</p>

Try it yourself on the playground

Playground

Call-to-action link

Call to action link

Fullscreen

<a href="/component-library/v3.13.0/example" class="ecl-link ecl-link--cta">Call to action link</a>

Try it yourself on the playground

Playground

Primary link

Fullscreen

<a href="/component-library/v3.13.0/example" class="ecl-link ecl-link--primary">Primary link</a>

Try it yourself on the playground

Playground

Secondary link

Fullscreen

<a href="/component-library/v3.13.0/example" class="ecl-link ecl-link--secondary">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="/component-library/v3.13.0/example" class="ecl-link ecl-link--negative">The European Union</a> and promotes
  its general interest.</p>

Try it yourself on the playground

Playground