Europa Component Library

Logos

Documentation • Demo

EC logo

Default EC logo.

<a href="https://ec.europa.eu" class="logo" title="European Commission">
  <span class="ecl-u-sr-only">European Commission</span>
</a>

Or using Twig:

{% include '@ec-europa/ecl-logos' with {
  'to': 'https://ec.europa.eu',
  'title': 'European Commission',
} %}

EC logotype

EC logo with text. Add logo--logotype class to use it:

<a href="https://ec.europa.eu" class="logo logo--logotype" title="European Commission">
  <span class="ecl-u-sr-only">European Commission</span>
</a>

Or using Twig:

{% include '@ec-europa/ecl-logos' with {
  'to': 'https://ec.europa.eu',
  'title': 'European Commission',
  'type': 'right',
} %}

EC logo with text below. Add logo--logotypebelow class to use it:

<a href="https://ec.europa.eu" class="logo logo--logotypebelow" title="European Commission">
  <span class="ecl-u-sr-only">European Commission</span>
</a>

Or using Twig:

{% include '@ec-europa/ecl-logos' with {
  'to': 'https://ec.europa.eu',
  'title': 'European Commission',
  'type': 'below',
} %}

External classes

Additionally, you can add external classes with the extra_class optional parameter.

For example:

{% include '@ec-europa/ecl-logos' with {
  'to': 'https://ec.europa.eu',
  'title': 'Home - European Commission',
  'type': 'right',
  'extra_class': 'site-header__logo'
} %}
 
{% set _class = "" %}

{% if type is defined %}
  {% if type == "below" %}
    {% set _class = " ecl-logo--logotypebelow" %}
  {% elseif type == "right" %}
    {% set _class = " ecl-logo--logotype" %}
  {% endif %}
{% endif %}

{% if extra_class %}
  {% set _class = _class ~ " " ~ extra_class %}
{% endif %}

{% if to is defined %}
<a href="{{ to }}" class="ecl-logo{{ _class }}" title="{{ title }}">
  <span class="ecl-u-sr-only">{{ title }}</span>
</a>
{% else %}
<span class="ecl-logo{{ _class }}" role="img" aria-label="{{ title }}"></span>
{% endif %}
 
/* Bulgarian */
{
  "global": {
    "language": "bg"
  },
  "to": "#top",
  "title": "Home"
}


/* English */
{
  "global": {
    "language": "en"
  },
  "to": "#top",
  "title": "Home"
}


/* Czech */
{
  "global": {
    "language": "cs"
  },
  "to": "#top",
  "title": "Home"
}


/* Danish */
{
  "global": {
    "language": "da"
  },
  "to": "#top",
  "title": "Home"
}


/* German */
{
  "global": {
    "language": "de"
  },
  "to": "#top",
  "title": "Home"
}


/* Estonian */
{
  "global": {
    "language": "et"
  },
  "to": "#top",
  "title": "Home"
}


/* Greek */
{
  "global": {
    "language": "el"
  },
  "to": "#top",
  "title": "Home"
}


/* Spanish */
{
  "global": {
    "language": "es"
  },
  "to": "#top",
  "title": "Home"
}


/* French */
{
  "global": {
    "language": "fr"
  },
  "to": "#top",
  "title": "Home"
}


/* Irish Gaeilge */
{
  "global": {
    "language": "ga"
  },
  "to": "#top",
  "title": "Home"
}


/* Croatian */
{
  "global": {
    "language": "hr"
  },
  "to": "#top",
  "title": "Home"
}


/* Italian */
{
  "global": {
    "language": "it"
  },
  "to": "#top",
  "title": "Home"
}


/* Latvian */
{
  "global": {
    "language": "lv"
  },
  "to": "#top",
  "title": "Home"
}


/* Lithuanian */
{
  "global": {
    "language": "lt"
  },
  "to": "#top",
  "title": "Home"
}


/* Hungarian */
{
  "global": {
    "language": "hu"
  },
  "to": "#top",
  "title": "Home"
}


/* Maltese */
{
  "global": {
    "language": "mt"
  },
  "to": "#top",
  "title": "Home"
}


/* Dutch */
{
  "global": {
    "language": "nl"
  },
  "to": "#top",
  "title": "Home"
}


/* Polish */
{
  "global": {
    "language": "pl"
  },
  "to": "#top",
  "title": "Home"
}


/* Portuguese */
{
  "global": {
    "language": "pt"
  },
  "to": "#top",
  "title": "Home"
}


/* Romanian */
{
  "global": {
    "language": "ro"
  },
  "to": "#top",
  "title": "Home"
}


/* Slovak */
{
  "global": {
    "language": "sk"
  },
  "to": "#top",
  "title": "Home"
}


/* Slovene */
{
  "global": {
    "language": "sl"
  },
  "to": "#top",
  "title": "Home"
}


/* Finnish */
{
  "global": {
    "language": "fi"
  },
  "to": "#top",
  "title": "Home"
}


/* Swedish */
{
  "global": {
    "language": "sv"
  },
  "to": "#top",
  "title": "Home"
}


<!-- Bulgarian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- English -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Czech -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Danish -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- German -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Estonian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Greek -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Spanish -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- French -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Irish Gaeilge -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Croatian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Italian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Latvian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Lithuanian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Hungarian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Maltese -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Dutch -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Polish -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Portuguese -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Romanian -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Slovak -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Slovene -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Finnish -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>


<!-- Swedish -->
<a href="#top" class="ecl-logo" title="Home">
  <span class="ecl-u-sr-only">Home</span>
</a>
  • Content: 
    /**
 * EC logo
 */

%logo {
  background: url($ecl-assets-path + 'images/logo.svg') no-repeat;
  display: block;
  height: 72px;
  width: 140px;
}

// Language generator.
@mixin logo-background-languages($file_path, $file_extension, $logo_class: ecl-logo--logotype) {
  @each $item in $ecl-languages {
    /* stylelint-disable max-nesting-depth */
    .language-#{$item} {
      .#{$logo_class} {
        background-image: url('#{$file_path}#{$item}#{$file_extension}');
      }

      @media print {
        .#{$logo_class}::before {
          content: url('#{$file_path}#{$item}#{$file_extension}');
        }
      }
    }
    /* stylelint-enable */
  }
}

/**
 * Logos
 * @define logo
 */

// Default EC logo.
.ecl-logo {
  @extend %logo;
}

.ecl-logo--big {
  height: 153px;
  width: 290px;
}

// EC logotype
//
// EC logo with text.

// Sets language-specific background image on .ecl-logo--logotype element nested
// in {{modifier_class}} modifier.
@include logo-background-languages($ecl-assets-path + 'images/logo/logo--', '.svg');

.ecl-logo--logotype {
  width: 190px;
}

// EC logotype with text below the logo
//
// EC logo with text below.

// Sets language-specific background image on .ecl-logo--logotypebelow element nested
// in {{modifier_class}} modifier.
@include logo-background-languages($ecl-assets-path + 'images/logo/logotypebelow--', '.svg', 'ecl-logo--logotypebelow');

.ecl-logo--logotypebelow {
  height: 72px;
  width: 198px;
}

@include ecl-media-breakpoint-up(sm) {
  .ecl-logo--logotype {
    width: 290px;
  }

  .ecl-logo--logotypebelow {
    height: 118px;
    width: 324px;
  }
}
  • URL: /components/raw/ecl-logos/_logos.scss
  • Filesystem Path: framework/components/ecl-logos/_logos.scss
  • Size: 1.6 KB