EC System

Logos

Documentation • Demo

EC logo

Default EC logo.

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

Or using Twig:

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

EC logotype

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

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

Or using Twig:

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

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

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

Or using Twig:

{% include '@ecl/ec-component-logo' with {
  'href': '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 '@ecl/ec-component-logo' with {
  'href': 'https://ec.europa.eu',
  'title': 'Home - European Commission',
  'type': 'right',
  'extra_classes': 'site-header__logo'
} %}
 
{#
  Parameters:
    - "variant" (string) (default: ''): "", or "big"
    - "type" (string) (default: ''): "", "below", "right"
    - "title" (string) (default: 'European Commission')
    - "href" (string) (default: '')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-logo' with {
  'variant': variant|default(''),
  'type': type|default(''),
  'title': title|default('European Commission'),
  'href': href|default(''),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
/* Default (no language) */
{
  "href": "../../example.html#top",
  "title": "Home"
}


/* Bulgarian Right */
{
  "global": {
    "language": "bg"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Bulgarian Below */
{
  "global": {
    "language": "bg"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Czech Right */
{
  "global": {
    "language": "cs"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Czech Below */
{
  "global": {
    "language": "cs"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Danish Right */
{
  "global": {
    "language": "da"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Danish Below */
{
  "global": {
    "language": "da"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* German Right */
{
  "global": {
    "language": "de"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* German Below */
{
  "global": {
    "language": "de"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Estonian Right */
{
  "global": {
    "language": "et"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Estonian Below */
{
  "global": {
    "language": "et"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Greek Right */
{
  "global": {
    "language": "el"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Greek Below */
{
  "global": {
    "language": "el"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* English Right */
{
  "global": {
    "language": "en"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* English Below */
{
  "global": {
    "language": "en"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Spanish Right */
{
  "global": {
    "language": "es"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Spanish Below */
{
  "global": {
    "language": "es"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* French Right */
{
  "global": {
    "language": "fr"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* French Below */
{
  "global": {
    "language": "fr"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Irish Gaeilge Right */
{
  "global": {
    "language": "ga"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Irish Gaeilge Below */
{
  "global": {
    "language": "ga"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Croatian Right */
{
  "global": {
    "language": "hr"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Croatian Below */
{
  "global": {
    "language": "hr"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Italian Right */
{
  "global": {
    "language": "it"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Italian Below */
{
  "global": {
    "language": "it"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Latvian Right */
{
  "global": {
    "language": "lv"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Latvian Below */
{
  "global": {
    "language": "lv"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Lithuanian Right */
{
  "global": {
    "language": "lt"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Lithuanian Below */
{
  "global": {
    "language": "lt"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Hungarian Right */
{
  "global": {
    "language": "hu"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Hungarian Below */
{
  "global": {
    "language": "hu"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Maltese Right */
{
  "global": {
    "language": "mt"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Maltese Below */
{
  "global": {
    "language": "mt"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Dutch Right */
{
  "global": {
    "language": "nl"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Dutch Below */
{
  "global": {
    "language": "nl"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Polish Right */
{
  "global": {
    "language": "pl"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Polish Below */
{
  "global": {
    "language": "pl"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Portuguese Right */
{
  "global": {
    "language": "pt"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Portuguese Below */
{
  "global": {
    "language": "pt"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Romanian Right */
{
  "global": {
    "language": "ro"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Romanian Below */
{
  "global": {
    "language": "ro"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Slovak Right */
{
  "global": {
    "language": "sk"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Slovak Below */
{
  "global": {
    "language": "sk"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Slovene Right */
{
  "global": {
    "language": "sl"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Slovene Below */
{
  "global": {
    "language": "sl"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Finnish Right */
{
  "global": {
    "language": "fi"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Finnish Below */
{
  "global": {
    "language": "fi"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


/* Swedish Right */
{
  "global": {
    "language": "sv"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "right"
}


/* Swedish Below */
{
  "global": {
    "language": "sv"
  },
  "href": "../../example.html#top",
  "title": "Home",
  "type": "below"
}


<!-- Default (no language) -->
<a href="../../example.html#top" class="ecl-logo" title="Home"><span class="ecl-u-sr-only">Home</span></a>


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


<!-- Swedish Right -->
<a href="../../example.html#top" class="ecl-logo ecl-logo--logotype" title="Home"><span class="ecl-u-sr-only">Home</span></a>


<!-- Swedish Below -->
<a href="../../example.html#top" class="ecl-logo ecl-logo--logotypebelow" title="Home"><span class="ecl-u-sr-only">Home</span></a>
  • Content: 
    /**
 * Logos
 * @define logo
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';

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

  .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.
  /* stylelint-disable-next-line order/order */
  @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.
  /* stylelint-disable-next-line order/order */
  @include logo-background-languages(
    $ecl-assets-path + 'images/logo/logotypebelow--',
    '.svg',
    'ecl-logo--logotypebelow'
  );

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

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up(sm) {
    .ecl-logo--logotype {
      width: 290px;
    }

    .ecl-logo--logotypebelow {
      height: 118px;
      width: 324px;
    }
  }
}

/**
 * EC logo
 */

// Language generator.
@mixin logo-background-languages(
  $file_path,
  $file_extension,
  $logo_class: ecl-logo--logotype
) {
  @each $item in $ecl-languages {
    /* stylelint-disable */
    .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 */
  }
}

// Use mixin
@include exports('ec-component-logo') {
  @include ecl-logo();
}
  • URL: /components/raw/ec-component-logo/ec-component-logo.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-logo/ec-component-logo.scss
  • Size: 2 KB
  • Handle: @ecl/ec-component-logo
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-logo/ec-component-logo.twig