Listings
When and how to use
Listings 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' %}
{% 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">Listings example</h1>
<h3 class="ecl-heading ecl-heading--h3">Default listing (one column)</h3>
{% include '@ecl/ec-component-listing' with {
items: [
{
metas: ['Service department', 'PMO'],
href: '../../example.html#listing-default-1',
title: 'Administration and Payment of Individual Entitlements',
},
{
metas: ['Directorate-General', 'AGRI'],
href: '../../example.html#listing-default-2',
title: 'Agriculture and Rural Development',
},
{
metas: ['Directorate-General', 'BUDG'],
href: '../../example.html#listing-default-3',
title: 'Budget',
},
{
metas: ['Directorate-General', 'CLIMA'],
href: '../../example.html#listing-default-4',
title: 'Climate Action',
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Default listing (two columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'two-columns',
items: [
{
title: 'Business, Economy, Euro',
href: '../../example.html#listing-default-two-1',
detail: 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
},
{
title: 'About the European Union',
href: '../../example.html#listing-default-two-2',
detail: 'The EU and its institutions, how to visit and work at the EU.'
},
{
title: 'Live, Work, Travel in EU',
href: '../../example.html#listing-default-two-3',
detail: 'Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture.'
},
{
title: 'Funding, Tenders',
href: '../../example.html#listing-default-two-4',
detail: 'EU funding, grants, tenders, and how to apply.'
},
{
title: 'Law',
href: '../../example.html#listing-default-two-5',
detail: 'EU law and judgments, how EU law is applied, public consultations, data protection, infringements, fraud, serious crime.'
},
{
title: 'Research and innovation',
href: '../../example.html#listing-default-two-6',
detail: 'Research funding, partners, results, and EU action to promote innovation.'
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Default listing (three columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [
{
title: 'Business, Economy, Euro',
href: '../../example.html#listing-default-three-1',
detail: 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
},
{
title: 'About the European Union',
href: '../../example.html#listing-default-three-2',
detail: 'The EU and its institutions, how to visit and work at the EU.'
},
{
title: 'Live, Work, Travel in EU',
href: '../../example.html#listing-default-three-3',
detail: 'Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture.'
},
{
title: 'Funding, Tenders',
href: '../../example.html#listing-default-three-4',
detail: 'EU funding, grants, tenders, and how to apply.'
},
{
title: 'Law',
href: '../../example.html#listing-default-three-5',
detail: 'EU law and judgments, how EU law is applied, public consultations, data protection, infringements, fraud, serious crime.'
},
{
title: 'Research and innovation',
href: '../../example.html#listing-default-three-6',
detail: 'Research funding, partners, results, and EU action to promote innovation.'
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Date listing (one column)</h3>
{% include '@ecl/ec-component-listing' with {
items: [
{
variant: 'date',
date: {
week_day: 'Tue',
day: '07',
month: 'Sep',
},
href: '../../example.html#listing-date-1',
title:
"Citizens' Dialogue in Bucharest with Commissioner Corina Crețu and the President of the European Committee of the Regions Karl-Heinz Lambertz",
detail:
'<small><span class="ecl-icon ecl-icon--location">Bucharest, Romania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
{
variant: 'date',
date: {
week_day: 'Tue',
day: '08',
month: 'Sep',
},
href: '../../example.html#listing-date-2',
title: "Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska",
detail:
'<small><span class="ecl-icon ecl-icon--location">Kraków, Poland</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
{
variant: 'date',
date: {
week_day: 'Tue',
day: '14',
month: 'Sep',
},
href: '../../example.html#listing-date-3',
title:
"Citizens' Dialogue in Tallin with Vice-President Jyrki Katainen",
detail:
'<small><span class="ecl-icon ecl-icon--location">Tallin, Estonia</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
{
variant: 'date',
date: {
week_day: 'Tue',
day: '19',
month: 'Sep',
},
href: '../../example.html#listing-date-4',
title: "Citizens' Dialogue in Kaunas with Commissioner Vytenis Andriukaitis",
detail:
'<small><span class="ecl-icon ecl-icon--location">Kaunas, Lithuania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Date listing (two columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'two-columns',
items: [
{
variant: 'date',
date: {
week_day: 'Tue',
day: '07',
month: 'Sep',
},
href: '../../example.html#listing-date-two-1',
title:
"Citizens' Dialogue in Bucharest with Commissioner Corina Crețu and the President of the European Committee of the Regions Karl-Heinz Lambertz",
detail:
'<small><span class="ecl-icon ecl-icon--location">Bucharest, Romania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
{
variant: 'date',
date: {
week_day: 'Tue',
day: '08',
month: 'Sep',
},
href: '../../example.html#listing-date-two-2',
title: "Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska",
detail:
'<small><span class="ecl-icon ecl-icon--location">Kraków, Poland</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
{
variant: 'date',
date: {
week_day: 'Tue',
day: '14',
month: 'Sep',
},
href: '../../example.html#listing-date-two-3',
title:
"Citizens' Dialogue in Tallin with Vice-President Jyrki Katainen",
detail:
'<small><span class="ecl-icon ecl-icon--location">Tallin, Estonia</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
{
variant: 'date',
date: {
week_day: 'Tue',
day: '19',
month: 'Sep',
},
href: '../../example.html#listing-date-two-4',
title: "Citizens' Dialogue in Kaunas with Commissioner Vytenis Andriukaitis",
detail:
'<small><span class="ecl-icon ecl-icon--location">Kaunas, Lithuania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>',
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Thumbnail listing (one column)</h3>
{% include '@ecl/ec-component-listing' with {
items: [
{
metas: ['Director-General'],
title: 'John Doe',
href: '../../example.html#listing-thumbnail-one-1',
primary_image: {
src: '../../assets/demo_images/default_profile_image.png',
alt: 'Director-General John Doe',
},
},
{
metas: ['Deputy Director-General'],
title: 'Jane Doe',
href: '../../example.html#listing-thumbnail-one-2',
primary_image: {
src: '../../assets/demo_images/default_profile_image.png',
alt: 'Deputy Director-General Jane Doe',
},
},
{
metas: ['Acting Deputy Director-General'],
title: 'Jack Doe',
href: '../../example.html#listing-thumbnail-one-3',
primary_image: {
src: '../../assets/demo_images/default_profile_image.png',
alt: 'Acting Deputy Director-General Jack Doe',
},
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Thumbnail listing (two columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'two-columns',
items: [
{
metas: ['Director-General'],
title: 'John Doe',
href: '../../example.html#listing-thumbnail-two-1',
primary_image: {
src: '../../assets/demo_images/default_profile_image.png',
alt: 'Director-General John Doe',
},
},
{
metas: ['Deputy Director-General'],
title: 'Jane Doe',
href: '../../example.html#listing-thumbnail-two-2',
primary_image: {
src: '../../assets/demo_images/default_profile_image.png',
alt: 'Deputy Director-General Jane Doe',
},
},
{
metas: ['Acting Deputy Director-General'],
title: 'Jack Doe',
href: '../../example.html#listing-thumbnail-two-3',
primary_image: {
src: '../../assets/demo_images/default_profile_image.png',
alt: 'Acting Deputy Director-General Jack Doe',
},
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Highlight listing (three columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [
{
variant: 'highlight',
title: 'State of the European Union 2017',
primary_image: {
src: '../../assets/demo_images/nature-demo-1.jpg',
alt: 'State of the European Union 2017',
},
},
{
variant: 'highlight',
title: 'White paper on the future of Europe',
primary_image: {
src: '../../assets/demo_images/nature-demo-2.jpg',
alt: 'White paper on the future of Europe',
},
},
{
variant: 'highlight',
title: 'EU solidarity',
primary_image: {
src: '../../assets/demo_images/nature-demo-3.jpg',
alt: 'EU solidarity',
},
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Navigation listing (one column)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [
{
variant: 'navigation',
title: 'Jobs, growth and investment',
detail: 'Mollit et cupidatat fugiat consequat exercitation irure est enim in incididunt.'
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Navigation listing (two columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'two-columns',
items: [
{
variant: 'navigation',
title: 'A stronger global actor',
detail: 'Proident enim excepteur voluptate cillum officia. Nisi ad mollit minim excepteur sunt officia exercitation dolore eiusmod est officia do laborum.'
},
{
variant: 'navigation',
title: 'Democratic change',
detail: 'Amet tempor laboris amet sit deserunt cupidatat esse officia. Anim commodo laborum ea quis ullamco velit enim velit nisi commodo reprehenderit.'
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Navigation listing (three columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [
{
variant: 'navigation',
title: 'Jobs, growth and investment',
detail: 'Mollit et cupidatat fugiat consequat exercitation irure est enim in incididunt.'
},
{
variant: 'navigation',
title: 'Energy union and climate',
detail: 'Ad cillum qui anim amet ea dolore excepteur amet esse sunt duis labore ullamco enim.'
},
{
variant: 'navigation',
title: 'A stronger global actor',
detail: 'Proident enim excepteur voluptate cillum officia. Nisi ad mollit minim excepteur sunt officia exercitation dolore eiusmod est officia do laborum.'
},
{
variant: 'navigation',
title: 'Democratic change',
detail: 'Amet tempor laboris amet sit deserunt cupidatat esse officia. Anim commodo laborum ea quis ullamco velit enim velit nisi commodo reprehenderit.'
},
{
variant: 'navigation',
title: 'Justice and fundamental rights',
detail: 'Duis pariatur do nostrud consectetur nisi anim.'
},
{
variant: 'navigation',
title: 'The 2018 Work Programme',
detail: 'Elit amet in non adipisicing irure in cupidatat enim aliqua proident laborum.'
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Block listing (one column)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [
{
variant: 'block',
title: 'Contact the EU',
detail:
'Consectetur sint eiusmod ut Lorem consequat quis laboris sit irure est ad dolore ad.',
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Block listing (two columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [
{
variant: 'block',
title: 'EU by topic',
detail:
'Anim irure ipsum dolore anim est Lorem cupidatat occaecat est consectetur.',
},
{
variant: 'block',
title: 'Doing business',
detail:
'Ipsum cupidatat amet qui labore aliquip dolor. Pariatur amet esse excepteur exercitation magna do enim amet.',
},
]
} %}
<h3 class="ecl-heading ecl-heading--h3">Block listing (three columns)</h3>
{% include '@ecl/ec-component-listing' with {
variant: 'three-columns',
items: [{
variant: 'block',
title: 'Climate action',
detail:
'In eu consectetur aute incididunt quis quis do labore in ut consectetur.',
},
{
variant: 'block',
title: 'EU by topic',
detail:
'Anim irure ipsum dolore anim est Lorem cupidatat occaecat est consectetur.',
},
{
variant: 'block',
title: 'Doing business',
detail:
'Ipsum cupidatat amet qui labore aliquip dolor. Pariatur amet esse excepteur exercitation magna do enim amet.',
},
{
variant: 'block',
title: 'About the EU',
detail:
'Ut laborum ullamco tempor duis veniam elit duis exercitation id excepteur.',
},
{
variant: 'block',
title: 'The Questions Corner',
detail:
'Do in cupidatat ea duis id. In sunt irure minim aliquip. Mollit eu aliqua et quis velit do.',
},
{
variant: 'block',
title: 'Contact the EU',
detail:
'Consectetur sint eiusmod ut Lorem consequat quis laboris sit irure est ad dolore ad.',
},
]
} %}
</div>
</main>
{% include '@ecl/ec-component-footer' with {
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: 'http://ec.europa.eu/info/resources-partners_en',
label: 'Resources for partners',
},
{
href: 'http://ec.europa.eu/info/cookies_en',
label: 'Cookies',
},
{
href: 'http://ec.europa.eu/info/legal-notice_en',
label: 'Legal notice',
},
{
href: 'http://ec.europa.eu/info/contact_en',
label: 'Contact',
},
],
},
} %}
{
"global": {
"language": "en"
},
"page_header": {
"breadcrumb": [
{
"href": "https://ec.europa.eu/info/index",
"label": "Home"
},
{
"href": "../../example.html#",
"label": "Example"
},
{
"label": "Business, Economy, Euro"
}
],
"identity": "Site identity",
"title": "Business, Economy, Euro",
"introduction": "EU economy, finance and the euro, and practical information for EU businesses and entrepreneurs on product safety, environmental regulations, trade with non-EU countries and competition rules.",
"meta": {
"type": "News article",
"date": "6 July 2015",
"timestamp": "2015-07-06T17:44:28+02:00",
"location": "Brussels"
}
}
}
<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">
</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">
Site identity
</div>
<div class="ecl-page-header__title">
<h1 class="ecl-heading ecl-heading--h1 ecl-u-color-white">Business, Economy, Euro</h1>
</div>
<p class="ecl-page-header__intro">EU economy, finance and the euro, and practical information for EU businesses and entrepreneurs on product safety, environmental regulations, trade with non-EU countries and competition rules.</p>
</div>
</div>
</div>
<main id="main-content">
<div class="ecl-container ecl-u-mv-l">
<h1 class="ecl-heading ecl-heading--h1">Listings example</h1>
<h3 class="ecl-heading ecl-heading--h3">Default listing (one column)</h3>
<ul class="ecl-listing">
<li class="ecl-list-item">
<a href="../../example.html#listing-default-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Service department</span>
<span class="ecl-meta__item">PMO</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Administration and Payment of Individual Entitlements</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Directorate-General</span>
<span class="ecl-meta__item">AGRI</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Agriculture and Rural Development</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Directorate-General</span>
<span class="ecl-meta__item">BUDG</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Budget</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-4" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Directorate-General</span>
<span class="ecl-meta__item">CLIMA</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Climate Action</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Default listing (two columns)</h3>
<ul class="ecl-listing ecl-listing--two-columns">
<li class="ecl-list-item">
<a href="../../example.html#listing-default-two-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Business, Economy, Euro</h3>
<p class="ecl-list-item__detail ecl-paragraph">
EU economy, the euro, and practical information for EU businesses and entrepreneurs.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-two-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">About the European Union</h3>
<p class="ecl-list-item__detail ecl-paragraph">
The EU and its institutions, how to visit and work at the EU.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-two-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Live, Work, Travel in EU</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-two-4" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Funding, Tenders</h3>
<p class="ecl-list-item__detail ecl-paragraph">
EU funding, grants, tenders, and how to apply.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-two-5" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Law</h3>
<p class="ecl-list-item__detail ecl-paragraph">
EU law and judgments, how EU law is applied, public consultations, data protection, infringements, fraud, serious crime.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-two-6" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Research and innovation</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Research funding, partners, results, and EU action to promote innovation.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Default listing (three columns)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item">
<a href="../../example.html#listing-default-three-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Business, Economy, Euro</h3>
<p class="ecl-list-item__detail ecl-paragraph">
EU economy, the euro, and practical information for EU businesses and entrepreneurs.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-three-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">About the European Union</h3>
<p class="ecl-list-item__detail ecl-paragraph">
The EU and its institutions, how to visit and work at the EU.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-three-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Live, Work, Travel in EU</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-three-4" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Funding, Tenders</h3>
<p class="ecl-list-item__detail ecl-paragraph">
EU funding, grants, tenders, and how to apply.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-three-5" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Law</h3>
<p class="ecl-list-item__detail ecl-paragraph">
EU law and judgments, how EU law is applied, public consultations, data protection, infringements, fraud, serious crime.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-default-three-6" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Research and innovation</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Research funding, partners, results, and EU action to promote innovation.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Date listing (one column)</h3>
<ul class="ecl-listing">
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">07</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Bucharest with Commissioner Corina Crețu and the President of the European Committee of the Regions Karl-Heinz Lambertz</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Bucharest, Romania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">08</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Kraków, Poland</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">14</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Tallin with Vice-President Jyrki Katainen</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Tallin, Estonia</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-4" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">19</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Kaunas with Commissioner Vytenis Andriukaitis</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Kaunas, Lithuania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Date listing (two columns)</h3>
<ul class="ecl-listing ecl-listing--two-columns">
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-two-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">07</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Bucharest with Commissioner Corina Crețu and the President of the European Committee of the Regions Karl-Heinz Lambertz</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Bucharest, Romania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-two-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">08</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Kraków, Poland</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-two-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">14</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Tallin with Vice-President Jyrki Katainen</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Tallin, Estonia</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--date">
<a href="../../example.html#listing-date-two-4" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">19</span>
<span class="ecl-date-block__month">Sep</span>
</div>
</div>
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Citizens' Dialogue in Kaunas with Commissioner Vytenis Andriukaitis</h3>
<p class="ecl-list-item__detail ecl-paragraph">
<small><span class="ecl-icon ecl-icon--location">Kaunas, Lithuania</span> <span class="ecl-icon ecl-icon--livestreaming ecl-u-ml-s">live streaming available</span></small>
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Thumbnail listing (one column)</h3>
<ul class="ecl-listing">
<li class="ecl-list-item">
<a href="../../example.html#listing-thumbnail-one-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="Director-General John Doe" src="../../assets/demo_images/default_profile_image.png" />
</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Director-General</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">John Doe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-thumbnail-one-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="Deputy Director-General Jane Doe" src="../../assets/demo_images/default_profile_image.png" />
</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Deputy Director-General</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Jane Doe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-thumbnail-one-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="Acting Deputy Director-General Jack Doe" src="../../assets/demo_images/default_profile_image.png" />
</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Acting Deputy Director-General</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Jack Doe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Thumbnail listing (two columns)</h3>
<ul class="ecl-listing ecl-listing--two-columns">
<li class="ecl-list-item">
<a href="../../example.html#listing-thumbnail-two-1" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="Director-General John Doe" src="../../assets/demo_images/default_profile_image.png" />
</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Director-General</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">John Doe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-thumbnail-two-2" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="Deputy Director-General Jane Doe" src="../../assets/demo_images/default_profile_image.png" />
</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Deputy Director-General</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Jane Doe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item">
<a href="../../example.html#listing-thumbnail-two-3" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="Acting Deputy Director-General Jack Doe" src="../../assets/demo_images/default_profile_image.png" />
</div>
<div class="ecl-list-item__body">
<div class="ecl-list-item__meta">
<div class="ecl-meta">
<span class="ecl-meta__item">Acting Deputy Director-General</span>
</div>
</div>
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Jack Doe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Highlight listing (three columns)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item ecl-list-item--highlight">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="State of the European Union 2017" src="../../assets/demo_images/nature-demo-1.jpg" />
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">State of the European Union 2017</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--highlight">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="White paper on the future of Europe" src="../../assets/demo_images/nature-demo-2.jpg" />
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">White paper on the future of Europe</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--highlight">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__primary">
<img class="ecl-image ecl-image--fluid" alt="EU solidarity" src="../../assets/demo_images/nature-demo-3.jpg" />
</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">EU solidarity</h3>
<p class="ecl-list-item__detail ecl-paragraph">
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Navigation listing (one column)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Jobs, growth and investment</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Mollit et cupidatat fugiat consequat exercitation irure est enim in incididunt.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Navigation listing (two columns)</h3>
<ul class="ecl-listing ecl-listing--two-columns">
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">A stronger global actor</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Proident enim excepteur voluptate cillum officia. Nisi ad mollit minim excepteur sunt officia exercitation dolore eiusmod est officia do laborum.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Democratic change</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Amet tempor laboris amet sit deserunt cupidatat esse officia. Anim commodo laborum ea quis ullamco velit enim velit nisi commodo reprehenderit.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Navigation listing (three columns)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Jobs, growth and investment</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Mollit et cupidatat fugiat consequat exercitation irure est enim in incididunt.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Energy union and climate</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Ad cillum qui anim amet ea dolore excepteur amet esse sunt duis labore ullamco enim.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">A stronger global actor</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Proident enim excepteur voluptate cillum officia. Nisi ad mollit minim excepteur sunt officia exercitation dolore eiusmod est officia do laborum.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Democratic change</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Amet tempor laboris amet sit deserunt cupidatat esse officia. Anim commodo laborum ea quis ullamco velit enim velit nisi commodo reprehenderit.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Justice and fundamental rights</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Duis pariatur do nostrud consectetur nisi anim.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--navigation">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">The 2018 Work Programme</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Elit amet in non adipisicing irure in cupidatat enim aliqua proident laborum.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Block listing (one column)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Contact the EU</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Consectetur sint eiusmod ut Lorem consequat quis laboris sit irure est ad dolore ad.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Block listing (two columns)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">EU by topic</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Anim irure ipsum dolore anim est Lorem cupidatat occaecat est consectetur.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Doing business</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Ipsum cupidatat amet qui labore aliquip dolor. Pariatur amet esse excepteur exercitation magna do enim amet.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
<h3 class="ecl-heading ecl-heading--h3">Block listing (three columns)</h3>
<ul class="ecl-listing ecl-listing--three-columns">
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Climate action</h3>
<p class="ecl-list-item__detail ecl-paragraph">
In eu consectetur aute incididunt quis quis do labore in ut consectetur.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">EU by topic</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Anim irure ipsum dolore anim est Lorem cupidatat occaecat est consectetur.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Doing business</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Ipsum cupidatat amet qui labore aliquip dolor. Pariatur amet esse excepteur exercitation magna do enim amet.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">About the EU</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Ut laborum ullamco tempor duis veniam elit duis exercitation id excepteur.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">The Questions Corner</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Do in cupidatat ea duis id. In sunt irure minim aliquip. Mollit eu aliqua et quis velit do.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
<li class="ecl-list-item ecl-list-item--block">
<a href="" class="ecl-link ecl-list-item__link">
<div class="ecl-u-sr-only">List item</div>
<div class="ecl-list-item__body">
<h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Contact the EU</h3>
<p class="ecl-list-item__detail ecl-paragraph">
Consectetur sint eiusmod ut Lorem consequat quis laboris sit irure est ad dolore ad.
</p>
<div class="ecl-list-item__action">
</div>
</div>
</a>
</li>
</ul>
</div>
</main>
<footer class="ecl-footer">
<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="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="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-listing
- Tags: template
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-template/ec-template-listing/ec-template-listing.twig