Core site header
<header class="ecl-site-header" data-ecl-auto-init="SiteHeader">
<div class="ecl-site-header__header">
<div class="ecl-site-header__container ecl-container">
<div class="ecl-site-header__top" data-ecl-site-header-top=""><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__logo-link" aria-label="European Commission"><img
alt="European Commission logo" title="European Commission"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/dist/media/icons.6770a2ae.svg" /></a>
<div class="ecl-site-header__action">
<div class="ecl-site-header__language"><a
class="ecl-button ecl-button--ghost ecl-site-header__language-selector" href="/example"
data-ecl-language-selector="" aria-label="Change language" aria-controls="language-list-overlay"><span
class="ecl-site-header__language-icon"><svg class="ecl-icon ecl-icon--s ecl-site-header__icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#language"></use>
</svg><span class="ecl-site-header__language-code">en</span></span>English</a>
<div class="ecl-site-header__language-container" id="language-list-overlay" hidden=""
data-ecl-language-list-overlay="" aria-labelledby="ecl-site-header__language-title" role="dialog">
<div class="ecl-site-header__language-header">
<div class="ecl-site-header__language-title" id="ecl-site-header__language-title">Select your language
</div><button class="ecl-button ecl-button--ghost ecl-site-header__language-close" type="submit"
data-ecl-language-list-close=""><span class="ecl-button__container"><span class="ecl-u-sr-only"
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-filled"></use>
</svg></span></button>
</div>
<div class="ecl-site-header__language-content">
<div class="ecl-site-header__language-category" data-ecl-language-list-eu="">
<div class="ecl-site-header__language-category-title">Official EU languages:</div>
<ul class="ecl-site-header__language-list">
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">bg</span><span
class="ecl-site-header__language-link-label">български</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">es</span><span
class="ecl-site-header__language-link-label">español</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">cs</span><span
class="ecl-site-header__language-link-label">čeština</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">da</span><span
class="ecl-site-header__language-link-label">dansk</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">de</span><span
class="ecl-site-header__language-link-label">Deutsch</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">et</span><span
class="ecl-site-header__language-link-label">eesti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">el</span><span
class="ecl-site-header__language-link-label">ελληνικά</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link ecl-site-header__language-link--active"><span
class="ecl-site-header__language-link-code">en</span><span
class="ecl-site-header__language-link-label">English</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fr</span><span
class="ecl-site-header__language-link-label">français</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ga</span><span
class="ecl-site-header__language-link-label">Gaeilge</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hr</span><span
class="ecl-site-header__language-link-label">hrvatski</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">it</span><span
class="ecl-site-header__language-link-label">italiano</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">lv</span><span
class="ecl-site-header__language-link-label">latviešu</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">lt</span><span
class="ecl-site-header__language-link-label">lietuvių</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hu</span><span
class="ecl-site-header__language-link-label">magyar</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">mt</span><span
class="ecl-site-header__language-link-label">Malti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">nl</span><span
class="ecl-site-header__language-link-label">Nederlands</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">pl</span><span
class="ecl-site-header__language-link-label">polski</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">pt</span><span
class="ecl-site-header__language-link-label">português</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ro</span><span
class="ecl-site-header__language-link-label">română</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sk</span><span
class="ecl-site-header__language-link-label">slovenčina</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sl</span><span
class="ecl-site-header__language-link-label">slovenščina</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fi</span><span
class="ecl-site-header__language-link-label">suomi</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sv</span><span
class="ecl-site-header__language-link-label">svenska</span></a></li>
</ul>
</div>
<div class="ecl-site-header__language-category" data-ecl-language-list-non-eu="">
<div class="ecl-site-header__language-category-title">Other languages:</div>
<ul class="ecl-site-header__language-list">
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">zh</span><span
class="ecl-site-header__language-link-label">中文</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">tr</span><span
class="ecl-site-header__language-link-label">Türk</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ru</span><span
class="ecl-site-header__language-link-label">pусский</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ca</span><span
class="ecl-site-header__language-link-label">Català</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ar</span><span
class="ecl-site-header__language-link-label">عَرَبِيّ</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hy</span><span
class="ecl-site-header__language-link-label">Հայերէն</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fj</span><span
class="ecl-site-header__language-link-label">Vakaviti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">id</span><span
class="ecl-site-header__language-link-label">Bahasa Indonesia</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ja</span><span
class="ecl-site-header__language-link-label">日本語</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">jv</span><span
class="ecl-site-header__language-link-label">basa Jawa</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ko</span><span
class="ecl-site-header__language-link-label">한국어</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">mn</span><span
class="ecl-site-header__language-link-label">монгол</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fa</span><span
class="ecl-site-header__language-link-label">فارسى</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ru</span><span
class="ecl-site-header__language-link-label">Русский язык</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">so</span><span
class="ecl-site-header__language-link-label">af Soomaali</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-site-header__search-container"><a
class="ecl-button ecl-button--ghost ecl-site-header__search-toggle" href="/example"
data-ecl-search-toggle="true" aria-controls="search-form-id" aria-expanded="false"><svg
class="ecl-icon ecl-icon--s ecl-site-header__icon" 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__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__message">
<div class="ecl-container">
<div class="ecl-message ecl-message--info" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#information"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</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#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Information message</div>
<div class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan
semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div>
</div>
</div>
</div>
</div>
</header>Try it yourself on the playground
PlaygroundStandardised site header
<header class="ecl-site-header" data-ecl-auto-init="SiteHeader">
<div class="ecl-site-header__header">
<div class="ecl-site-header__container ecl-container">
<div class="ecl-site-header__top" data-ecl-site-header-top=""><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__logo-link" aria-label="European Commission"><img
alt="European Commission logo" title="European Commission"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/dist/media/icons.6770a2ae.svg" /></a>
<div class="ecl-site-header__action">
<div class="ecl-site-header__language"><a
class="ecl-button ecl-button--ghost ecl-site-header__language-selector" href="/example"
data-ecl-language-selector="" aria-label="Change language" aria-controls="language-list-overlay"><span
class="ecl-site-header__language-icon"><svg class="ecl-icon ecl-icon--s ecl-site-header__icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#language"></use>
</svg><span class="ecl-site-header__language-code">en</span></span>English</a>
<div class="ecl-site-header__language-container" id="language-list-overlay" hidden=""
data-ecl-language-list-overlay="" aria-labelledby="ecl-site-header__language-title" role="dialog">
<div class="ecl-site-header__language-header">
<div class="ecl-site-header__language-title" id="ecl-site-header__language-title">Select your language
</div><button class="ecl-button ecl-button--ghost ecl-site-header__language-close" type="submit"
data-ecl-language-list-close=""><span class="ecl-button__container"><span class="ecl-u-sr-only"
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-filled"></use>
</svg></span></button>
</div>
<div class="ecl-site-header__language-content">
<div class="ecl-site-header__language-category" data-ecl-language-list-eu="">
<div class="ecl-site-header__language-category-title">Official EU languages:</div>
<ul class="ecl-site-header__language-list">
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">bg</span><span
class="ecl-site-header__language-link-label">български</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">es</span><span
class="ecl-site-header__language-link-label">español</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">cs</span><span
class="ecl-site-header__language-link-label">čeština</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">da</span><span
class="ecl-site-header__language-link-label">dansk</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">de</span><span
class="ecl-site-header__language-link-label">Deutsch</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">et</span><span
class="ecl-site-header__language-link-label">eesti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">el</span><span
class="ecl-site-header__language-link-label">ελληνικά</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link ecl-site-header__language-link--active"><span
class="ecl-site-header__language-link-code">en</span><span
class="ecl-site-header__language-link-label">English</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fr</span><span
class="ecl-site-header__language-link-label">français</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ga</span><span
class="ecl-site-header__language-link-label">Gaeilge</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hr</span><span
class="ecl-site-header__language-link-label">hrvatski</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">it</span><span
class="ecl-site-header__language-link-label">italiano</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">lv</span><span
class="ecl-site-header__language-link-label">latviešu</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">lt</span><span
class="ecl-site-header__language-link-label">lietuvių</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hu</span><span
class="ecl-site-header__language-link-label">magyar</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">mt</span><span
class="ecl-site-header__language-link-label">Malti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">nl</span><span
class="ecl-site-header__language-link-label">Nederlands</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">pl</span><span
class="ecl-site-header__language-link-label">polski</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">pt</span><span
class="ecl-site-header__language-link-label">português</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ro</span><span
class="ecl-site-header__language-link-label">română</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sk</span><span
class="ecl-site-header__language-link-label">slovenčina</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sl</span><span
class="ecl-site-header__language-link-label">slovenščina</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fi</span><span
class="ecl-site-header__language-link-label">suomi</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sv</span><span
class="ecl-site-header__language-link-label">svenska</span></a></li>
</ul>
</div>
<div class="ecl-site-header__language-category" data-ecl-language-list-non-eu="">
<div class="ecl-site-header__language-category-title">Other languages:</div>
<ul class="ecl-site-header__language-list">
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">zh</span><span
class="ecl-site-header__language-link-label">中文</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">tr</span><span
class="ecl-site-header__language-link-label">Türk</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ru</span><span
class="ecl-site-header__language-link-label">pусский</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ca</span><span
class="ecl-site-header__language-link-label">Català</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ar</span><span
class="ecl-site-header__language-link-label">عَرَبِيّ</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hy</span><span
class="ecl-site-header__language-link-label">Հայերէն</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fj</span><span
class="ecl-site-header__language-link-label">Vakaviti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">id</span><span
class="ecl-site-header__language-link-label">Bahasa Indonesia</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ja</span><span
class="ecl-site-header__language-link-label">日本語</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">jv</span><span
class="ecl-site-header__language-link-label">basa Jawa</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ko</span><span
class="ecl-site-header__language-link-label">한국어</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">mn</span><span
class="ecl-site-header__language-link-label">монгол</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fa</span><span
class="ecl-site-header__language-link-label">فارسى</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ru</span><span
class="ecl-site-header__language-link-label">Русский язык</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">so</span><span
class="ecl-site-header__language-link-label">af Soomaali</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-site-header__search-container"><a
class="ecl-button ecl-button--ghost ecl-site-header__search-toggle" href="/example"
data-ecl-search-toggle="true" aria-controls="search-form-id" aria-expanded="false"><svg
class="ecl-icon ecl-icon--s ecl-site-header__icon" 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__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__message">
<div class="ecl-container">
<div class="ecl-message ecl-message--info" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#information"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</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#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Information message</div>
<div class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan
semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div>
</div>
</div>
</div>
</div>
<div class="ecl-site-header__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__banner">
<div class="ecl-container">
<div class="ecl-site-header__site-name">Site name</div><a href=""
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-site-header__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>
</header>Try it yourself on the playground
PlaygroundHarmonised site header
<header class="ecl-site-header" data-ecl-auto-init="SiteHeader">
<div class="ecl-site-header__header">
<div class="ecl-site-header__container ecl-container">
<div class="ecl-site-header__top" data-ecl-site-header-top=""><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__logo-link" aria-label="European Commission"><img
alt="European Commission logo" title="European Commission"
class="ecl-site-header__logo-image ecl-site-header__logo-image-desktop"
src="/dist/media/icons.6770a2ae.svg" /></a>
<div class="ecl-site-header__action">
<div class="ecl-site-header__login-container"><a
class="ecl-button ecl-button--ghost ecl-site-header__login-toggle" href="/example"><svg
class="ecl-icon ecl-icon--s ecl-site-header__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#log-in"></use>
</svg>Log in</a></div>
<div class="ecl-site-header__language"><a
class="ecl-button ecl-button--ghost ecl-site-header__language-selector" href="/example"
data-ecl-language-selector="" aria-label="Change language" aria-controls="language-list-overlay"><span
class="ecl-site-header__language-icon"><svg class="ecl-icon ecl-icon--s ecl-site-header__icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#language"></use>
</svg><span class="ecl-site-header__language-code">en</span></span>English</a>
<div class="ecl-site-header__language-container" id="language-list-overlay" hidden=""
data-ecl-language-list-overlay="" aria-labelledby="ecl-site-header__language-title" role="dialog">
<div class="ecl-site-header__language-header">
<div class="ecl-site-header__language-title" id="ecl-site-header__language-title">Select your language
</div><button class="ecl-button ecl-button--ghost ecl-site-header__language-close" type="submit"
data-ecl-language-list-close=""><span class="ecl-button__container"><span class="ecl-u-sr-only"
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-filled"></use>
</svg></span></button>
</div>
<div class="ecl-site-header__language-content">
<div class="ecl-site-header__language-category" data-ecl-language-list-eu="">
<div class="ecl-site-header__language-category-title">Official EU languages:</div>
<ul class="ecl-site-header__language-list">
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">bg</span><span
class="ecl-site-header__language-link-label">български</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">es</span><span
class="ecl-site-header__language-link-label">español</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">cs</span><span
class="ecl-site-header__language-link-label">čeština</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">da</span><span
class="ecl-site-header__language-link-label">dansk</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">de</span><span
class="ecl-site-header__language-link-label">Deutsch</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">et</span><span
class="ecl-site-header__language-link-label">eesti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">el</span><span
class="ecl-site-header__language-link-label">ελληνικά</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link ecl-site-header__language-link--active"><span
class="ecl-site-header__language-link-code">en</span><span
class="ecl-site-header__language-link-label">English</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fr</span><span
class="ecl-site-header__language-link-label">français</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ga</span><span
class="ecl-site-header__language-link-label">Gaeilge</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hr</span><span
class="ecl-site-header__language-link-label">hrvatski</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">it</span><span
class="ecl-site-header__language-link-label">italiano</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">lv</span><span
class="ecl-site-header__language-link-label">latviešu</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">lt</span><span
class="ecl-site-header__language-link-label">lietuvių</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hu</span><span
class="ecl-site-header__language-link-label">magyar</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">mt</span><span
class="ecl-site-header__language-link-label">Malti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">nl</span><span
class="ecl-site-header__language-link-label">Nederlands</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">pl</span><span
class="ecl-site-header__language-link-label">polski</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">pt</span><span
class="ecl-site-header__language-link-label">português</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ro</span><span
class="ecl-site-header__language-link-label">română</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sk</span><span
class="ecl-site-header__language-link-label">slovenčina</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sl</span><span
class="ecl-site-header__language-link-label">slovenščina</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fi</span><span
class="ecl-site-header__language-link-label">suomi</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">sv</span><span
class="ecl-site-header__language-link-label">svenska</span></a></li>
</ul>
</div>
<div class="ecl-site-header__language-category" data-ecl-language-list-non-eu="">
<div class="ecl-site-header__language-category-title">Other languages:</div>
<ul class="ecl-site-header__language-list">
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">zh</span><span
class="ecl-site-header__language-link-label">中文</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">tr</span><span
class="ecl-site-header__language-link-label">Türk</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ru</span><span
class="ecl-site-header__language-link-label">pусский</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ca</span><span
class="ecl-site-header__language-link-label">Català</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ar</span><span
class="ecl-site-header__language-link-label">عَرَبِيّ</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">hy</span><span
class="ecl-site-header__language-link-label">Հայերէն</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fj</span><span
class="ecl-site-header__language-link-label">Vakaviti</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">id</span><span
class="ecl-site-header__language-link-label">Bahasa Indonesia</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ja</span><span
class="ecl-site-header__language-link-label">日本語</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">jv</span><span
class="ecl-site-header__language-link-label">basa Jawa</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ko</span><span
class="ecl-site-header__language-link-label">한국어</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">mn</span><span
class="ecl-site-header__language-link-label">монгол</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">fa</span><span
class="ecl-site-header__language-link-label">فارسى</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">ru</span><span
class="ecl-site-header__language-link-label">Русский язык</span></a></li>
<li class="ecl-site-header__language-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-header__language-link"><span
class="ecl-site-header__language-link-code">so</span><span
class="ecl-site-header__language-link-label">af Soomaali</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-site-header__search-container"><a
class="ecl-button ecl-button--ghost ecl-site-header__search-toggle" href="/example"
data-ecl-search-toggle="true" aria-controls="search-form-id" aria-expanded="false"><svg
class="ecl-icon ecl-icon--s ecl-site-header__icon" 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__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__message">
<div class="ecl-container">
<div class="ecl-message ecl-message--info" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#information"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</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#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Information message</div>
<div class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan
semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div>
</div>
</div>
</div>
</div>
<div class="ecl-site-header__banner">
<div class="ecl-container">
<div class="ecl-site-header__site-name">Site name</div><a href=""
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-site-header__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>
</header>Try it yourself on the playground
Playground