Site header

<header class="ecl-site-header-standardised" data-ecl-auto-init="SiteHeaderStandardised">
  <div class="ecl-site-header-standardised__header">
    <div class="ecl-site-header-standardised__container ecl-container">
      <div class="ecl-site-header-standardised__top"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-site-header-standardised__logo-link"
          aria-label="European Commission"><img alt="European Commission logo" title="European Commission"
            class="ecl-site-header-standardised__logo-image ecl-site-header-standardised__logo-image-desktop"
            src="/dist/media/icons.6770a2ae.svg" /></a>
        <div class="ecl-site-header-standardised__action">
          <div class="ecl-site-header-standardised__login-container"><a
              class="ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle" href="/example"><svg
                class="ecl-icon ecl-icon--s ecl-site-header-standardised__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#log-in"></use>
              </svg>Log in</a></div><a
            class="ecl-button ecl-button--ghost ecl-site-header-standardised__language-selector" href="/example"
            data-ecl-language-selector="" aria-label="Change language" aria-controls="language-list-overlay"><span
              class="ecl-site-header-standardised__language-icon"><svg
                class="ecl-icon ecl-icon--s ecl-site-header-standardised__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#language"></use>
              </svg><span class="ecl-site-header-standardised__language-code">en</span></span>English</a>
          <div class="ecl-site-header-standardised__search-container"><a
              class="ecl-button ecl-button--ghost ecl-site-header-standardised__search-toggle" href="/example"
              data-ecl-search-toggle="true" aria-controls="search-form-id" aria-expanded="false"><svg
                class="ecl-icon ecl-icon--s" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#search"></use>
              </svg>Search</a>
            <form class="ecl-search-form ecl-site-header-standardised__search" role="search" data-ecl-search-form=""
              id="search-form-id">
              <div class="ecl-form-group"><label for="search-input-id"
                  class="ecl-form-label ecl-search-form__label">Search</label><input type="search" id="search-input-id"
                  class="ecl-text-input ecl-text-input--m ecl-search-form__text-input" placeholder="Placeholder text" />
              </div><button class="ecl-button ecl-button--search ecl-search-form__button" type="submit"
                aria-label="Search"><span class="ecl-button__container"><span class="ecl-button__label"
                    data-ecl-label="true">Search</span><svg
                    class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after" focusable="false"
                    aria-hidden="true" data-ecl-icon="">
                    <use xlink:href="/dist/media/icons.6770a2ae.svg#search"></use>
                  </svg></span></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ecl-site-header-standardised__banner-top">
    <div class="ecl-container"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited">Class
        name</a></div>
  </div>
  <div class="ecl-site-header-standardised__banner">
    <div class="ecl-container">
      <div class="ecl-site-header-standardised__site-name">Site name</div><a href=""
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-standardised__cta"><span
          class="ecl-link__label">CTA link</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
        </svg></a>
    </div>
  </div>
  <div class="ecl-language-list ecl-language-list--overlay" data-ecl-language-list-overlay=""
    aria-labelledby="ecl-language-list__title" role="dialog" hidden="" id="language-list-overlay">
    <div class="ecl-language-list__container ecl-container">
      <div class="ecl-language-list--overlay__header">
        <div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 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="/dist/media/icons.6770a2ae.svg#close"></use>
              </svg></span></button></div>
        <div class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
          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="/dist/media/icons.6770a2ae.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 ecl-col-m-11 ecl-offset-m-1">EU
          official languages</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
          <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="/dist/media/icons.6770a2ae.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 ecl-col-m-5">
          <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 ecl-col-m-11 ecl-offset-m-1">
          Non-EU languages</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
          <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 ecl-col-m-5">
          <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>
</header>

