Site header

<header class="ecl-site-header" data-ecl-site-header="true">
  <div class="ecl-site-header__container ecl-container">
    <div class="ecl-site-header__banner"><a class="ecl-link ecl-link--standalone" href="/example"
        aria-label="European Commission"><img alt="European Commission logo" title="European Commission"
          class="ecl-site-header__logo-image" src="/dist/media/logo--en.30b933cc.svg" /></a>
      <div class="ecl-site-header__selector"><a class="ecl-link ecl-link--standalone ecl-site-header__selector-link"
          href="/example" data-ecl-language-selector="true">English<span class="ecl-site-header__language-icon"><svg
              focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--m">
              <use xlink:href="/dist/media/icons.db866e2e.svg#general--language"></use>
            </svg><span class="ecl-site-header__language-code">en</span></span></a>
        <div hidden="" class="ecl-language-list ecl-language-list--overlay" aria-labelledby="ecl-language-list__title"
          role="dialog" data-ecl-language-list-overlay="true">
          <div class="ecl-language-list__container ecl-container">
            <div class="ecl-row">
              <div class="ecl-language-list__close ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"><button
                  data-ecl-language-list-close="true" type="submit"
                  class="ecl-language-list__close-button ecl-button ecl-button--ghost"><span
                    class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg
                      focusable="false" aria-hidden="true" data-ecl-icon="true"
                      class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
                      <use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></use>
                    </svg></span></button></div>
              <div class="ecl-language-list__title ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"
                id="ecl-language-list__title"><svg focusable="false" aria-hidden="true"
                  class="ecl-language-list__title-icon ecl-icon ecl-icon--m">
                  <use xlink:href="/dist/media/icons.db866e2e.svg#general--generic-lang"></use>
                </svg>Select your language</div>
            </div>
            <div class="ecl-row">
              <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
                <ul class="ecl-language-list__list">
                  <li class="ecl-language-list__item "><a lang="bg" hrefLang="bg" rel="alternate"
                      href="/example#language_bg"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">български</a></li>
                  <li class="ecl-language-list__item "><a lang="es" hrefLang="es" rel="alternate"
                      href="/example#language_es"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">español</a></li>
                  <li class="ecl-language-list__item "><a lang="cs" hrefLang="cs" rel="alternate"
                      href="/example#language_cs"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">čeština</a></li>
                  <li class="ecl-language-list__item "><a lang="da" hrefLang="da" rel="alternate"
                      href="/example#language_da"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">dansk</a></li>
                  <li class="ecl-language-list__item "><a lang="de" hrefLang="de" rel="alternate"
                      href="/example#language_de"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Deutsch</a></li>
                  <li class="ecl-language-list__item "><a lang="et" hrefLang="et" rel="alternate"
                      href="/example#language_et"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">eesti</a></li>
                  <li class="ecl-language-list__item "><a lang="el" hrefLang="el" rel="alternate"
                      href="/example#language_el"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">ελληνικά</a></li>
                  <li class="ecl-language-list__item ecl-language-list__item--is-active"><a lang="en" hrefLang="en"
                      rel="alternate" href="/example#language_en"
                      class="ecl-language-list__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                        class="ecl-link__label">English</span> <svg focusable="false" aria-hidden="true"
                        class="ecl-link__icon ecl-icon ecl-icon--xs">
                        <use xlink:href="/dist/media/icons.db866e2e.svg#ui--check"></use>
                      </svg></a></li>
                  <li class="ecl-language-list__item "><a lang="fr" hrefLang="fr" rel="alternate"
                      href="/example#language_fr"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">français</a></li>
                  <li class="ecl-language-list__item "><a lang="ga" hrefLang="ga" rel="alternate"
                      href="/example#language_ga"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a></li>
                  <li class="ecl-language-list__item "><a lang="hr" hrefLang="hr" rel="alternate"
                      href="/example#language_hr"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">hrvatski</a></li>
                  <li class="ecl-language-list__item "><a lang="it" hrefLang="it" rel="alternate"
                      href="/example#language_it"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">italiano</a></li>
                </ul>
              </div>
              <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
                <ul class="ecl-language-list__list">
                  <li class="ecl-language-list__item "><a lang="lv" hrefLang="lv" rel="alternate"
                      href="/example#language_lv"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">latviešu</a></li>
                  <li class="ecl-language-list__item "><a lang="lt" hrefLang="lt" rel="alternate"
                      href="/example#language_lt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">lietuvių</a></li>
                  <li class="ecl-language-list__item "><a lang="hu" hrefLang="hu" rel="alternate"
                      href="/example#language_hu"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">magyar</a></li>
                  <li class="ecl-language-list__item "><a lang="mt" hrefLang="mt" rel="alternate"
                      href="/example#language_mt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Malti</a></li>
                  <li class="ecl-language-list__item "><a lang="nl" hrefLang="nl" rel="alternate"
                      href="/example#language_nl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Nederlands</a></li>
                  <li class="ecl-language-list__item "><a lang="pl" hrefLang="pl" rel="alternate"
                      href="/example#language_pl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">polski</a></li>
                  <li class="ecl-language-list__item "><a lang="pt" hrefLang="pt" rel="alternate"
                      href="/example#language_pt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">português</a></li>
                  <li class="ecl-language-list__item "><a lang="ro" hrefLang="ro" rel="alternate"
                      href="/example#language_ro"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">română</a></li>
                  <li class="ecl-language-list__item "><a lang="sk" hrefLang="sk" rel="alternate"
                      href="/example#language_sk"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">slovenčina</a></li>
                  <li class="ecl-language-list__item "><a lang="sl" hrefLang="sl" rel="alternate"
                      href="/example#language_sl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">slovenščina</a></li>
                  <li class="ecl-language-list__item "><a lang="fi" hrefLang="fi" rel="alternate"
                      href="/example#language_fi"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">suomi</a></li>
                  <li class="ecl-language-list__item "><a lang="sv" hrefLang="sv" rel="alternate"
                      href="/example#language_sv"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">svenska</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <form class="ecl-site-header__search ecl-search-form" role="search">
      <div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-search-form__label ecl-form-label"
          for="search-form">Search</label><input type="search" id="search-form"
          class="ecl-search-form__text-input ecl-text-input" /></div><button aria-label="Search" type="submit"
        class="ecl-search-form__button ecl-button ecl-button--search"><span class="ecl-button__container"><span
            class="ecl-button__label" data-ecl-label="true">Search</span><svg focusable="false" aria-hidden="true"
            data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--xs">
            <use xlink:href="/dist/media/icons.db866e2e.svg#general--search"></use>
          </svg></span></button>
    </form>
  </div>
