EU System

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
{#
  Parameters:
    - "variant" (string or array) (default: ''): can be '','external','standalone', 'inverted', 'all', 'more', or an array
    - "href" (string) (default: '#')
    - "label" (string) (default: '')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
  Blocks:
    - "label"
#}

{# Internal properties #}

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

{# Internal logic - Process properties #}

{% if _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 and extra_attributes is iterable %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result #}

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


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


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


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


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


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


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


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


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


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


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


<!-- More -->
<a class="ecl-link ecl-link--more" href="../../example.html#">more link</a>
  • Content: 
    @import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-link/generic-component-link--editor';

@include exports('eu-component-link--editor') {
  @include ecl-editor-link();
}
  • URL: /components/raw/eu-component-link/eu-component-link--editor.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-link/eu-component-link--editor.scss
  • Size: 183 Bytes
  • Content: 
    /**
* Site switcher component
* @define link
*/

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-link/generic-component-link';

// Use generic mixin
@include exports('eu-component-link') {
  @include ecl-link();
}
  • URL: /components/raw/eu-component-link/eu-component-link.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-link/eu-component-link.scss
  • Size: 257 Bytes
  • Handle: @ecl/eu-component-link
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-link/eu-component-link.twig