Europa Component Library

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.

Read About Pool listings to find out more about where and how to use listings in your website.

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.

Read About Pool listings to find out more about where and how to use listings in your website.

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.

Read About Pool listings to find out more about where and how to use listings in your website.

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
{#
  Common parameters:
    - "variant" (string): can be empty, 'date', date-2 (default: empty)
    - "items" (array): array of ecl-list-items
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ecl-listing' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ecl-listing--' ~ variant %}
{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

<ul class="{{ _css_class }}" {{ _extra_attributes|raw }}>

{% for item in items %}

  {% include '@ec-europa/ecl-list-items' with item %}

{% endfor %}

</ul>
 
/* One column listing */
{
  "items": [
    {
      "variant": "date",
      "date": {
        "week_day": "Tue",
        "day": "07",
        "month": "Sep"
      },
      "href": "#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": "#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": "#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>"
    }
  ]
}


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


/* Three columns listing */
{
  "variant": "three-columns",
  "items": [
    {
      "screen_reader": "List item: Business, Economy, Euro",
      "title": "Business, Economy, Euro",
      "href": "#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": "#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": "#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": "#listing-three-columns-4",
      "detail": "EU funding, grants, tenders, and how to apply."
    },
    {
      "screen_reader": "List item: Law",
      "title": "Law",
      "href": "#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": "#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"
      }
    }
  ]
}


<!-- One column listing -->
<ul class="ecl-listing">

  <li class="ecl-list-item ecl-list-item--date">
    <a href="#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 ecl-date-block--date">
          <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">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--date">
          </div>
        </div>

        <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="#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 ecl-date-block--date">
          <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">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--date">
          </div>
        </div>

        <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="#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 ecl-date-block--date">
          <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">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--date">
          </div>
        </div>

        <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>

</ul>


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

  <li class="ecl-list-item ecl-list-item--two-columns">
    <a href="#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 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 ecl-meta--two-columns">

            <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 ecl-list-item--two-columns">
    <a href="#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 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 ecl-meta--two-columns">

            <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 ecl-list-item--two-columns">
    <a href="#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 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 ecl-meta--two-columns">

            <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>


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

  <li class="ecl-list-item ecl-list-item--three-columns">
    <a href="#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 class="ecl-meta ecl-meta--three-columns">
          </div>
        </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 ecl-list-item--three-columns">
    <a href="#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 class="ecl-meta ecl-meta--three-columns">
          </div>
        </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 ecl-list-item--three-columns">
    <a href="#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 class="ecl-meta ecl-meta--three-columns">
          </div>
        </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 ecl-list-item--three-columns">
    <a href="#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 class="ecl-meta ecl-meta--three-columns">
          </div>
        </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 ecl-list-item--three-columns">
    <a href="#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 class="ecl-meta ecl-meta--three-columns">
          </div>
        </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 ecl-list-item--three-columns">
    <a href="#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 class="ecl-meta ecl-meta--three-columns">
          </div>
        </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 alt="State of the European Union 2017" src="../../assets/demo_images/nature-demo-1.jpg" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight">
          </div>
        </div>

        <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 alt="White paper on the future of Europe" src="../../assets/demo_images/nature-demo-2.jpg" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight">
          </div>
        </div>

        <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 alt="EU solidarity" src="../../assets/demo_images/nature-demo-3.jpg" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight">
          </div>
        </div>

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

.ecl-listing {
  margin: 0;
  padding-left: 0;
}

// Two columns
.ecl-listing--two-columns {
  display: flex;
  flex-wrap: wrap;

  .ecl-list-item {
    border-width: 0;
    flex-grow: 1;
    width: 100%;
  }
}

@include ecl-media-breakpoint-up(lg) {
  .ecl-listing--two-columns {
    .ecl-list-item {
      width: 50%;
    }

    .ecl-list-item__link {
      padding-left: map-get($ecl-spacing, 's');
      padding-right: map-get($ecl-spacing, 's');
    }
  }
}

// Three columns
.ecl-listing--three-columns {
  display: flex;
  flex-wrap: wrap;

  .ecl-list-item {
    border-width: 0;
    flex-grow: 1;
    width: 100%;
  }
}

@include ecl-media-breakpoint-up(lg) {
  .ecl-listing--three-columns {
    .ecl-list-item {
      width: 33%;
    }

    .ecl-list-item__link {
      padding-left: map-get($ecl-spacing, 's');
      padding-right: map-get($ecl-spacing, 's');
    }
  }
}
  • URL: /components/raw/ecl-listings/ecl-listings.scss
  • Filesystem Path: framework/components/ecl-listings/ecl-listings.scss
  • Size: 929 Bytes
  • Handle: @ec-europa/ecl-listings
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ecl-listings/ecl-listings.twig