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="/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
PlaygroundStandalone 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
PlaygroundLink 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.
<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.2936c801.svg#external"></use>
</svg></a> and promotes its general interest.</p>
Try it yourself on the playground
PlaygroundCall-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
PlaygroundPrimary 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
PlaygroundSecondary 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
PlaygroundNegative link
The European Commission is the executive of The European Union and promotes its general interest.
<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