Pages
When and how to use
Page template
{#
This is an example and should not be used as it is.
#}
{% include '@ecl/ec-component-skip-link' with {
'href': '#main-content',
'label': 'Skip to main content'
} %}
{% include '@ecl/ec-component-login-bar' with {
'logged_in': true,
'message': 'Logged in as Jane Doe',
'link': {
'href': '../../example.html#',
'label': 'Log out',
}
} %}
{% include '@ecl/ec-component-site-header' with {
languages: languages
} %}
{% include '@ecl/ec-component-page-header' with { variant: 'default' }|merge(page_header|default({})) %}
{% if menu is defined and menu is not empty %}
{% include '@ecl/ec-component-navigation-menu' with menu %}
{% endif %}
<main id="main-content">
<div class="ecl-container ecl-u-mv-l">
<h1 class="ecl-heading ecl-heading--h1">Page example</h1>
<p class="ecl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor elit, sagittis eu ante eu, tempor tempus lorem. Quisque auctor leo id tempor pulvinar. Nunc sapien orci, eleifend nec magna ac, feugiat viverra orci. Nulla efficitur nisl vitae risus pretium, sit amet aliquam dolor volutpat. Donec risus elit, congue at porta eget, posuere vitae ipsum. Nulla iaculis magna a lorem dignissim consequat. Praesent mattis libero ac tortor efficitur porta. In congue elementum nunc, vitae accumsan turpis dictum non.</p>
<p class="ecl-paragraph">Integer convallis quis magna et dapibus. Aenean id lectus vitae nulla fringilla gravida sed id mauris. Aliquam commodo erat sit amet nisi mollis, ut suscipit dolor eleifend. Fusce at malesuada lorem. Ut rutrum nibh massa, sed tincidunt nibh pretium id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor turpis a efficitur posuere. Integer eu est sodales, ornare elit ac, congue leo. Sed condimentum faucibus fermentum. Fusce aliquet ut enim euismod feugiat. Fusce nec interdum metus, id finibus nisl.</p>
</div>
</main>
{% include '@ecl/ec-component-footer' with footer %}
{
"global": {
"language": "en"
},
"languages": [
{
"href": "index_bg",
"hreflang": "bg",
"label": "български",
"lang": "bg"
},
{
"href": "index_es",
"hreflang": "es",
"label": "español",
"lang": "es"
},
{
"href": "index_cs",
"hreflang": "cs",
"label": "čeština",
"lang": "cs"
},
{
"href": "index_da",
"hreflang": "da",
"label": "dansk",
"lang": "da"
},
{
"href": "index_de",
"hreflang": "de",
"label": "Deutsch",
"lang": "de"
},
{
"href": "index_et",
"hreflang": "et",
"label": "eesti",
"lang": "et"
},
{
"href": "index_el",
"hreflang": "el",
"label": "ελληνικά",
"lang": "el"
},
{
"href": "index_en",
"hreflang": "en",
"is_active": true,
"label": "English",
"lang": "en"
},
{
"href": "index_fr",
"hreflang": "fr",
"label": "français",
"lang": "fr"
},
{
"href": "index_ga",
"hreflang": "ga",
"label": "Gaeilge",
"lang": "ga"
},
{
"href": "index_hr",
"hreflang": "hr",
"label": "hrvatski",
"lang": "hr"
},
{
"href": "index_it",
"hreflang": "it",
"label": "italiano",
"lang": "it"
},
{
"href": "index_lv",
"hreflang": "lv",
"label": "latviešu",
"lang": "lv"
},
{
"href": "index_lt",
"hreflang": "lt",
"label": "lietuvių",
"lang": "lt"
},
{
"href": "index_hu",
"hreflang": "hu",
"label": "magyar",
"lang": "hu"
},
{
"href": "index_mt",
"hreflang": "mt",
"label": "Malti",
"lang": "mt"
},
{
"href": "index_nl",
"hreflang": "nl",
"label": "Nederlands",
"lang": "nl"
},
{
"href": "index_pl",
"hreflang": "pl",
"label": "polski",
"lang": "pl"
},
{
"href": "index_pt",
"hreflang": "pt",
"label": "português",
"lang": "pt-pt"
},
{
"href": "index_ro",
"hreflang": "ro",
"label": "română",
"lang": "ro"
},
{
"href": "index_sk",
"hreflang": "sk",
"label": "slovenčina",
"lang": "sk"
},
{
"href": "index_sl",
"hreflang": "sl",
"label": "slovenščina",
"lang": "sl"
},
{
"href": "index_fi",
"hreflang": "fi",
"label": "suomi",
"lang": "fi"
},
{
"href": "index_sv",
"hreflang": "sv",
"label": "svenska",
"lang": "sv"
}
],
"page_header": {
"breadcrumb": [
{
"href": "https://ec.europa.eu/info/index",
"label": "Home"
},
{
"href": "../../example.html#",
"label": "Example"
},
{
"label": "Business, Economy, Euro"
}
],
"identity": "Europa Component Library"
},
"menu": {
"menu_label": "Menu",
"menu_aria_label": "Main Navigation",
"links": [
{
"label": "Home",
"href": "../../example.html#home"
},
{
"label": "Policy",
"href": "../../example.html#item1",
"is_active": true,
"children_links": [
{
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item1-1-1"
},
{
"label": "Sub item 2 with a very very very (very) long label",
"href": "../../example.html#item1-1-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item1-1-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item1-1-4",
"is_active": true
},
{
"label": "Sub item 5",
"href": "../../example.html#item1-1-5"
}
]
},
{
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item1-2-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item1-2-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item1-2-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item1-2-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item1-2-5"
}
]
},
{
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item1-3-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item1-3-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item1-3-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item1-3-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item1-3-5"
}
]
},
{
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item1-4-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item1-4-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item1-4-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item1-4-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item1-4-5"
}
]
}
]
},
{
"label": "Advisor Bodies",
"href": "../../example.html#item2",
"children_links": [
{
"title": "Optional title 1",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item2-1-1"
},
{
"label": "Sub item 2 with a very very very (very) long label",
"href": "../../example.html#item2-1-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item2-1-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item2-1-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item2-1-5"
}
]
},
{
"title": "Optional title 2",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item2-2-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item2-2-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item2-2-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item2-2-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item2-2-5"
}
]
}
]
},
{
"label": "News & Events",
"href": "../../example.html#item3",
"children_links": [
{
"title": "Optional title 1",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item3-1-1"
},
{
"label": "Sub item 2 with a very very very (very) long label",
"href": "../../example.html#item3-1-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item3-1-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item3-1-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item3-1-5"
}
]
},
{
"title": "Optional title 2",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item3-2-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item3-2-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item3-2-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item3-2-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item3-2-5"
}
]
},
{
"title": "Optional title 3",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item3-3-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item3-3-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item3-3-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item3-3-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item3-3-5"
}
]
}
]
},
{
"label": "Contracts and Fundings",
"href": "../../example.html#item4",
"children_links": [
{
"title": "Optional title 1",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item4-1-1"
},
{
"label": "Sub item 2 with a very very very (very) long label",
"href": "../../example.html#item4-1-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item4-1-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item4-1-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item4-1-5"
}
]
},
{
"title": "Optional title 2",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item4-2-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item4-2-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item4-2-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item4-2-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item4-2-5"
}
]
},
{
"title": "Optional title 3",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item4-3-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item4-3-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item4-3-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item4-3-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item4-3-5"
}
]
},
{
"title": "Optional title 4",
"links": [
{
"label": "Sub item 1",
"href": "../../example.html#item4-4-1"
},
{
"label": "Sub item 2",
"href": "../../example.html#item4-4-2"
},
{
"label": "Sub item 3",
"href": "../../example.html#item4-4-3"
},
{
"label": "Sub item 4",
"href": "../../example.html#item4-4-4"
},
{
"label": "Sub item 5",
"href": "../../example.html#item4-4-5"
}
]
}
]
}
]
},
"footer": {
"custom_footer": {
"identity": "Europa Component Library",
"social_links": {
"label": "Follow us:",
"links": [
{
"type": "social-network",
"icon": "facebook",
"link": {
"href": "../../example.html#",
"label": "Facebook"
}
},
{
"type": "social-network",
"icon": "twitter",
"link": {
"href": "../../example.html#",
"label": "Twitter"
}
},
{
"type": "external",
"link": {
"href": "../../example.html#",
"label": "Other social media"
}
}
]
},
"other_links": {
"links": [
{
"link": {
"href": "../../example.html#",
"label": "Contact"
}
},
{
"link": {
"href": "../../example.html#",
"label": "Site map"
}
}
]
}
},
"corporate_footer": {
"about_ec": {
"title": "European Commission",
"items": [
{
"href": "https://ec.europa.eu/info/index",
"label": "European Commission website"
}
]
},
"social_media": {
"title": "Follow the European Commission",
"items": [
{
"type": "social-network",
"icon": "facebook",
"link": {
"href": "../../example.html#",
"label": "Facebook"
}
},
{
"type": "social-network",
"icon": "twitter",
"link": {
"href": "../../example.html#",
"label": "Twitter"
}
},
{
"type": "external",
"link": {
"href": "../../example.html#",
"label": "Other social media"
}
}
]
},
"about_eu": {
"title": "European Union",
"items": [
{
"href": "../../example.html#",
"label": "EU institutions"
},
{
"href": "../../example.html#",
"label": "European Union"
}
]
},
"bottom_links": [
{
"href": "http://ec.europa.eu/info/about-commissions-new-web-presence_en",
"label": "About the Commission's new web presence"
},
{
"href": "https://ec.europa.eu/info/language-policy_en",
"label": "Language policy"
},
{
"href": "http://ec.europa.eu/info/resources-partners_en",
"label": "Resources for partners"
},
{
"href": "http://ec.europa.eu/info/cookies_en",
"label": "Cookies"
},
{
"href": "https://ec.europa.eu/info/privacy-policy_en",
"label": "Privacy policy"
},
{
"href": "http://ec.europa.eu/info/legal-notice_en",
"label": "Legal notice"
},
{
"href": "http://ec.europa.eu/info/contact_en",
"label": "Contact"
}
]
}
},
"_demo": {
"scripts": "document.addEventListener('DOMContentLoaded', function () {\n ECL.initBreadcrumb();\n ECL.megamenu();\n ECL.dialogs({\n dialogOverlayId: 'ecl-overlay-language-list',\n triggerElementsSelector: '#ecl-lang-select-sites__overlay'\n });\n });"
}
}
<div class="ecl-skip-link__wrapper" id="skip-link">
<a href="#main-content" class="ecl-skip-link">Skip to main content</a>
</div>
<div class="ecl-login-bar">
<div class="ecl-container ecl-login-bar__container">
<span class="ecl-login-bar__message">Logged in as Jane Doe</span>
<a class="ecl-link ecl-link--standalone ecl-login-bar__link" href="../../example.html#">Log out</a>
</div>
</div>
<header class="ecl-site-header" role="banner">
<div class="ecl-container ecl-site-header__banner">
<a href="https://ec.europa.eu/info/index" class="ecl-logo ecl-logo--logotype ecl-site-header__logo" title="Home - European Commission"><span class="ecl-u-sr-only">Home - European Commission</span></a>
<div class="ecl-language-list ecl-language-list--overlay ecl-site-header__language-list">
<div id="ecl-overlay-language-list" class="ecl-dialog__overlay ecl-dialog__overlay--blue" aria-hidden="true"></div>
<div class="ecl-lang-select-sites ecl-link" data-ecl-dialog="ecl-dialog" id="ecl-lang-select-sites__overlay">
<a href="#" class="ecl-lang-select-sites__link">
<span class="ecl-lang-select-sites__label">English</span>
<span class="ecl-lang-select-sites__code">
<span class="ecl-icon ecl-icon--language ecl-lang-select-sites__icon"></span>
<span class="ecl-lang-select-sites__code-text">en</span>
</span>
</a>
</div>
<div class="ecl-dialog ecl-dialog--transparent ecl-dialog--wide" id="ecl-dialog" aria-labelledby="ecl-dialog-title" aria-describedby="ecl-dialog-description" aria-hidden="true" role="dialog">
<h3 id="ecl-dialog-title" class="ecl-heading ecl-heading--h3 ecl-u-sr-only">Dialog</h3>
<p id="ecl-dialog-description" class="ecl-u-sr-only"></p>
<div class="ecl-dialog__body">
<section>
<div>
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col-lg-8 ecl-offset-lg-2">
<h2 lang="en" class="ecl-heading ecl-heading--h2 ecl-dialog__title">
<span class="ecl-icon ecl-icon--generic-lang"></span> Select your language
</h2>
<div class="ecl-row">
<div class="ecl-col-md-6">
<a href="index_bg" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="bg" hreflang="bg" rel="alternate">български</a>
<a href="index_es" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="es" hreflang="es" rel="alternate">español</a>
<a href="index_cs" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="cs" hreflang="cs" rel="alternate">čeština</a>
<a href="index_da" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="da" hreflang="da" rel="alternate">dansk</a>
<a href="index_de" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="de" hreflang="de" rel="alternate">Deutsch</a>
<a href="index_et" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="et" hreflang="et" rel="alternate">eesti</a>
<a href="index_el" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="el" hreflang="el" rel="alternate">ελληνικά</a>
<a href="index_en" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button ecl-language-list__button--active" lang="en" hreflang="en" rel="alternate">English<span class="ecl-icon ecl-icon--check ecl-u-f-r"></span></a>
<a href="index_fr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fr" hreflang="fr" rel="alternate">français</a>
<a href="index_ga" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ga" hreflang="ga" rel="alternate">Gaeilge</a>
<a href="index_hr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hr" hreflang="hr" rel="alternate">hrvatski</a>
<a href="index_it" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="it" hreflang="it" rel="alternate">italiano</a>
</div>
<div class="ecl-col-md-6">
<a href="index_lv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lv" hreflang="lv" rel="alternate">latviešu</a>
<a href="index_lt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lt" hreflang="lt" rel="alternate">lietuvių</a>
<a href="index_hu" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hu" hreflang="hu" rel="alternate">magyar</a>
<a href="index_mt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="mt" hreflang="mt" rel="alternate">Malti</a>
<a href="index_nl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="nl" hreflang="nl" rel="alternate">Nederlands</a>
<a href="index_pl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pl" hreflang="pl" rel="alternate">polski</a>
<a href="index_pt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pt-pt" hreflang="pt" rel="alternate">português</a>
<a href="index_ro" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ro" hreflang="ro" rel="alternate">română</a>
<a href="index_sk" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sk" hreflang="sk" rel="alternate">slovenčina</a>
<a href="index_sl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sl" hreflang="sl" rel="alternate">slovenščina</a>
<a href="index_fi" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fi" hreflang="fi" rel="alternate">suomi</a>
<a href="index_sv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sv" hreflang="sv" rel="alternate">svenska</a>
</div>
<button class="ecl-dialog__dismiss ecl-dialog__dismiss--inverted">Close</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<form class="ecl-search-form ecl-site-header__search">
<label class="ecl-search-form__textfield-wrapper">
<span class="ecl-u-sr-only">Search this website</span>
<input type="search" class="ecl-text-input ecl-search-form__textfield" id="global-search" name="default-name" />
</label>
<button type="submit" class="ecl-button ecl-button--form ecl-search-form__button">Search</button>
</form>
</div>
</header>
<div class="ecl-page-header ecl-page-header--default">
<div class="ecl-container">
<nav class="ecl-breadcrumb" aria-label="breadcrumb">
<span class="ecl-u-sr-only">You are here:</span>
<ol class="ecl-breadcrumb__segments-wrapper">
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--first">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="https://ec.europa.eu/info/index">Home</a>
</li>
<li class="ecl-breadcrumb__segment">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Example</a>
</li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--last">
<span>Business, Economy, Euro</span>
</li>
</ol>
</nav>
<div class="ecl-page-header__body">
<div class="ecl-page-header__identity">
Europa Component Library
</div>
</div>
</div>
</div>
<nav class="ecl-navigation-menu" aria-label="Main Navigation">
<div class="ecl-container">
<button class="ecl-navigation-menu__toggle ecl-navigation-menu__hamburger ecl-navigation-menu__hamburger--squeeze" aria-controls="nav-menu-expandable-root" aria-expanded="false">
<span class="ecl-navigation-menu__hamburger-box">
<span class="ecl-navigation-menu__hamburger-inner"></span>
</span>
<span class="ecl-navigation-menu__hamburger-label">Menu</span>
</button>
<ul class="ecl-navigation-menu__root" id="nav-menu-expandable-root" aria-hidden="true">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#home" class="ecl-navigation-menu__link">Home</a>
</li>
<li class="ecl-navigation-menu__item ecl-navigation-menu__item--active">
<a href="../../example.html#item1" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-2" aria-expanded="false" aria-haspopup="true">Policy</a>
<div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-2">
<div class="ecl-col">
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-1-4" class="ecl-navigation-menu__link ecl-navigation-menu__link--active">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-3-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-3-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-3-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-3-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-3-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-4-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-4-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-4-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-4-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item1-4-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
</div>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-3" aria-expanded="false" aria-haspopup="true">Advisor Bodies</a>
<div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-3">
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 1</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-1-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 2</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item2-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
</div>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-4" aria-expanded="false" aria-haspopup="true">News & Events</a>
<div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-4">
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 1</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-1-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 2</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 3</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-3-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-3-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-3-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-3-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item3-3-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
</div>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-5" aria-expanded="false" aria-haspopup="true">Contracts and Fundings</a>
<div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-5">
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 1</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-1-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 2</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 3</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-3-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-3-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-3-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-3-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-3-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
<div class="ecl-col">
<div class="ecl-navigation-menu__title">Optional title 4</div>
<ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-4-1" class="ecl-navigation-menu__link">Sub item 1</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-4-2" class="ecl-navigation-menu__link">Sub item 2</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-4-3" class="ecl-navigation-menu__link">Sub item 3</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-4-4" class="ecl-navigation-menu__link">Sub item 4</a>
</li>
<li class="ecl-navigation-menu__item">
<a href="../../example.html#item4-4-5" class="ecl-navigation-menu__link">Sub item 5</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<main id="main-content">
<div class="ecl-container ecl-u-mv-l">
<h1 class="ecl-heading ecl-heading--h1">Page example</h1>
<p class="ecl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor elit, sagittis eu ante eu, tempor tempus lorem. Quisque auctor leo id tempor pulvinar. Nunc sapien orci, eleifend nec magna ac, feugiat viverra orci. Nulla efficitur nisl vitae risus pretium, sit amet aliquam dolor volutpat. Donec risus elit, congue at porta eget, posuere vitae ipsum. Nulla iaculis magna a lorem dignissim consequat. Praesent mattis libero ac tortor efficitur porta. In congue elementum nunc, vitae accumsan turpis dictum non.</p>
<p class="ecl-paragraph">Integer convallis quis magna et dapibus. Aenean id lectus vitae nulla fringilla gravida sed id mauris. Aliquam commodo erat sit amet nisi mollis, ut suscipit dolor eleifend. Fusce at malesuada lorem. Ut rutrum nibh massa, sed tincidunt nibh pretium id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor turpis a efficitur posuere. Integer eu est sodales, ornare elit ac, congue leo. Sed condimentum faucibus fermentum. Fusce aliquet ut enim euismod feugiat. Fusce nec interdum metus, id finibus nisl.</p>
</div>
</main>
<footer class="ecl-footer">
<div class="ecl-footer__custom">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-u-mt-xxxs ecl-u-mb-none ecl-footer__column-title ecl-footer__custom-title-identity">
Europa Component Library
</h2>
</div>
<div class="ecl-footer__column ecl-col-md">
<p class="ecl-footer__custom-label">Follow us:</p>
<ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links ecl-u-d-inline">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span><span>Facebook</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span><span>Twitter</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--external ecl-footer__link" href="../../example.html#">Other social media</a>
</li>
</ul>
</div>
<div class="ecl-footer__column ecl-col-md">
<ul class="ecl-list ecl-list--unstyled ecl-footer__list">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#">Contact</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-footer__link" href="../../example.html#">Site map</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-footer__corporate">
<div class="ecl-footer__corporate-top">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-ec">European Commission</h2>
<ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-ec">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/index">European Commission website</a>
</li>
</ul>
</div>
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-social-media">Follow the European Commission</h2>
<ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links" aria-labelledby="footer-corporate-social-media">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span><span>Facebook</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span><span>Twitter</span> </a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="../../example.html#">Other social media</a>
</li>
</ul>
</div>
<div class="ecl-footer__column ecl-col-md">
<h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-eu">European Union</h2>
<ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-eu">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#">EU institutions</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#">European Union</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ecl-footer__corporate-bottom">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col">
<ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline">
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/about-commissions-new-web-presence_en">About the Commission's new web presence</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/language-policy_en">Language policy</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/resources-partners_en">Resources for partners</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/cookies_en">Cookies</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/privacy-policy_en">Privacy policy</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/legal-notice_en">Legal notice</a>
</li>
<li class="ecl-footer__list-item">
<a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/contact_en">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
- Handle: @ecl/ec-template-page--with-menu
- Tags: template
- Variants (2): Simple , Page with menu
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-template/ec-template-page/ec-template-page.twig