<header class="ecl-site-header-standardised" data-ecl-auto-init="SiteHeaderStandardised">
  <div class="ecl-site-header-standardised__header">
    <div class="ecl-site-header-standardised__container ecl-container">
      <div class="ecl-site-header-standardised__top"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-site-header-standardised__logo-link"
          aria-label="European Commission"><img alt="European Commission logo" title="European Commission"
            class="ecl-site-header-standardised__logo-image ecl-site-header-standardised__logo-image-desktop"
            src="/dist/media/icons.6770a2ae.svg" /></a>
        <div class="ecl-site-header-standardised__action">
          <div class="ecl-site-header-standardised__login-container"><a
              class="ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle" href="/example"
              aria-controls="login-box-id" data-ecl-login-toggle="" aria-expanded="false"><svg
                class="ecl-icon ecl-icon--s ecl-site-header-standardised__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#logged-in"></use>
              </svg>Logged in<svg class="ecl-icon ecl-icon--xs ecl-site-header-standardised__login-arrow"
                focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
              </svg></a>
            <div id="login-box-id" class="ecl-site-header-standardised__login-box" data-ecl-login-box="">
              <p class="ecl-site-header-standardised__login-description">Logged in as &quot;last name&quot; &quot;first
                name&quot;</p>
              <hr class="ecl-site-header-standardised__login-separator" /><a href="/example"
                class="ecl-link ecl-link--standalone">Log out</a>
            </div>
          </div><a class="ecl-button ecl-button--ghost ecl-site-header-standardised__language-selector" href="/example"
            data-ecl-language-selector="" aria-label="Change language" aria-controls="language-list-overlay"><span
              class="ecl-site-header-standardised__language-icon"><svg
                class="ecl-icon ecl-icon--s ecl-site-header-standardised__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#language"></use>
              </svg><span class="ecl-site-header-standardised__language-code">en</span></span>English</a>
          <div class="ecl-site-header-standardised__search-container"><a
              class="ecl-button ecl-button--ghost ecl-site-header-standardised__search-toggle" href="/example"
              data-ecl-search-toggle="true" aria-controls="search-form-id" aria-expanded="false"><svg
                class="ecl-icon ecl-icon--s" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#search"></use>
              </svg>Search</a>
            <form class="ecl-search-form ecl-site-header-standardised__search" role="search" data-ecl-search-form=""
              id="search-form-id">
              <div class="ecl-form-group"><label for="search-input-id"
                  class="ecl-form-label ecl-search-form__label">Search</label><input type="search" id="search-input-id"
                  class="ecl-text-input ecl-text-input--m ecl-search-form__text-input" placeholder="Placeholder text" />
              </div><button class="ecl-button ecl-button--search ecl-search-form__button" type="submit"
                aria-label="Search"><span class="ecl-button__container"><span class="ecl-button__label"
                    data-ecl-label="true">Search</span><svg
                    class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after" focusable="false"
                    aria-hidden="true" data-ecl-icon="">
                    <use xlink:href="/dist/media/icons.6770a2ae.svg#search"></use>
                  </svg></span></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ecl-site-header-standardised__banner-top">
    <div class="ecl-container"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited">Class
        name</a></div>
  </div>
  <div class="ecl-site-header-standardised__banner">
    <div class="ecl-container">
      <div class="ecl-site-header-standardised__site-name">Site name</div><a href=""
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-standardised__cta"><span
          class="ecl-link__label">CTA link</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
        </svg></a>
    </div>
  </div>
  <div class="ecl-language-list ecl-language-list--overlay" data-ecl-language-list-overlay=""
    aria-labelledby="ecl-language-list__title" role="dialog" hidden="" id="language-list-overlay">
    <div class="ecl-language-list__container ecl-container">
      <div class="ecl-language-list--overlay__header">
        <div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 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="/dist/media/icons.6770a2ae.svg#close"></use>
              </svg></span></button></div>
        <div class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
          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="/dist/media/icons.6770a2ae.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 ecl-col-m-11 ecl-offset-m-1">EU
          official languages</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
          <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="/dist/media/icons.6770a2ae.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 ecl-col-m-5">
          <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 ecl-col-m-11 ecl-offset-m-1">
          Non-EU languages</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
          <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 ecl-col-m-5">
          <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>
</header>

