EU System

Listings

Documentation • Demo

Listings

Demo

To have an overview of all possible listings layouts, check the layouts page in template section.

Default listings

Where and how to use this component

Users need a way to have an overview of content from similar data types.

Filters and pagination

If you are displaying listings on a separate dedicated page, you can use Filters and Pagers to give users the possibility to narrow down and search for items.

When to use this component

Use this component when you want to display content from similar data types. Either on a separate dedicated page or embedded in a detail page.

Date listings

Where and how to use this component

Users need a way to have an overview of events, with a clear overview of when the events are taking place.

When to use this component

Use this component when you want to display a list of events. Either on a separate dedicated page or embedded in a detail page.

Thumbnail listings

Where and how to use this component

Users need a way to have an overview of content from similar data types, while also having a visual clue on what the information is about.

When to use this component

Use this component when you want to display content from similar data types with a visual clue. Either on a separate dedicated page or embedded in a detail page.

Highlighted listings

Where and how to use this component

Users need a way to see highlights in a more visual way

  • landing pages/homepages
  • bottom of the page
  • in 3 columns, no more than 2 lines

When to use this component

Use this component if you want to display highlight content in a more visual way.

  • it can be news, events or campaigns

Do not use this component

  • on detail pages

When to use

Show hierarchy of content and create a parent-child structure of links.

When not to use

When you want to display temporary information that it’s not part of the site’s architecture

Layout

The navigational list views are arranged with three columns.

{#
  Parameters:
    - "variant" (string) (default: ''): can be '', 'two-columns', 'three-columns'
    - "items" (array) (default: []): collection of ecl-list-item
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-listing' with {
  'variant': variant|default(''),
  'items': items|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'eu'
} only %}
 
/* One column listing */
{
  "items": [
    {
      "variant": "date",
      "date": {
        "week_day": "Tue",
        "day": "07",
        "month": "Sep"
      },
      "href": "../../example.html#listing-date-1",
      "screen_reader": "Event 07/09, Bucharest, Romania",
      "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",
      "screen_reader": "Event 08/09, Kraków, Poland",
      "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",
      "screen_reader": "Event 14/09, Tallin, Estonia",
      "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": "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": "block",
      "title": "Climate action",
      "detail": "In eu consectetur aute incididunt quis quis do labore in ut consectetur."
    }
  ]
}


/* Two columns listing */
{
  "variant": "two-columns",
  "items": [
    {
      "metas": [
        "Director-General"
      ],
      "screen_reader": "List item: Director-General John Doe",
      "title": "John Doe",
      "href": "../../example.html#listing-thumb-1",
      "primary_image": {
        "src": "../../assets/demo_images/default_profile_image.png",
        "alt": "Director-General John Doe"
      }
    },
    {
      "metas": [
        "Deputy Director-General"
      ],
      "screen_reader": "List item: Deputy Director-General Jane Doe",
      "title": "Jane Doe",
      "href": "../../example.html#listing-thumb-2",
      "primary_image": {
        "src": "../../assets/demo_images/default_profile_image.png",
        "alt": "Deputy Director-General Jane Doe"
      }
    },
    {
      "metas": [
        "Acting Deputy Director-General"
      ],
      "screen_reader": "List item: Acting Deputy Director-General Jack Doe",
      "title": "Jack Doe",
      "href": "../../example.html#listing-thumb-3",
      "primary_image": {
        "src": "../../assets/demo_images/default_profile_image.png",
        "alt": "Acting Deputy Director-General Jack Doe"
      }
    },
    {
      "metas": [
        "Deputy Director-General"
      ],
      "screen_reader": "List item: Deputy Director-General Bill Doe",
      "title": "Bill Doe",
      "href": "../../example.html#listing-thumb-4",
      "primary_image": {
        "src": "../../assets/demo_images/default_profile_image.png",
        "alt": "Deputy Director-General"
      }
    },
    {
      "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": "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."
    }
  ]
}


/* Three columns listing */
{
  "variant": "three-columns",
  "items": [
    {
      "screen_reader": "List item: Business, Economy, Euro",
      "title": "Business, Economy, Euro",
      "href": "../../example.html#listing-three-columns-1",
      "detail": "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
    },
    {
      "screen_reader": "List item: About the European Union",
      "title": "About the European Union",
      "href": "../../example.html#listing-three-columns-2",
      "detail": "The EU and its institutions, how to visit and work at the EU."
    },
    {
      "screen_reader": "List item: Live, Work, Travel in EU",
      "title": "Live, Work, Travel in EU",
      "href": "../../example.html#listing-three-columns-3",
      "detail": "Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture."
    },
    {
      "screen_reader": "List item: Funding, Tenders",
      "title": "Funding, Tenders",
      "href": "../../example.html#listing-three-columns-4",
      "detail": "EU funding, grants, tenders, and how to apply."
    },
    {
      "screen_reader": "List item: Law",
      "title": "Law",
      "href": "../../example.html#listing-three-columns-5",
      "detail": "EU law and judgments, how EU law is applied, public consultations, data protection, infringements, fraud, serious crime."
    },
    {
      "screen_reader": "List item: Research and innovation",
      "title": "Research and innovation",
      "href": "../../example.html#listing-three-columns-6",
      "detail": "Research funding, partners, results, and EU action to promote innovation."
    },
    {
      "variant": "highlight",
      "screen_reader": "List item: State of the European Union 2017",
      "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",
      "screen_reader": "List item: White paper on the future of Europe",
      "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",
      "screen_reader": "List item: EU solidarity",
      "title": "EU solidarity",
      "primary_image": {
        "src": "../../assets/demo_images/nature-demo-3.jpg",
        "alt": "EU solidarity"
      }
    },
    {
      "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": "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."
    }
  ]
}


<!-- One column listing -->
<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">Event 07/09, Bucharest, Romania</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">Event 08/09, Kraków, Poland</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">Event 14/09, Tallin, Estonia</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--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--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>
</ul>


<!-- Two columns listing -->
<ul class="ecl-listing ecl-listing--two-columns">

  <li class="ecl-list-item">
    <a href="../../example.html#listing-thumb-1" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Director-General John Doe</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-thumb-2" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Deputy Director-General Jane Doe</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-thumb-3" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Acting Deputy Director-General Jack Doe</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>

  <li class="ecl-list-item">
    <a href="../../example.html#listing-thumb-4" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Deputy Director-General Bill Doe</div>
      <div class="ecl-list-item__primary">

        <img class="ecl-image ecl-image--fluid" alt="Deputy Director-General" 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">Bill 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 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--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>
</ul>


<!-- Three columns listing -->
<ul class="ecl-listing ecl-listing--three-columns">

  <li class="ecl-list-item">
    <a href="../../example.html#listing-three-columns-1" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Business, Economy, Euro</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-three-columns-2" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: About the European Union</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-three-columns-3" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Live, Work, Travel in EU</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-three-columns-4" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Funding, Tenders</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-three-columns-5" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Law</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-three-columns-6" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item: Research and innovation</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>

  <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: State of the European Union 2017</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: White paper on the future of Europe</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: EU solidarity</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>

  <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--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>
  • Content: 
    /**
 * Listings
 * @define listing; weak
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-listing/generic-component-listing';

// Use generic mixin
@include exports('eu-component-listing') {
  @include ecl-listing();
}
  • URL: /components/raw/eu-component-listing/eu-component-listing.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-listing/eu-component-listing.scss
  • Size: 266 Bytes
  • Handle: @ecl/eu-component-listing
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-listing/eu-component-listing.twig