Core site header
<header class="ecl-site-header ecl-site-header-with-logo-l" data-ecl-auto-init="SiteHeader"> <div class="ecl-site-header__inner"> <div class="ecl-site-header__background"> <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"> <picture class="ecl-picture ecl-site-header__picture"> <source srcset="/dist/media/icons.e3d8f25c.svg" media="(min-width: 996px)"><img class="ecl-site-header__logo-image ecl-site-header__logo-image--l" src="/dist/media/icons.e3d8f25c.svg" alt="European Commission" /> </picture> </a> <div class="ecl-site-header__action"> <div class="ecl-site-header__language"><a class="ecl-button ecl-button--tertiary ecl-site-header__language-selector" href="/example" data-ecl-language-selector role="button" aria-label="Change language, current language is English - EN" 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="false" role="img"> <title>EN</title> <use xlink:href="/dist/media/icons.e3d8f25c.svg#global"></use> </svg></span>EN</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--tertiary ecl-site-header__language-close ecl-button--icon-only" 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--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#close"></use> </svg></span></button> </div> <div class="ecl-site-header__language-content" data-ecl-language-list-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-link--no-visited ecl-site-header__language-link" hreflang="bg"><span class="ecl-site-header__language-link-code">bg</span><span class="ecl-site-header__language-link-label" lang="bg">български</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="es"><span class="ecl-site-header__language-link-code">es</span><span class="ecl-site-header__language-link-label" lang="es">español</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="cs"><span class="ecl-site-header__language-link-code">cs</span><span class="ecl-site-header__language-link-label" lang="cs">čeština</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="da"><span class="ecl-site-header__language-link-code">da</span><span class="ecl-site-header__language-link-label" lang="da">dansk</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="de"><span class="ecl-site-header__language-link-code">de</span><span class="ecl-site-header__language-link-label" lang="de">Deutsch</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="et"><span class="ecl-site-header__language-link-code">et</span><span class="ecl-site-header__language-link-label" lang="et">eesti</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="el"><span class="ecl-site-header__language-link-code">el</span><span class="ecl-site-header__language-link-label" lang="el">ελληνικά</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link ecl-site-header__language-link--active" hreflang="en"><span class="ecl-site-header__language-link-code">en</span><span class="ecl-site-header__language-link-label" lang="en">English</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="fr"><span class="ecl-site-header__language-link-code">fr</span><span class="ecl-site-header__language-link-label" lang="fr">français</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="ga"><span class="ecl-site-header__language-link-code">ga</span><span class="ecl-site-header__language-link-label" lang="ga">Gaeilge</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="hr"><span class="ecl-site-header__language-link-code">hr</span><span class="ecl-site-header__language-link-label" lang="hr">hrvatski</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="it"><span class="ecl-site-header__language-link-code">it</span><span class="ecl-site-header__language-link-label" lang="it">italiano</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="lv"><span class="ecl-site-header__language-link-code">lv</span><span class="ecl-site-header__language-link-label" lang="lv">latviešu</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="lt"><span class="ecl-site-header__language-link-code">lt</span><span class="ecl-site-header__language-link-label" lang="lt">lietuvių</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="hu"><span class="ecl-site-header__language-link-code">hu</span><span class="ecl-site-header__language-link-label" lang="hu">magyar</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="mt"><span class="ecl-site-header__language-link-code">mt</span><span class="ecl-site-header__language-link-label" lang="mt">Malti</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="nl"><span class="ecl-site-header__language-link-code">nl</span><span class="ecl-site-header__language-link-label" lang="nl">Nederlands</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="pl"><span class="ecl-site-header__language-link-code">pl</span><span class="ecl-site-header__language-link-label" lang="pl">polski</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="pt"><span class="ecl-site-header__language-link-code">pt</span><span class="ecl-site-header__language-link-label" lang="pt">português</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="ro"><span class="ecl-site-header__language-link-code">ro</span><span class="ecl-site-header__language-link-label" lang="ro">română</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sk"><span class="ecl-site-header__language-link-code">sk</span><span class="ecl-site-header__language-link-label" lang="sk">slovenčina</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sl"><span class="ecl-site-header__language-link-code">sl</span><span class="ecl-site-header__language-link-label" lang="sl">slovenščina</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="fi"><span class="ecl-site-header__language-link-code">fi</span><span class="ecl-site-header__language-link-label" lang="fi">suomi</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sv"><span class="ecl-site-header__language-link-code">sv</span><span class="ecl-site-header__language-link-label" lang="sv">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-link--no-visited ecl-site-header__language-link" lang="ar" hreflang="ar"><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-link--no-visited ecl-site-header__language-link" lang="ca" hreflang="ca"><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-link--no-visited ecl-site-header__language-link" lang="is" hreflang="is"><span class="ecl-site-header__language-link-code">is</span><span class="ecl-site-header__language-link-label">Íslenska</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="lb" hreflang="lb"><span class="ecl-site-header__language-link-code">lb</span><span class="ecl-site-header__language-link-label">Lëtzebuergesch</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="ja" hreflang="ja"><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-link--no-visited ecl-site-header__language-link" lang="nb" hreflang="nb"><span class="ecl-site-header__language-link-code">nb</span><span class="ecl-site-header__language-link-label">Norsk bokmål</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="ru" hreflang="ru"><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-link--no-visited ecl-site-header__language-link" lang="tr" hreflang="tr"><span class="ecl-site-header__language-link-code">tr</span><span class="ecl-site-header__language-link-label">Türkçe</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="uk" hreflang="uk"><span class="ecl-site-header__language-link-code">uk</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-link--no-visited ecl-site-header__language-link" lang="zh" hreflang="zh"><span class="ecl-site-header__language-link-code">zh</span><span class="ecl-site-header__language-link-label">中文</span></a></li> </ul> </div> </div> </div> </div> <div class="ecl-site-header__search-container" role="search"><a class="ecl-button ecl-button--tertiary 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="false" role="img"> <title>Search</title> <use xlink:href="/dist/media/icons.e3d8f25c.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" id="search-input-id-label" class="ecl-form-label ecl-search-form__label">Search</label><input id="search-input-id" class="ecl-text-input ecl-text-input--m ecl-search-form__text-input" type="search" placeholder="Placeholder text" /></div><button class="ecl-button ecl-button--ghost ecl-search-form__button" type="submit"><span class="ecl-button__container"><svg class="ecl-icon ecl-icon--xs ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#search"></use> </svg><span class="ecl-button__label" data-ecl-label="true">Search</span></span></button> </form> </div> </div> </div> </div> </div> </div> <div class="ecl-site-header__notification"> <div class="ecl-container"> <div class="ecl-notification ecl-notification--info" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="false"> <use xlink:href="/dist/media/icons.e3d8f25c.svg#information"></use> </svg> <div class="ecl-notification__content"> <div class="ecl-notification__title">Information notification</div> <div class="ecl-notification__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> </header>
Try it yourself on the playground
PlaygroundStandardised site header
<header class="ecl-site-header ecl-site-header-with-logo-l" data-ecl-auto-init="SiteHeader"> <div class="ecl-site-header__inner"> <div class="ecl-site-header__background"> <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"> <picture class="ecl-picture ecl-site-header__picture"> <source srcset="/dist/media/icons.e3d8f25c.svg" media="(min-width: 996px)"><img class="ecl-site-header__logo-image ecl-site-header__logo-image--l" src="/dist/media/icons.e3d8f25c.svg" alt="European Commission" /> </picture> </a> <div class="ecl-site-header__action"> <div class="ecl-site-header__language"><a class="ecl-button ecl-button--tertiary ecl-site-header__language-selector" href="/example" data-ecl-language-selector role="button" aria-label="Change language, current language is English - EN" 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="false" role="img"> <title>EN</title> <use xlink:href="/dist/media/icons.e3d8f25c.svg#global"></use> </svg></span>EN</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--tertiary ecl-site-header__language-close ecl-button--icon-only" 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--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#close"></use> </svg></span></button> </div> <div class="ecl-site-header__language-content" data-ecl-language-list-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-link--no-visited ecl-site-header__language-link" hreflang="bg"><span class="ecl-site-header__language-link-code">bg</span><span class="ecl-site-header__language-link-label" lang="bg">български</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="es"><span class="ecl-site-header__language-link-code">es</span><span class="ecl-site-header__language-link-label" lang="es">español</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="cs"><span class="ecl-site-header__language-link-code">cs</span><span class="ecl-site-header__language-link-label" lang="cs">čeština</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="da"><span class="ecl-site-header__language-link-code">da</span><span class="ecl-site-header__language-link-label" lang="da">dansk</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="de"><span class="ecl-site-header__language-link-code">de</span><span class="ecl-site-header__language-link-label" lang="de">Deutsch</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="et"><span class="ecl-site-header__language-link-code">et</span><span class="ecl-site-header__language-link-label" lang="et">eesti</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="el"><span class="ecl-site-header__language-link-code">el</span><span class="ecl-site-header__language-link-label" lang="el">ελληνικά</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link ecl-site-header__language-link--active" hreflang="en"><span class="ecl-site-header__language-link-code">en</span><span class="ecl-site-header__language-link-label" lang="en">English</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="fr"><span class="ecl-site-header__language-link-code">fr</span><span class="ecl-site-header__language-link-label" lang="fr">français</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="ga"><span class="ecl-site-header__language-link-code">ga</span><span class="ecl-site-header__language-link-label" lang="ga">Gaeilge</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="hr"><span class="ecl-site-header__language-link-code">hr</span><span class="ecl-site-header__language-link-label" lang="hr">hrvatski</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="it"><span class="ecl-site-header__language-link-code">it</span><span class="ecl-site-header__language-link-label" lang="it">italiano</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="lv"><span class="ecl-site-header__language-link-code">lv</span><span class="ecl-site-header__language-link-label" lang="lv">latviešu</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="lt"><span class="ecl-site-header__language-link-code">lt</span><span class="ecl-site-header__language-link-label" lang="lt">lietuvių</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="hu"><span class="ecl-site-header__language-link-code">hu</span><span class="ecl-site-header__language-link-label" lang="hu">magyar</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="mt"><span class="ecl-site-header__language-link-code">mt</span><span class="ecl-site-header__language-link-label" lang="mt">Malti</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="nl"><span class="ecl-site-header__language-link-code">nl</span><span class="ecl-site-header__language-link-label" lang="nl">Nederlands</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="pl"><span class="ecl-site-header__language-link-code">pl</span><span class="ecl-site-header__language-link-label" lang="pl">polski</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="pt"><span class="ecl-site-header__language-link-code">pt</span><span class="ecl-site-header__language-link-label" lang="pt">português</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="ro"><span class="ecl-site-header__language-link-code">ro</span><span class="ecl-site-header__language-link-label" lang="ro">română</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sk"><span class="ecl-site-header__language-link-code">sk</span><span class="ecl-site-header__language-link-label" lang="sk">slovenčina</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sl"><span class="ecl-site-header__language-link-code">sl</span><span class="ecl-site-header__language-link-label" lang="sl">slovenščina</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="fi"><span class="ecl-site-header__language-link-code">fi</span><span class="ecl-site-header__language-link-label" lang="fi">suomi</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sv"><span class="ecl-site-header__language-link-code">sv</span><span class="ecl-site-header__language-link-label" lang="sv">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-link--no-visited ecl-site-header__language-link" lang="ar" hreflang="ar"><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-link--no-visited ecl-site-header__language-link" lang="ca" hreflang="ca"><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-link--no-visited ecl-site-header__language-link" lang="is" hreflang="is"><span class="ecl-site-header__language-link-code">is</span><span class="ecl-site-header__language-link-label">Íslenska</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="lb" hreflang="lb"><span class="ecl-site-header__language-link-code">lb</span><span class="ecl-site-header__language-link-label">Lëtzebuergesch</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="ja" hreflang="ja"><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-link--no-visited ecl-site-header__language-link" lang="nb" hreflang="nb"><span class="ecl-site-header__language-link-code">nb</span><span class="ecl-site-header__language-link-label">Norsk bokmål</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="ru" hreflang="ru"><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-link--no-visited ecl-site-header__language-link" lang="tr" hreflang="tr"><span class="ecl-site-header__language-link-code">tr</span><span class="ecl-site-header__language-link-label">Türkçe</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="uk" hreflang="uk"><span class="ecl-site-header__language-link-code">uk</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-link--no-visited ecl-site-header__language-link" lang="zh" hreflang="zh"><span class="ecl-site-header__language-link-code">zh</span><span class="ecl-site-header__language-link-label">中文</span></a></li> </ul> </div> </div> </div> </div> <div class="ecl-site-header__search-container" role="search"><a class="ecl-button ecl-button--tertiary 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="false" role="img"> <title>Search</title> <use xlink:href="/dist/media/icons.e3d8f25c.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" id="search-input-id-label" class="ecl-form-label ecl-search-form__label">Search</label><input id="search-input-id" class="ecl-text-input ecl-text-input--m ecl-search-form__text-input" type="search" placeholder="Placeholder text" /></div><button class="ecl-button ecl-button--ghost ecl-search-form__button" type="submit"><span class="ecl-button__container"><svg class="ecl-icon ecl-icon--xs ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#search"></use> </svg><span class="ecl-button__label" data-ecl-label="true">Search</span></span></button> </form> </div> </div> </div> </div> </div> </div> <div class="ecl-site-header__notification"> <div class="ecl-container"> <div class="ecl-notification ecl-notification--info" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="false"> <use xlink:href="/dist/media/icons.e3d8f25c.svg#information"></use> </svg> <div class="ecl-notification__content"> <div class="ecl-notification__title">Information notification</div> <div class="ecl-notification__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">News, policies, information and services</div><a href="" class="ecl-link ecl-link--cta ecl-link--icon 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.e3d8f25c.svg#corner-arrow"></use> </svg></a> </div> </div> </div> </header>
Try it yourself on the playground
PlaygroundHarmonised site header
<header class="ecl-site-header ecl-site-header-with-logo-l" data-ecl-auto-init="SiteHeader"> <div class="ecl-site-header__inner"> <div class="ecl-site-header__background"> <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"> <picture class="ecl-picture ecl-site-header__picture"> <source srcset="/dist/media/icons.e3d8f25c.svg" media="(min-width: 996px)"><img class="ecl-site-header__logo-image ecl-site-header__logo-image--l" src="/dist/media/icons.e3d8f25c.svg" alt="European Commission" /> </picture> </a> <div class="ecl-site-header__action"> <div class="ecl-site-header__login-container"><a class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle" href="/example" data-ecl-login-toggle><svg class="ecl-icon ecl-icon--s ecl-site-header__icon" focusable="false" aria-hidden="false" role="img"> <title>Log in</title> <use xlink:href="/dist/media/icons.e3d8f25c.svg#log-in"></use> </svg>Log in</a></div> <div class="ecl-site-header__language"><a class="ecl-button ecl-button--tertiary ecl-site-header__language-selector" href="/example" data-ecl-language-selector role="button" aria-label="Change language, current language is English - EN" 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="false" role="img"> <title>EN</title> <use xlink:href="/dist/media/icons.e3d8f25c.svg#global"></use> </svg></span>EN</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--tertiary ecl-site-header__language-close ecl-button--icon-only" 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--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#close"></use> </svg></span></button> </div> <div class="ecl-site-header__language-content" data-ecl-language-list-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-link--no-visited ecl-site-header__language-link" hreflang="bg"><span class="ecl-site-header__language-link-code">bg</span><span class="ecl-site-header__language-link-label" lang="bg">български</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="es"><span class="ecl-site-header__language-link-code">es</span><span class="ecl-site-header__language-link-label" lang="es">español</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="cs"><span class="ecl-site-header__language-link-code">cs</span><span class="ecl-site-header__language-link-label" lang="cs">čeština</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="da"><span class="ecl-site-header__language-link-code">da</span><span class="ecl-site-header__language-link-label" lang="da">dansk</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="de"><span class="ecl-site-header__language-link-code">de</span><span class="ecl-site-header__language-link-label" lang="de">Deutsch</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="et"><span class="ecl-site-header__language-link-code">et</span><span class="ecl-site-header__language-link-label" lang="et">eesti</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="el"><span class="ecl-site-header__language-link-code">el</span><span class="ecl-site-header__language-link-label" lang="el">ελληνικά</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link ecl-site-header__language-link--active" hreflang="en"><span class="ecl-site-header__language-link-code">en</span><span class="ecl-site-header__language-link-label" lang="en">English</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="fr"><span class="ecl-site-header__language-link-code">fr</span><span class="ecl-site-header__language-link-label" lang="fr">français</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="ga"><span class="ecl-site-header__language-link-code">ga</span><span class="ecl-site-header__language-link-label" lang="ga">Gaeilge</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="hr"><span class="ecl-site-header__language-link-code">hr</span><span class="ecl-site-header__language-link-label" lang="hr">hrvatski</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="it"><span class="ecl-site-header__language-link-code">it</span><span class="ecl-site-header__language-link-label" lang="it">italiano</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="lv"><span class="ecl-site-header__language-link-code">lv</span><span class="ecl-site-header__language-link-label" lang="lv">latviešu</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="lt"><span class="ecl-site-header__language-link-code">lt</span><span class="ecl-site-header__language-link-label" lang="lt">lietuvių</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="hu"><span class="ecl-site-header__language-link-code">hu</span><span class="ecl-site-header__language-link-label" lang="hu">magyar</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="mt"><span class="ecl-site-header__language-link-code">mt</span><span class="ecl-site-header__language-link-label" lang="mt">Malti</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="nl"><span class="ecl-site-header__language-link-code">nl</span><span class="ecl-site-header__language-link-label" lang="nl">Nederlands</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="pl"><span class="ecl-site-header__language-link-code">pl</span><span class="ecl-site-header__language-link-label" lang="pl">polski</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="pt"><span class="ecl-site-header__language-link-code">pt</span><span class="ecl-site-header__language-link-label" lang="pt">português</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="ro"><span class="ecl-site-header__language-link-code">ro</span><span class="ecl-site-header__language-link-label" lang="ro">română</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sk"><span class="ecl-site-header__language-link-code">sk</span><span class="ecl-site-header__language-link-label" lang="sk">slovenčina</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sl"><span class="ecl-site-header__language-link-code">sl</span><span class="ecl-site-header__language-link-label" lang="sl">slovenščina</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="fi"><span class="ecl-site-header__language-link-code">fi</span><span class="ecl-site-header__language-link-label" lang="fi">suomi</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" hreflang="sv"><span class="ecl-site-header__language-link-code">sv</span><span class="ecl-site-header__language-link-label" lang="sv">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-link--no-visited ecl-site-header__language-link" lang="ar" hreflang="ar"><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-link--no-visited ecl-site-header__language-link" lang="ca" hreflang="ca"><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-link--no-visited ecl-site-header__language-link" lang="is" hreflang="is"><span class="ecl-site-header__language-link-code">is</span><span class="ecl-site-header__language-link-label">Íslenska</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="lb" hreflang="lb"><span class="ecl-site-header__language-link-code">lb</span><span class="ecl-site-header__language-link-label">Lëtzebuergesch</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="ja" hreflang="ja"><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-link--no-visited ecl-site-header__language-link" lang="nb" hreflang="nb"><span class="ecl-site-header__language-link-code">nb</span><span class="ecl-site-header__language-link-label">Norsk bokmål</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="ru" hreflang="ru"><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-link--no-visited ecl-site-header__language-link" lang="tr" hreflang="tr"><span class="ecl-site-header__language-link-code">tr</span><span class="ecl-site-header__language-link-label">Türkçe</span></a></li> <li class="ecl-site-header__language-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-site-header__language-link" lang="uk" hreflang="uk"><span class="ecl-site-header__language-link-code">uk</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-link--no-visited ecl-site-header__language-link" lang="zh" hreflang="zh"><span class="ecl-site-header__language-link-code">zh</span><span class="ecl-site-header__language-link-label">中文</span></a></li> </ul> </div> </div> </div> </div> <div class="ecl-site-header__search-container" role="search"><a class="ecl-button ecl-button--tertiary 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="false" role="img"> <title>Search</title> <use xlink:href="/dist/media/icons.e3d8f25c.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" id="search-input-id-label" class="ecl-form-label ecl-search-form__label">Search</label><input id="search-input-id" class="ecl-text-input ecl-text-input--m ecl-search-form__text-input" type="search" placeholder="Placeholder text" /></div><button class="ecl-button ecl-button--ghost ecl-search-form__button" type="submit"><span class="ecl-button__container"><svg class="ecl-icon ecl-icon--xs ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#search"></use> </svg><span class="ecl-button__label" data-ecl-label="true">Search</span></span></button> </form> </div> </div> </div> </div> </div> </div> <div class="ecl-site-header__notification"> <div class="ecl-container"> <div class="ecl-notification ecl-notification--info" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="false"> <use xlink:href="/dist/media/icons.e3d8f25c.svg#information"></use> </svg> <div class="ecl-notification__content"> <div class="ecl-notification__title">Information notification</div> <div class="ecl-notification__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">News, policies, information and services</div><a href="" class="ecl-link ecl-link--cta ecl-link--icon 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.e3d8f25c.svg#corner-arrow"></use> </svg></a> </div> </div> </div> </header>
Try it yourself on the playground
Playground