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#link-default"
class="ecl-link ecl-link--default">the European Union</a> and promotes its general interest.</p>
Try it yourself on the playground
PlaygroundStandalone link
<a href="/example#link-standalone" class="ecl-link ecl-link--standalone">Standalone link</a>
Try it yourself on the playground
PlaygroundLink with icon
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#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
PlaygroundCall-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