</header>

<header class="ecl-site-header" data-ecl-site-header="true">
  <div class="ecl-site-header__container ecl-container">
    <div class="ecl-site-header__banner"><a class="ecl-link ecl-link--standalone" href="/example"
        aria-label="Commmission Européenne"><img alt="Logo Commmission Européenne" title="Commmission Européenne"
          class="ecl-site-header__logo-image" src="/dist/media/logo--fr.a8aaa7ab.svg" /></a>
      <div class="ecl-site-header__selector"><a class="ecl-link ecl-link--standalone ecl-site-header__selector-link"
          href="/example" data-ecl-language-selector="true">Français<span class="ecl-site-header__language-icon"><svg
              focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--m">
              <use xlink:href="/dist/media/icons.db866e2e.svg#general--language"></use>
            </svg><span class="ecl-site-header__language-code">fr</span></span></a>
        <div hidden="" class="ecl-language-list ecl-language-list--overlay" aria-labelledby="ecl-language-list__title"
          role="dialog" data-ecl-language-list-overlay="true">
          <div class="ecl-language-list__container ecl-container">
            <div class="ecl-row">
              <div class="ecl-language-list__close ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"><button
                  data-ecl-language-list-close="true" type="submit"
                  class="ecl-language-list__close-button ecl-button ecl-button--ghost"><span
                    class="ecl-button__container"><span class="ecl-button__label"
                      data-ecl-label="true">Fermer</span><svg focusable="false" aria-hidden="true" data-ecl-icon="true"
                      class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
                      <use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></use>
                    </svg></span></button></div>
              <div class="ecl-language-list__title ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"
                id="ecl-language-list__title"><svg focusable="false" aria-hidden="true"
                  class="ecl-language-list__title-icon ecl-icon ecl-icon--m">
                  <use xlink:href="/dist/media/icons.db866e2e.svg#general--generic-lang"></use>
                </svg>Choisissez votre langue</div>
            </div>
            <div class="ecl-row">
              <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
                <ul class="ecl-language-list__list">
                  <li class="ecl-language-list__item "><a lang="bg" hrefLang="bg" rel="alternate"
                      href="/example#language_bg"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">български</a></li>
                  <li class="ecl-language-list__item "><a lang="es" hrefLang="es" rel="alternate"
                      href="/example#language_es"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">español</a></li>
                  <li class="ecl-language-list__item "><a lang="cs" hrefLang="cs" rel="alternate"
                      href="/example#language_cs"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">čeština</a></li>
                  <li class="ecl-language-list__item "><a lang="da" hrefLang="da" rel="alternate"
                      href="/example#language_da"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">dansk</a></li>
                  <li class="ecl-language-list__item "><a lang="de" hrefLang="de" rel="alternate"
                      href="/example#language_de"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Deutsch</a></li>
                  <li class="ecl-language-list__item "><a lang="et" hrefLang="et" rel="alternate"
                      href="/example#language_et"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">eesti</a></li>
                  <li class="ecl-language-list__item "><a lang="el" hrefLang="el" rel="alternate"
                      href="/example#language_el"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">ελληνικά</a></li>
                  <li class="ecl-language-list__item "><a lang="en" hrefLang="en" rel="alternate"
                      href="/example#language_en"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">English</a></li>
                  <li class="ecl-language-list__item ecl-language-list__item--is-active"><a lang="fr" hrefLang="fr"
                      rel="alternate" href="/example#language_fr"
                      class="ecl-language-list__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                        class="ecl-link__label">français</span> <svg focusable="false" aria-hidden="true"
                        class="ecl-link__icon ecl-icon ecl-icon--xs">
                        <use xlink:href="/dist/media/icons.db866e2e.svg#ui--check"></use>
                      </svg></a></li>
                  <li class="ecl-language-list__item "><a lang="ga" hrefLang="ga" rel="alternate"
                      href="/example#language_ga"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a></li>
                  <li class="ecl-language-list__item "><a lang="hr" hrefLang="hr" rel="alternate"
                      href="/example#language_hr"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">hrvatski</a></li>
                  <li class="ecl-language-list__item "><a lang="it" hrefLang="it" rel="alternate"
                      href="/example#language_it"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">italiano</a></li>
                </ul>
              </div>
              <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
                <ul class="ecl-language-list__list">
                  <li class="ecl-language-list__item "><a lang="lv" hrefLang="lv" rel="alternate"
                      href="/example#language_lv"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">latviešu</a></li>
                  <li class="ecl-language-list__item "><a lang="lt" hrefLang="lt" rel="alternate"
                      href="/example#language_lt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">lietuvių</a></li>
                  <li class="ecl-language-list__item "><a lang="hu" hrefLang="hu" rel="alternate"
                      href="/example#language_hu"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">magyar</a></li>
                  <li class="ecl-language-list__item "><a lang="mt" hrefLang="mt" rel="alternate"
                      href="/example#language_mt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Malti</a></li>
                  <li class="ecl-language-list__item "><a lang="nl" hrefLang="nl" rel="alternate"
                      href="/example#language_nl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Nederlands</a></li>
                  <li class="ecl-language-list__item "><a lang="pl" hrefLang="pl" rel="alternate"
                      href="/example#language_pl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">polski</a></li>
                  <li class="ecl-language-list__item "><a lang="pt" hrefLang="pt" rel="alternate"
                      href="/example#language_pt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">português</a></li>
                  <li class="ecl-language-list__item "><a lang="ro" hrefLang="ro" rel="alternate"
                      href="/example#language_ro"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">română</a></li>
                  <li class="ecl-language-list__item "><a lang="sk" hrefLang="sk" rel="alternate"
                      href="/example#language_sk"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">slovenčina</a></li>
                  <li class="ecl-language-list__item "><a lang="sl" hrefLang="sl" rel="alternate"
                      href="/example#language_sl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">slovenščina</a></li>
                  <li class="ecl-language-list__item "><a lang="fi" hrefLang="fi" rel="alternate"
                      href="/example#language_fi"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">suomi</a></li>
                  <li class="ecl-language-list__item "><a lang="sv" hrefLang="sv" rel="alternate"
                      href="/example#language_sv"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">svenska</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <form class="ecl-site-header__search ecl-search-form" role="search">
      <div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-search-form__label ecl-form-label"
          for="search-form">Recherche</label><input type="search" id="search-form"
          class="ecl-search-form__text-input ecl-text-input" /></div><button aria-label="Recherche" type="submit"
        class="ecl-search-form__button ecl-button ecl-button--search"><span class="ecl-button__container"><span
            class="ecl-button__label" data-ecl-label="true">Recherche</span><svg focusable="false" aria-hidden="true"
            data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--xs">
            <use xlink:href="/dist/media/icons.db866e2e.svg#general--search"></use>
          </svg></span></button>
    </form>
  </div>
</header>