EU System

Language list: Overlay

Documentation • Demo

EU 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
{#
  Parameters:
    - "variant" (string) (default: 'splash'): can be 'splash' or 'overlay'
    - "link" (string) (default: '#'): the link for the lang-select-sites
    - "logo" (object) (default: {}): object of type ecl-logo
    {
      "type" (string)
    - "title" (string)
    - "href" (string)
    }
    - "languages" (array) (default: []): array of languages to display, format [
        {
          "href" (string),
          "hreflang" (string),
          "label" (string),
          "lang" (string)
        },
        ...
      ]
    - "messages" (object): shape of
      {
        "dismiss" (string) (default: 'Close'),
        "heading" (string) (default: 'Select your language')
      }
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
    - "system" (string) (default: "generic")
#}

{% include '@ecl/generic-component-language-list' with {
  'variant': variant|default('splash'),
  'link': linf|default('#'),
  'logo': logo|default({}),
  'languages': languages|default([]),
  'messages': messages|default({}),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'eu'
} only %}
 
{
  "languages": [
    {
      "href": "index_bg",
      "hreflang": "bg",
      "label": "български",
      "lang": "bg"
    },
    {
      "href": "index_es",
      "hreflang": "es",
      "label": "español",
      "lang": "es"
    },
    {
      "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",
      "is_active": true,
      "label": "English",
      "lang": "en"
    },
    {
      "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"
    }
  ],
  "href": "../../example.html#",
  "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" 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>
    <p id="ecl-dialog-description" class="ecl-u-sr-only"></p>
    <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_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_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_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-dialog__dismiss ecl-dialog__dismiss--inverted">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

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

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

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  (
    'eu-style-typography-heading',
    'eu-component-button',
    'eu-component-lang-select-site'
  )
);

// Use generic mixin
@include exports('eu-component-language-list') {
  @include ecl-language-list();

  .ecl-language-list__wrapper {
    background-color: map-get($ecl-colors, 'grey-15');
  }

  .ecl-language-list__button {
    border-color: map-get($ecl-colors, 'grey-15');
  }

  .ecl-language-list__button--active:link {
    text-decoration: underline;
  }

  .ecl-language-list--overlay .ecl-language-list__button {
    border-color: rgba(0, 0, 0, 0.7); // same color as dialog overlay background
  }
}
  • URL: /components/raw/eu-component-language-list/eu-component-language-list.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-language-list/eu-component-language-list.scss
  • Size: 910 Bytes
  • Handle: @ecl/eu-component-language-list--overlay
  • Variants (2): Splash , Overlay
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-language-list/eu-component-language-list.twig