Listings page

Documentation • Demo

Ready

Listings

When and how to use

Listings template

View
Context
HTML
Info


        {#
  This is an example and should not be used as it is.
#}

{% include '@ecl/eu-component-skip-link' with {
    'href': '#main-content',
    'label': 'Skip to main content'
} %}

{% include '@ecl/eu-component-site-header' %}

{% include '@ecl/eu-component-page-header' with { variant: 'basic' }|merge(page_header|default({})) %}
{% if menu is defined and menu is not empty %}
  {% include '@ecl/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-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/eu-component-footer' with {
  custom_footer: {
    identity: 'Site Identification',
    social_links: {
      label: 'Follow us:',
      links: [
        {
          type: 'social-network',
          icon: 'facebook',
          link: {
            href: '../../example.html#facebook',
            label: 'Facebook',
          },
        },
        {
          type: 'social-network',
          icon: 'twitter',
          link: {
            href: '../../example.html#twitter',
            label: 'Twitter',
          },
        },
        {
          type: 'social-network',
          icon: 'instagram',
          link: {
            href: '../../example.html#instagram',
            label: 'Instagram',
          },
        },
      ],
    },
    other_links: {
      links: [
        {
          link: {
            href: '../../example.html#loremipsum1',
            label: 'Lorem ipsum',
          },
        },
        {
          link: {
            href: '../../example.html#loremipsum2',
            label: 'Lorem ipsum',
          },
        },
        {
          link: {
            href: '../../example.html#loremipsum3',
            label: 'Lorem ipsum dolor sit',
          },
        },
        {
          link: {
            href: '../../example.html#loremipsum4',
            label: 'Lorem ipsum dolor sit',
          },
        },
      ],
    },
  },
  corporate_footer: {
    contact_eu: {
      title: 'Contact the EU',
      items: [
        {
          html:
            'Call us <a href="../../example.html#call" class="ecl-link ecl-link--standalone">00 800 6 7 8 9 10 11</a>',
        },
        {
          html:
            'Use other <a href="../../example.html#call-other-options" class="ecl-link ecl-link--standalone">telephone options</a>',
        },
        {
          html:
            'Write to us via our <a href="../../example.html#contact-form" class="ecl-link ecl-link--standalone">contact form</a>',
        },
        {
          html:
            'Meet us at a <a href="../../example.html#local-office" class="ecl-link ecl-link--standalone">local EU office</a>',
        },
      ],
    },
    social_media: {
      title: 'Find a social media account',
      items: [
        {
          html:
            '<a href="../../example.html#call" class="ecl-link ecl-link--standalone">Search for EU social media channels</a>',
        },
      ],
    },
    find_institution: {
      title: 'EU institutions',
      items: [
        {
          href: '../../example.html#',
          label: 'European Parliament',
        },
        {
          href: '../../example.html#',
          label: 'European Council',
        },

        {
          href: '../../example.html#',
          label: 'Council of the European Union',
        },
        {
          href: '../../example.html#',
          label: 'European Commission',
        },
        {
          href: '../../example.html#',
          label: 'Court of Justice of the European Union',
        },
        {
          href: '../../example.html#',
          label: 'European Central Bank',
        },
        {
          href: '../../example.html#',
          label: 'European Court of Auditors',
        },
        {
          href: '../../example.html#',
          label: 'European External Action Service',
        },
        {
          href: '../../example.html#',
          label: 'European Economic and Social Committee',
        },
        {
          href: '../../example.html#',
          label: 'European Committee of the Regions',
        },
        {
          href: '../../example.html#',
          label: 'European Investment Bank',
        },
        {
          href: '../../example.html#',
          label: 'European Ombudsman',
        },
        {
          href: '../../example.html#',
          label: 'European Data Protection Supervisor',
        },
        {
          href: '../../example.html#',
          label: 'European Personnel Selection Office',
        },
        {
          href: '../../example.html#',
          label: 'Publications Office of the European Union',
        },
        {
          href: '../../example.html#',
          label: 'Agencies',
        },
      ],
      short_list: [
        {
          html:
            'Search for <a href="../../example.html#call" class="ecl-link ecl-link--standalone">EU institutions</a>',
        },
      ],
    },
    bottom_links: [
      {
        href: '../../example.html#',
        label: 'Work for the EU',
      },
      {
        href: '../../example.html#',
        label: 'Sitemap',
      },
      {
        href: '../../example.html#',
        label: 'About this site',
      },
      {
        href: '../../example.html#',
        label: 'Language policy',
      },
      {
        href: '../../example.html#',
        label: 'Legal notice',
      },
      {
        href: '../../example.html#',
        label: 'Cookies',
      },
    ],
    published_date: 'Last published 26/06/2018',
  },
} %}


        
            
            {
  "global": {
    "language": "en"
  },
  "_demo": {
    "scripts": "\n        document.addEventListener('DOMContentLoaded', function () {\n          ECL.dialogs({\n            dialogOverlayId: 'ecl-overlay-language-list',\n            triggerElementsSelector: '#ecl-lang-select-sites__overlay'\n          });\n        });\n      "
  },
  "page_header": {
    "breadcrumb": [
      {
        "href": "https://europa.eu/european-union/index_en",
        "label": "Home"
      },
      {
        "href": "../../example.html#",
        "label": "Example"
      },
      {
        "label": "Business, Economy, Euro"
      }
    ],
    "identity": "Site identity"
  }
}


        
        <div class="ecl-skip-link__wrapper" id="skip-link">
  <a href="#main-content" class="ecl-skip-link">Skip to main content</a>
</div>

<header class="ecl-site-header" role="banner">
  <div class="ecl-container ecl-site-header__banner">

    <a href="https://europa.eu" class="ecl-logo ecl-logo--logotype ecl-site-header__logo" title="Home - European Union"><span class="ecl-u-sr-only">Home - European Union</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" 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--basic">
  <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://europa.eu/european-union/index_en">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>
  </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__custom">

    <div class="ecl-container">
      <div class="ecl-footer__custom-title">
        Site Identification
      </div>
      <div class="ecl-row">
        <div class="ecl-col-md">
          <div class="ecl-footer__custom-label">Follow us:</div>
          <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links">
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#facebook"> <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#twitter"> <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-footer__link" href="../../example.html#instagram"> <span class="ecl-icon ecl-icon--instagram ecl-footer__social-icon"></span><span>Instagram</span> </a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-md ecl-footer__other-links">
          <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-footer__link" href="../../example.html#loremipsum1">Lorem ipsum</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum2">Lorem ipsum</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum3">Lorem ipsum dolor sit</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum4">Lorem ipsum dolor sit</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 ecl-footer__row">
          <div class="ecl-footer__column ecl-col-md-4 ecl-footer__spaced-column">
            <div class="ecl-footer__column-title" id="footer-corporate-contact-eu">Contact the EU</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-contact-eu">
              <li class="ecl-footer__list-item">
                Call us <a href="../../example.html#call" class="ecl-link ecl-link--standalone">00 800 6 7 8 9 10 11</a>
              </li>
              <li class="ecl-footer__list-item">
                Use other <a href="../../example.html#call-other-options" class="ecl-link ecl-link--standalone">telephone options</a>
              </li>
              <li class="ecl-footer__list-item">
                Write to us via our <a href="../../example.html#contact-form" class="ecl-link ecl-link--standalone">contact form</a>
              </li>
              <li class="ecl-footer__list-item">
                Meet us at a <a href="../../example.html#local-office" class="ecl-link ecl-link--standalone">local EU office</a>
              </li>
            </ul>
            <div class="ecl-footer__column-title ecl-u-mt-l" id="footer-corporate-social-media">Find a social media account</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-social-media">
              <li class="ecl-footer__list-item">
                <a href="../../example.html#call" class="ecl-link ecl-link--standalone">Search for EU social media channels</a>
              </li>
            </ul>
          </div>
          <div class="ecl-footer__column ecl-col-md-8 ecl-footer__spaced-column">
            <div class="ecl-footer__column-title" id="footer-corporate-find-institution">EU institutions</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--long" aria-labelledby="footer-corporate-find-institution">
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Parliament</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Council</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Council of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Commission</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Court of Justice of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Central Bank</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Court of Auditors</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European External Action Service</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Economic and Social Committee</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Committee of the Regions</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Investment Bank</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Ombudsman</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Data Protection Supervisor</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Personnel Selection Office</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Publications Office of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Agencies</a>
              </li>
            </ul>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--short">
              <li class="ecl-footer__list-item">
                Search for <a href="../../example.html#call" class="ecl-link ecl-link--standalone">EU institutions</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ecl-footer__corporate-bottom">
      <div class="ecl-container">
        <div class="ecl-row ecl-footer__row">
          <div class="ecl-col">
            <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline">
              <li class="ecl-footer__list-item ecl-footer__publication-date">Last published 26/06/2018</li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Work for the EU</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Sitemap</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">About this site</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Language policy</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Legal notice</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Cookies</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</footer>

Handle: @ecl/eu-template-listing
Tags: template
Preview:
- With layout
- Component only
Filesystem Path: ../../src/systems/eu/eu-template/eu-template-listing/eu-template-listing.twig