Language list

<div class="ecl-language-list ecl-language-list--splash">
  <header class="ecl-language-list__header"><img class="ecl-language-list__logo" src="/logo-ec--mute.svg"
      alt="European Commission logo" /></header>
  <div class="ecl-language-list__container ecl-container">
    <div class="ecl-row ecl-language-list__eu">
      <div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2">EU official languages</div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="bg" hrefLang="bg">български</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="es" hrefLang="es">español</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="cs" hrefLang="cs">čeština</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="da" hrefLang="da">dansk</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="de" hrefLang="de">Deutsch</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="et" hrefLang="et">eesti</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="el" hrefLang="el">ελληνικά</a></li>
          <li class="ecl-language-list__item ecl-language-list__item--is-active"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-language-list__link"
              lang="en" hrefLang="en"><span class="ecl-link__label">English</span><svg
                class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/icons.svg#check"></use>
              </svg></a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="fr" hrefLang="fr">français</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ga" hrefLang="ga">Gaeilge</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="hr" hrefLang="hr">hrvatski</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="it" hrefLang="it">italiano</a></li>
        </ul>
      </div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="lv" hrefLang="lv">latviešu</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="lt" hrefLang="lt">lietuvių</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="hu" hrefLang="hu">magyar</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="mt" hrefLang="mt">Malti</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="nl" hrefLang="nl">Nederlands</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="pl" hrefLang="pl">polski</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="pt" hrefLang="pt">português</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ro" hrefLang="ro">română</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="sk" hrefLang="sk">slovenčina</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="sl" hrefLang="sl">slovenščina</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="fi" hrefLang="fi">suomi</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="sv" hrefLang="sv">svenska</a></li>
        </ul>
      </div>
    </div>
    <div class="ecl-row ecl-language-list__non-eu">
      <div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2">Other languages</div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="zh" hrefLang="zh">中文</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="tr" hrefLang="tr">Türk</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ru" hrefLang="ru">pусский</a></li>
        </ul>
      </div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ca" hrefLang="ca">Català</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ar" hrefLang="ar">عَرَبِيّ</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="ecl-language-list ecl-language-list--overlay" data-ecl-language-list-overlay=""
  aria-labelledby="ecl-language-list__title" role="dialog">
  <div class="ecl-language-list__container ecl-container">
    <div class="ecl-row">
      <div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"><button
          class="ecl-button ecl-button--ghost ecl-language-list__close-button" type="submit"
          data-ecl-language-list-close=""><span class="ecl-button__container"><span class="ecl-button__label"
              data-ecl-label="true">Close</span><svg
              class="ecl-icon ecl-icon--s ecl-button__icon ecl-button__icon--after" focusable="false" aria-hidden="true"
              data-ecl-icon="">
              <use xlink:href="/icons.svg#close"></use>
            </svg></span></button></div>
      <div class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2" id="ecl-language-list__title"><svg
          class="ecl-icon ecl-icon--m ecl-language-list__title-icon" focusable="false" aria-hidden="true">
          <use xlink:href="/icons.svg#generic-lang"></use>
        </svg>Select your language</div>
    </div>
    <div class="ecl-row ecl-language-list__eu">
      <div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2">EU official languages</div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="bg" hrefLang="bg"
              rel="alternate">български</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="es" hrefLang="es"
              rel="alternate">español</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="cs" hrefLang="cs"
              rel="alternate">čeština</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="da" hrefLang="da"
              rel="alternate">dansk</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="de" hrefLang="de"
              rel="alternate">Deutsch</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="et" hrefLang="et"
              rel="alternate">eesti</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="el" hrefLang="el"
              rel="alternate">ελληνικά</a></li>
          <li class="ecl-language-list__item ecl-language-list__item--is-active"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-language-list__link"
              lang="en" hrefLang="en" rel="alternate"><span class="ecl-link__label">English</span><svg
                class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/icons.svg#check"></use>
              </svg></a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="fr" hrefLang="fr"
              rel="alternate">français</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ga" hrefLang="ga"
              rel="alternate">Gaeilge</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="hr" hrefLang="hr"
              rel="alternate">hrvatski</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="it" hrefLang="it"
              rel="alternate">italiano</a></li>
        </ul>
      </div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="lv" hrefLang="lv"
              rel="alternate">latviešu</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="lt" hrefLang="lt"
              rel="alternate">lietuvių</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="hu" hrefLang="hu"
              rel="alternate">magyar</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="mt" hrefLang="mt"
              rel="alternate">Malti</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="nl" hrefLang="nl"
              rel="alternate">Nederlands</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="pl" hrefLang="pl"
              rel="alternate">polski</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="pt" hrefLang="pt"
              rel="alternate">português</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ro" hrefLang="ro"
              rel="alternate">română</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="sk" hrefLang="sk"
              rel="alternate">slovenčina</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="sl" hrefLang="sl"
              rel="alternate">slovenščina</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="fi" hrefLang="fi"
              rel="alternate">suomi</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="sv" hrefLang="sv"
              rel="alternate">svenska</a></li>
        </ul>
      </div>
    </div>
    <div class="ecl-row ecl-language-list__non-eu">
      <div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2">Other languages</div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="zh" hrefLang="zh"
              rel="alternate">中文</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="tr" hrefLang="tr"
              rel="alternate">Türk</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ru" hrefLang="ru"
              rel="alternate">pусский</a></li>
        </ul>
      </div>
      <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4">
        <ul class="ecl-language-list__list">
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ca" hrefLang="ca"
              rel="alternate">Català</a></li>
          <li class="ecl-language-list__item"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-language-list__link" lang="ar" hrefLang="ar"
              rel="alternate">عَرَبِيّ</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>