EU System

Logos

Documentation • Demo

EU Logo

Default EU logo.

<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/eu-component-logo' with {
  'title': 'European Union',
  'href': 'https://europa.eu',
  'type': 'right'
} only %}
 
{#
  Parameters:
    - "variant" (string) (default: ''): "", or "big"
    - "type" (string) (default: 'right'): "" or "right"
    - "title" (string) (default: 'European Union')
    - "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('right'),
  'title': title|default('European Union'),
  'href': href|default(''),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
/* Default (no language) */
{
  "href": "../../example.html#top",
  "title": "Home",
  "type": " "
}


/* Big logo (no language) */
{
  "href": "../../example.html#top",
  "title": "Home",
  "variant": "big",
  "type": " "
}


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

@mixin ecl-logo() {
  // Default EU logo.
  .ecl-logo {
    background: url($ecl-assets-path+'images/logo.svg') no-repeat;
    background-size: contain;
    display: block;
    height: 41px;
    width: 62px;
  }

  .ecl-logo--big {
    height: 80px;
    width: 118px;
  }

  // EU logotype
  //
  // EU 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 {
    height: 41px;
    width: 234px;
  }

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

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up(md) {
    .ecl-logo {
      height: 52px;
      width: 78px;
    }

    .ecl-logo--big {
      height: 112px;
      width: 166px;
    }

    .ecl-logo--logotype {
      height: 56px;
      width: 325px;
    }
  }
}

/**
 * EU 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('eu-component-logo') {
  @include ecl-logo();
}
  • URL: /components/raw/eu-component-logo/eu-component-logo.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-logo/eu-component-logo.scss
  • Size: 1.8 KB
  • Handle: @ecl/eu-component-logo
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-logo/eu-component-logo.twig