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" 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#link-standalone" 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
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"
aria-label="Read more about the European Union"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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" aria-label="Read more about the CTA link component">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"
aria-label="Read more about Call to action link with icon"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>Try it yourself on the playground
Playground