Europa Component Library

Links

Documentation • Demo

EMA Links

Based on ECL links, with custom modifiers.

{% include '@ec-europa/ecl-links' %}
 
/* Links in body text */
{
  "extra_classes": "ecl-link--ema-default",
  "href": "#",
  "label": "in-line link"
}


/* External links */
{
  "extra_classes": "ecl-link--ema-external",
  "href": "#",
  "label": "external link"
}


/* Obvious links */
{
  "extra_classes": "ecl-link--ema-obvious",
  "href": "#",
  "label": "obvious link"
}


/* Inverted links (could be external too) */
{
  "extra_classes": "ecl-link--ema-inverted ema-u-bg-primary",
  "href": "#",
  "label": "inverted link"
}


<!-- Links in body text -->
<a class="ecl-link ecl-link--ema-default" href="#">in-line link</a>


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


<!-- Obvious links -->
<a class="ecl-link ecl-link--ema-obvious" href="#">obvious link</a>


<!-- Inverted links (could be external too) -->
<a class="ecl-link ecl-link--ema-inverted ema-u-bg-primary" href="#">inverted link</a>
  • Content: 
    @import 'links-mixins';

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

/* stylelint-disable-next-line */
.ecl-editor a[href^='http'] {
  @include link-external();
}
  • URL: /components/raw/ema-links/_editor-links.scss
  • Filesystem Path: framework/components/ema-links/_editor-links.scss
  • Size: 157 Bytes
  • Content: 
    @mixin link() {
  color: #06c;
  text-decoration: none;

  &:hover,
  &:focus {
    color: #06c;
    text-decoration: underline;
  }
}

@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/ema-links/_links-mixins.scss
  • Filesystem Path: framework/components/ema-links/_links-mixins.scss
  • Size: 314 Bytes
  • Content: 
    /**
* EMA Links component
*/

@import 'links-mixins';

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

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

.ecl-link--ema-obvious {
  @include link();
  color: #000;
  text-decoration: none;

  &:hover,
  &:focus {
    color: map-get($ema-colors, 'blue-2');
    text-decoration: underline;
  }

  &:visited {
    color: #000;
  }
}

.ecl-link--ema-inverted {
  @include link();
  color: #fff;

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

.ecl-link--ema-all {
  @include link();
  clear: right;
  float: right;
  text-transform: uppercase;
}

.ecl-link--ema-more {
  @include link();
  display: block;
  text-align: right;
}
  • URL: /components/raw/ema-links/ema-links.scss
  • Filesystem Path: framework/components/ema-links/ema-links.scss
  • Size: 711 Bytes
  • Handle: @ec-europa/ema-links
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ema-links/ema-links.twig