<header class="ecl-site-header-standardised" data-ecl-auto-init="SiteHeaderStandardised">
  <div class="ecl-site-header-standardised__header">
    <div class="ecl-site-header-standardised__container ecl-container">
      <div class="ecl-site-header-standardised__top"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-site-header-standardised__logo-link"
          aria-label="Commmission Européenne"><img alt="Logo Commmission Européenne" title="Commmission Européenne"
            class="ecl-site-header-standardised__logo-image ecl-site-header-standardised__logo-image-desktop"
            src="/dist/media/icons.6770a2ae.svg" /></a>
        <div class="ecl-site-header-standardised__action">
          <div class="ecl-site-header-standardised__login-container"><a
              class="ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle" href="/example"><svg
                class="ecl-icon ecl-icon--s ecl-site-header-standardised__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#log-in"></use>
              </svg>Connexion</a></div><a
            class="ecl-button ecl-button--ghost ecl-site-header-standardised__language-selector" href="/example"
            data-ecl-language-selector="" aria-label="Changer de langue" aria-controls="language-list-overlay"><span
              class="ecl-site-header-standardised__language-icon"><svg
                class="ecl-icon ecl-icon--s ecl-site-header-standardised__icon" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#language"></use>
              </svg><span class="ecl-site-header-standardised__language-code">fr</span></span>Français</a>
          <div class="ecl-site-header-standardised__search-container"><a
              class="ecl-button ecl-button--ghost ecl-site-header-standardised__search-toggle" href="/example"
              data-ecl-search-toggle="true" aria-controls="search-form-id" aria-expanded="false"><svg
                class="ecl-icon ecl-icon--s" focusable="false" aria-hidden="true">
                <use xlink:href="/dist/media/icons.6770a2ae.svg#search"></use>
              </svg>Recherche</a>
            <form class="ecl-search-form ecl-site-header-standardised__search" role="search" data-ecl-search-form=""
              id="search-form-id">
              <div class="ecl-form-group"><label for="search-input-id"
                  class="ecl-form-label ecl-search-form__label">Recherche</label><input type="search"
                  id="search-input-id" class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                  placeholder="Placeholder text" /></div><button
                class="ecl-button ecl-button--search ecl-search-form__button" type="submit" aria-label="Search"><span
                  class="ecl-button__container"><span class="ecl-button__label"
                    data-ecl-label="true">Recherche</span><svg
                    class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after" focusable="false"
                    aria-hidden="true" data-ecl-icon="">
                    <use xlink:href="/dist/media/icons.6770a2ae.svg#search"></use>
                  </svg></span></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ecl-site-header-standardised__banner-top">
    <div class="ecl-container"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited">Classe</a>
    </div>
  </div>
  <div class="ecl-site-header-standardised__banner">
    <div class="ecl-container">
      <div class="ecl-site-header-standardised__site-name">Nom du site</div><a href=""
        class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-standardised__cta"><span
          class="ecl-link__label">Lien CTA</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
        </svg></a>
    </div>
  </div>
  <div class="ecl-language-list ecl-language-list--overlay" data-ecl-language-list-overlay=""
    aria-labelledby="ecl-language-list__title" role="dialog" hidden="" id="language-list-overlay">
    <div class="ecl-language-list__container ecl-container">
      <div class="ecl-language-list--overlay__header">
        <div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 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">Fermer</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="/dist/media/icons.6770a2ae.svg#close"></use>
              </svg></span></button></div>
        <div class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
          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="/dist/media/icons.6770a2ae.svg#generic-lang"></use>
          </svg>Choisissez votre langue</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 ecl-col-m-11 ecl-offset-m-1">
          Langues officielles de l&#x27;UE</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
          <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"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-language-list__link" lang="en" hrefLang="en"
                rel="alternate">English</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="fr" hrefLang="fr" rel="alternate"><span class="ecl-link__label">français</span><svg
                  class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.6770a2ae.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="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 ecl-col-m-5">
          <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 ecl-col-m-11 ecl-offset-m-1">
          Langues hors de l&#x27;UE</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
          <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 ecl-col-m-5">
          <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>
</header>