Europa Component Library

Language list: Overlay

Documentation • Demo

Language list

Why and how to use this component

Allows users to select a language when they first arrive on the website.

On pages where the content is not available in their chosen language, users can see the Language selector (page level) that locally overrules their selection.

When to use this component

  • when arriving on the base URL
{#
  - variant: can be 'splash' or 'overlay' (default: 'splash')
  - link: the link for the lang-select-sites (default: '#')
  - logo: display or not the European Commission logo. Can be true|false (default: false)
  - languages (array): array of languages to display
#}

{% set _variant = variant|default('splash') %}
{% set _link = link|default('#') %}
{% set _logo = logo|default(false) %}
{% set _css_class = 'ecl-language-list ecl-language-list--' ~ variant %}
{% set _extra_attributes = '' %}
{% set _languages = languages|default([]) %}

{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

{% set languagesSection %}
  <section>
    {% if _logo == true %}
      <header class="ecl-u-bg-default ecl-u-pv-l" role="banner">
        <div class="ecl-container">
          {% include '@ec-europa/ecl-logos' with {
            'extra_class': 'ecl-logo--big ecl-u-mh-auto',
            'title': 'European Commission'
          } %}
        </div>
      </header>
    {% endif %}
    <div{{ _variant == 'splash' ? ' class="ecl-u-bg-primary ecl-u-pv-xl"' : '' }}>
      <div class="ecl-container">
        <div class="ecl-row">
          <div class="ecl-col-lg-8 ecl-offset-lg-2">
            {% if _variant == 'overlay' %}
              <h2 lang="en" class="ecl-heading ecl-heading--h2 ecl-dialog__title">
                <span class="ecl-icon ecl-icon--generic-lang"></span> {{ messages.heading }}
              </h2>
            {% endif %}
            <div class="ecl-row">
              <div class="ecl-col-md-6">
                {% for lang in _languages %}
                  {% if loop.index0 == loop.length // 2 %}
                </div><div class="ecl-col-md-6">
                  {% endif %}
                  {% include '@ec-europa/ecl-buttons' with {
                    'type': 'link',
                    'label': lang.label ~ (lang.isActive ? '<span class="ecl-icon ecl-icon--check ecl-u-f-r"></span>'),
                    'href': lang.href,
                    'is_block': true,
                    'extra_classes': 'ecl-language-list__button' ~ (lang.isActive ? ' ecl-language-list__button--active'),
                    'extra_attributes': [
                      { 'name': 'lang', 'value': lang.lang },
                      { 'name': 'hreflang', 'value': lang.hreflang },
                      { 'name': 'rel', 'value': 'alternate' }
                    ]
                  } %}
                {% endfor %}
              </div>
              {% if _variant == 'overlay' %}
                <button class="ecl-message__dismiss ecl-message__dismiss--inverted">{{messages.dismiss}}</button>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endset %}

{# Print result #}
<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {% if _variant == 'overlay' %}
    {# Custom Dialog-overlay for the 'overlay' variant #}
    <div id="ecl-overlay-language-list" class="ecl-dialog__overlay ecl-dialog__overlay--blue" aria-hidden="true"></div>
    {% include '@ec-europa/ecl-lang-select-sites' with {
      'extra_attributes': [{name: 'data-ecl-dialog', value: 'ecl-dialog'}, {name: 'id', value: 'ecl-lang-select-sites__overlay'}],
      'extra_class': 'ecl-link',
      'link': _link
    } %}
    {% embed '@ec-europa/ecl-dialogs' with { 'variant': 'wide', 'extra_classes': 'ecl-dialog--transparent ecl-dialog--wide', 'dismiss': { 'hide': true } } %}
      {% block dialog_body %}
        {{ languagesSection }}
      {% endblock %}
    {% endembed %}
  {% elseif _variant == 'splash' %}
    {% include '@ec-europa/ecl-skip-links' with {
      'href': '#main-content',
      'label': 'Skip to main content'
    } %}
    {{ languagesSection }}
  {% endif %}
</div>
 
{
  "languages": [
    {
      "href": "index_bg",
      "hreflang": "bg",
      "label": "български",
      "lang": "bg"
    },
    {
      "href": "index_cs",
      "hreflang": "cs",
      "label": "čeština",
      "lang": "cs"
    },
    {
      "href": "index_da",
      "hreflang": "da",
      "label": "dansk",
      "lang": "da"
    },
    {
      "href": "index_de",
      "hreflang": "de",
      "label": "Deutsch",
      "lang": "de"
    },
    {
      "href": "index_et",
      "hreflang": "et",
      "label": "eesti",
      "lang": "et"
    },
    {
      "href": "index_el",
      "hreflang": "el",
      "label": "ελληνικά",
      "lang": "el"
    },
    {
      "href": "index_en",
      "hreflang": "en",
      "isActive": true,
      "label": "English",
      "lang": "en"
    },
    {
      "href": "index_es",
      "hreflang": "es",
      "label": "español",
      "lang": "es"
    },
    {
      "href": "index_fr",
      "hreflang": "fr",
      "label": "français",
      "lang": "fr"
    },
    {
      "href": "index_ga",
      "hreflang": "ga",
      "label": "Gaeilge",
      "lang": "ga"
    },
    {
      "href": "index_hr",
      "hreflang": "hr",
      "label": "hrvatski",
      "lang": "hr"
    },
    {
      "href": "index_it",
      "hreflang": "it",
      "label": "italiano",
      "lang": "it"
    },
    {
      "href": "index_lv",
      "hreflang": "lv",
      "label": "latviešu",
      "lang": "lv"
    },
    {
      "href": "index_lt",
      "hreflang": "lt",
      "label": "lietuvių",
      "lang": "lt"
    },
    {
      "href": "index_hu",
      "hreflang": "hu",
      "label": "magyar",
      "lang": "hu"
    },
    {
      "href": "index_mt",
      "hreflang": "mt",
      "label": "Malti",
      "lang": "mt"
    },
    {
      "href": "index_nl",
      "hreflang": "nl",
      "label": "Nederlands",
      "lang": "nl"
    },
    {
      "href": "index_pl",
      "hreflang": "pl",
      "label": "polski",
      "lang": "pl"
    },
    {
      "href": "index_pt",
      "hreflang": "pt",
      "label": "português",
      "lang": "pt-pt"
    },
    {
      "href": "index_ro",
      "hreflang": "ro",
      "label": "română",
      "lang": "ro"
    },
    {
      "href": "index_sk",
      "hreflang": "sk",
      "label": "slovenčina",
      "lang": "sk"
    },
    {
      "href": "index_sl",
      "hreflang": "sl",
      "label": "slovenščina",
      "lang": "sl"
    },
    {
      "href": "index_fi",
      "hreflang": "fi",
      "label": "suomi",
      "lang": "fi"
    },
    {
      "href": "index_sv",
      "hreflang": "sv",
      "label": "svenska",
      "lang": "sv"
    }
  ],
  "link": "#",
  "variant": "overlay",
  "messages": {
    "dismiss": "Close",
    "heading": "Select your language"
  },
  "_demo": {
    "scripts": "\n              document.addEventListener('DOMContentLoaded', function () {\n                ECL.dialogs({\n                  dialogOverlayId: 'ecl-overlay-language-list',\n                  triggerElementsSelector: '#ecl-lang-select-sites__overlay'\n                });\n              });\n            "
  }
}
 
<div class="ecl-language-list ecl-language-list--overlay">

  <div id="ecl-overlay-language-list" class="ecl-dialog__overlay ecl-dialog__overlay--blue" aria-hidden="true"></div>

  <div class="ecl-lang-select-sites ecl-link" data-ecl-dialog="ecl-dialog" id="ecl-lang-select-sites__overlay">
    <a href="#" class="ecl-lang-select-sites__link">
    <span class="ecl-lang-select-sites__label">English</span>
    <span class="ecl-lang-select-sites__code">
      <span class="ecl-icon ecl-icon--language ecl-lang-select-sites__icon"></span>
      <span class="ecl-lang-select-sites__code-text">en</span>
    </span>
  </a>
  </div>

  <div class="ecl-dialog ecl-dialog--transparent ecl-dialog--wide" id="ecl-dialog" aria-labelledby="ecl-dialog-title" aria-describedby="ecl-dialog-description" aria-hidden="true" role="dialog">
    <h3 id="ecl-dialog-title" class="ecl-heading ecl-heading--h3 ecl-u-sr-only">Dialog</h3>
    <div class="ecl-dialog__body">
      <section>
        <div>
          <div class="ecl-container">
            <div class="ecl-row">
              <div class="ecl-col-lg-8 ecl-offset-lg-2">
                <h2 lang="en" class="ecl-heading ecl-heading--h2 ecl-dialog__title">
                  <span class="ecl-icon ecl-icon--generic-lang"></span> Select your language
                </h2>
                <div class="ecl-row">
                  <div class="ecl-col-md-6">

                    <a href="index_bg" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="bg" hreflang="bg" rel="alternate">български</a>

                    <a href="index_cs" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="cs" hreflang="cs" rel="alternate">čeština</a>

                    <a href="index_da" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="da" hreflang="da" rel="alternate">dansk</a>

                    <a href="index_de" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="de" hreflang="de" rel="alternate">Deutsch</a>

                    <a href="index_et" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="et" hreflang="et" rel="alternate">eesti</a>

                    <a href="index_el" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="el" hreflang="el" rel="alternate">ελληνικά</a>

                    <a href="index_en" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button ecl-language-list__button--active" lang="en" hreflang="en" rel="alternate">English<span class="ecl-icon ecl-icon--check ecl-u-f-r"></span></a>

                    <a href="index_es" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="es" hreflang="es" rel="alternate">español</a>

                    <a href="index_fr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fr" hreflang="fr" rel="alternate">français</a>

                    <a href="index_ga" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ga" hreflang="ga" rel="alternate">Gaeilge</a>

                    <a href="index_hr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hr" hreflang="hr" rel="alternate">hrvatski</a>

                    <a href="index_it" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="it" hreflang="it" rel="alternate">italiano</a>
                  </div>
                  <div class="ecl-col-md-6">

                    <a href="index_lv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lv" hreflang="lv" rel="alternate">latviešu</a>

                    <a href="index_lt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lt" hreflang="lt" rel="alternate">lietuvių</a>

                    <a href="index_hu" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hu" hreflang="hu" rel="alternate">magyar</a>

                    <a href="index_mt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="mt" hreflang="mt" rel="alternate">Malti</a>

                    <a href="index_nl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="nl" hreflang="nl" rel="alternate">Nederlands</a>

                    <a href="index_pl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pl" hreflang="pl" rel="alternate">polski</a>

                    <a href="index_pt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pt-pt" hreflang="pt" rel="alternate">português</a>

                    <a href="index_ro" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ro" hreflang="ro" rel="alternate">română</a>

                    <a href="index_sk" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sk" hreflang="sk" rel="alternate">slovenčina</a>

                    <a href="index_sl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sl" hreflang="sl" rel="alternate">slovenščina</a>

                    <a href="index_fi" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fi" hreflang="fi" rel="alternate">suomi</a>

                    <a href="index_sv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sv" hreflang="sv" rel="alternate">svenska</a>
                  </div>
                  <button class="ecl-message__dismiss ecl-message__dismiss--inverted">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>

  </div>
</div>
  • Content: 
    /**
 * Language list component
 * @define language-list
 */

.ecl-language-list {
  margin: 0;
}

.ecl-language-list__button {
  background-color: #fff;
  color: $ecl-color-primary;

  &:focus,
  &:active,
  &:hover {
    border-color: map-get($ecl-colors, 'yellow-100');
    color: #000;
  }

  &:focus,
  &:active {
    background-color: #fff;
    text-decoration: underline;
  }

  &:hover {
    background-color: map-get($ecl-colors, 'yellow-100');
  }
}

.ecl-language-list__button--active {
  background-color: $ecl-color-secondary;
  box-shadow: none;
  color: #000;
}
  • URL: /components/raw/ecl-language-list/ecl-language-list.scss
  • Filesystem Path: framework/components/ecl-language-list/ecl-language-list.scss
  • Size: 576 Bytes