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.
Link types
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 linkexternal 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 underlinemore link
used on the Listings componentexpandable link
used on the Expandable componentsocial 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/ec-base/ec-base'; @import '@ecl/generic-component-link/generic-component-link--editor'; @include exports('ec-component-link--editor') { @include ecl-editor-link(); }
- URL: /components/raw/ec-component-link/ec-component-link--editor.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-link/ec-component-link--editor.scss
- Size: 183 Bytes
-
Content:
/** * Link component * @define link */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-link/generic-component-link'; // Use generic mixin @include exports('ec-component-link') { @include ecl-link(); }
- URL: /components/raw/ec-component-link/ec-component-link.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-link/ec-component-link.scss
- Size: 248 Bytes
- Handle: @ecl/ec-component-link
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-link/ec-component-link.twig