Europa Component Library

Links

Documentation • Demo

Links

Why and how to use this component

When you need to direct users to a different page or to provide access to further information.

  • in-line text link

    • internal links
    • external links

  • stand-alone link

    • more link
    • expandable link
    • social media link

When to use this component

  • in-line link
    when links are inserted within paragraph text blocks
    style
    blue, underlined (displayed in white colour if the background colour is blue)

    • internal link
      when links point to URLs inside the ec.europa.eu domain
      style
      underlined link

    • external link
      when links point to URLs outside the ec.europa.eu domain
      style
      underlined link with an appended square w/ arrow pointing outward

  • stand-alone link
    when links are not inserted within paragraph text blocks
    style
    blue, no underline

    • more link
      used on the Listings component

    • expandable link
      used on the Expandable component

    • social media link
      used on the Social media - Follow. and Social media - Share. components

Do not use this component

  • for actions or important links to other pages - in this case, use buttons instead
{#
  Accepts:
    - variant (string): can be empty,'external','standalone', 'inverted', 'all', 'more', or an array (default: empty)
    - href (string): target of the link (default: '#')
    - label (string or block): label of the link (default: '')
    - extra_classes (string): additional classes to add to the component
    - extra_attributes (array of { name: '', value: '' })
#}

{# Internal properties #}

{% set _css_class = 'ecl-link' %}
{% set _extra_attributes = '' %}
{% set _href = href|default('#') %}
{% set _label = label|default('') %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% if variant is iterable %}
    {% for var in variant %}
      {% set _css_class = _css_class ~ ' ' ~ 'ecl-link--' ~ var %}
    {% endfor %}
  {% else %}
    {% set _css_class = _css_class ~ ' ' ~ 'ecl-link--' ~ variant %}
  {% endif %}
{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}
<a class="{{ _css_class }}" href="{{ _href }}"{{ _extra_attributes|raw }}>{% block label _label %}</a>
 
/* Default */
{
  "href": "#",
  "label": "in-line link"
}


/* External */
{
  "variant": "external",
  "href": "#",
  "label": "external link"
}


/* Standalone */
{
  "variant": "standalone",
  "href": "#",
  "label": "standalone link"
}


/* Inverted */
{
  "variant": "inverted",
  "extra_classes": "ecl-u-bg-shade",
  "href": "#",
  "label": "inverted link"
}


/* All */
{
  "variant": "all",
  "href": "#",
  "label": "all link"
}


/* More */
{
  "variant": "more",
  "href": "#",
  "label": "more link"
}


<!-- Default -->
<a class="ecl-link" href="#">in-line link</a>


<!-- External -->
<a class="ecl-link ecl-link--external" href="#">external link</a>


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


<!-- Inverted -->
<a class="ecl-link ecl-link--inverted ecl-u-bg-shade" href="#">inverted link</a>


<!-- All -->
<a class="ecl-link ecl-link--all" href="#">all link</a>


<!-- More -->
<a class="ecl-link ecl-link--more" href="#">more link</a>
  • Content: 
    @mixin link() {
  color: $ecl-color-primary;
  margin: 0;
  text-decoration: underline;

  &:hover,
  &:focus {
    color: #000;
  }
  &:visited {
    color: map-get($ecl-colors, 'purple-100');
  }
}

@mixin link-external {
  &::after {
    @extend %ecl-icon--after;

    @include ecl-icon('external');

    font-size: 75%;
    margin-left: 0.4em;
    margin-right: 0.2em;
  }
}
  • URL: /components/raw/ecl-links/_links-mixins.scss
  • Filesystem Path: framework/components/ecl-links/_links-mixins.scss
  • Size: 379 Bytes
  • Content: 
    /**
* Site switcher component
* @define link
*/

@import 'links-mixins';

.ecl-link {
  @include link();
}

.ecl-link--external {
  @include link-external();
}

.ecl-link--standalone {
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

.ecl-link--inverted {
  color: #fff;

  &:hover,
  &:focus,
  &:visited {
    color: #fff;
  }
}

.ecl-link--all {
  clear: right;
  float: right;
  text-transform: uppercase;
}

.ecl-link--more {
  text-transform: uppercase;

  &::after {
    @extend %ecl-icon--after;

    @include ecl-icon('right');

    font-size: 75%;
    margin-left: 0.4em;
    margin-right: 0.2em;
  }
}
  • URL: /components/raw/ecl-links/_links.scss
  • Filesystem Path: framework/components/ecl-links/_links.scss
  • Size: 652 Bytes
  • Handle: @ec-europa/ecl-links
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-links/ecl-links.twig