EC System

Language list: Splash

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
{#
  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': 'ec'
} only %}
 
{
  "global": {
    "language": "en"
  },
  "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"
    }
  ],
  "variant": "splash",
  "logo": true
}
 
<div class="ecl-language-list ecl-language-list--splash">

  <div class="ecl-skip-link__wrapper" id="skip-link">
    <a href="#main-content" class="ecl-skip-link">Skip to main content</a>
  </div>
  <section>
    <header class="ecl-u-bg-default ecl-u-pv-l" role="banner">
      <div class="ecl-container">

        <span class="ecl-logo ecl-logo--big ecl-u-mh-auto" role="img" aria-label="European Commission"></span>
      </div>
    </header>
    <div class="ecl-language-list__wrapper" id="main-content">
      <div class="ecl-container">
        <div class="ecl-row">
          <div class="ecl-col-lg-8 ecl-offset-lg-2">
            <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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

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

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

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

// Use generic mixin
@include exports('ec-component-language-list') {
  @include ecl-language-list();
}
  • URL: /components/raw/ec-component-language-list/ec-component-language-list.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-language-list/ec-component-language-list.scss
  • Size: 505 Bytes
  • Handle: @ecl/ec-component-language-list--splash
  • Variants (2): Splash , Overlay
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-language-list/ec-component-language-list.twig