28 #listing Listing

Component used to render list of entities, usually the landing page of a class. It defines the following modifiers:

  • Listing with no border
  • Listing with no stripe
  • Listing CTA
  • Listing line left
  • Listing no padding
  • Listing short spaced
Example
  • press release Tuesday, 21 April, 2015 - 12:01

    EU continues its strong support for the victims of Syria's crisis

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Label in upper case Another Label

    Architecto at deserunt, distinctio, eaque eos est et facere facilis.

    Reference
    Ares(2017)1178558
    Type
    Roadmap
    Department
    Directorate-General for Internal Market, Industry, Entrepreneurship and SMEs
    Feedback period
    8 March 2017 - 5 April 2017
More on Topic 
<div class="listing__wrapper">
  <ul class="listing ">
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-second">
          <img src="https://picsum.photos/300/200"/>
        </div>
        <div class="listing__column-main">
          <div class="meta">
            <span class="meta__item meta__item--type">press release</span>
            <span class="meta__item">Tuesday, 21 April, 2015 - 12:01</span>
          </div>
          <h3 class="listing__title">
            <a href="#" title="EU continues its strong support for the victims of Syria's crisis">EU continues its strong support for the victims of Syria's crisis</a>
          </h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-main">
          <span class="label label--highlight label--upper">Label in upper case</span>
          <span class="label label--highlight label--upper">Another Label</span>
          <h3 class="listing__title">
            <a href="#" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
          </h3>
          <div class="field">
            <div class="field__label">Reference</div>
            <div class="field__items">Ares(2017)1178558</div>
          </div>
          <div class="field">
            <div class="field__label">Type</div>
            <div class="field__items">Roadmap</div>
          </div>
          <div class="field">
            <div class="field__label">Department</div>
            <div class="field__items">Directorate-General for Internal Market, Industry, Entrepreneurship and SMEs</div>
          </div>
          <div class="field">
            <div class="field__label">Feedback period</div>
            <div class="field__items">8 March 2017 - 5 April 2017</div>
            <div class="field__items">
              <span class="icon icon--feedback icon--text-small">Feedback (1)</span>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
<div class="more-link">
  <a href="#" title="More on Topic">More on Topic</a>
</div>

28.1 #listing.2 Listing thumbnails

This is a modifier that applies changes to the listing__item element.

Example 
<div class="listing__wrapper">
  <ul class="listing listing--column-left">
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-second ">
          <img src="public/images/png/placeholder_female.png">
        </div>
        <div class="listing__column-main">
          <div class="meta">
            <span class="meta__item meta__item--type">DEPUTY DIRECTOR-GENERAL</span>
          </div>
          <h3 class="listing__title">
            <a href="#" title="Title link">María Angeles Benítez Salas</a>
          </h3>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-second ">
          <img src="public/images/png/placeholder_male.png">
        </div>
        <div class="listing__column-main">
          <div class="meta">
            <span class="meta__item meta__item--type">DEPUTY DIRECTOR-GENERAL</span>
          </div>
          <h3 class="listing__title">
            <a href="#" title="Title link">Mihail Dumitru</a>
          </h3>
        </div>
      </div>
    </li>
  </ul>
</div>

28.2 #listing.3 Date listings

Listing for event like entities.

Example 
<div class="listing__wrapper">
  <ul class="listing listing--agenda listing--column-left [modifier class]">
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-second">
          <div class="date-block">
            <span class="date-block__day-text">Mon</span>
            <span class="date-block__day">12</span>
            <span class="date-block__month">Oct</span>
          </div>
        </div>
        <div class="listing__column-main">
          <div class="meta">
            <span class="meta__item meta__item--type">college meeting</span>
          </div>
          <h3 class="listing__title">
            <a href="#" title="Meeting of the College of Commissioners">Meeting of the College of Commissioners</a>
          </h3>
          <div class="listing__author">Jean-Claude Juncker</div>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-second">
          <div class="date-block">
            <span class="date-block__day-text">Mon</span>
            <span class="date-block__day">12</span>
            <span class="date-block__month">Oct</span>
          </div>
        </div>
        <div class="listing__column-main">
          <div class="meta">
            <span class="meta__item meta__item--type">meeting</span>
          </div>
          <h3 class="listing__title">
            <a href="#" title="Meeting of the College of Commissioners">Meeting of the College of Commissioners</a>
          </h3>
          <div class="listing__author">Jean-Claude Juncker, Federica Mogherini</div>
        </div>
      </div>
    </li>
  </ul>
</div>

28.3 #listing.4 Title listings

Listing title is the component modifier used to style a list of titles.

Examples
.listing--title-medium
Listing title medium
.listing--title-big
Listing title big 
<ul class="listing listing--title [modifier class]">
  <li class="listing__item">
    <div class="listing__item__wrapper">
      <a href="#" class="listing__title" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
    </div>
  </li>
  <li class="listing__item">
    <div class="listing__item__wrapper">
      <a href="#" class="listing__title" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
    </div>
  </li>
  <li class="listing__item">
    <div class="listing__item__wrapper">
      <div class="meta [modifier class]">
        <span class="meta__item meta__item--type">news article</span>
        <span class="meta__item">17 September 2014</span>
      </div>
      <a href="#" class="listing__title" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
    </div>
  </li>
  <li class="listing__item">
    <div class="listing__item__wrapper">
      <div class="meta [modifier class]">
        <span class="meta__item meta__item--type">SERVICE DEPARTMENT</span>
        <span class="meta__item">07 March 2017</span>
      </div>
      <a href="#" class="listing__title" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
    </div>
  </li>
</ul>

28.4 #listing.6 Listings variants

Examples
.listing--short-spaced
Listing short spaced
.listing--line-left
Listing line left
.listing--no-border
Listing with no border
.listing--nostripe
Listing with no stripe
.listing--meta
Listing meta
.listing--no-padding-top
Listing with no padding on top 
<div class="listing__wrapper [modifier class]">
  <ul class="listing listing--teaser">
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-main">
          <h3 class="listing__title">
            <a href="#" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
          </h3>
          <p>Cras sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-main">
          <h3 class="listing__title">
            <a href="#" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
          </h3>
          <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Suspendisse pulvinar.</p>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper">
        <div class="listing__column-main">
          <span class="label label--highlight">Label content</span>
          <h3 class="listing__title">
            <a href="#" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
          </h3>
          <p>Cras sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
        </div>
      </div>
    </li>
  </ul>
</div>

28.5 #listing.7 Listing navigation

Navigational listing. The following example is a general one, using "Section" styling.

Example

Title for a listing

This is the description. EU strategy, its role in setting priorities, and its implementation through EU policy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel libero mauris.

Title with additional text

This is the description. EU strategy, its role in setting priorities, and its implementation through EU policy.

Introduction to EU law
Find EU legislation (EUR-Lex)
EU case law (EUR-Lex)
Summaries of EU legislation
Departments and agencies

Title with additional text

Introduction to EU law
Find EU legislation (EUR-Lex)
EU case law (EUR-Lex)
Summaries of EU legislation
Departments and agencies

Title, listing navigation.

Introduction to EU law
Find EU legislation (EUR-Lex)
EU case law (EUR-Lex)
Summaries of EU legislation
Related Item 1.
Related Item 2.

Contact

This is the description. EU strategy, its role in setting priorities, and its implementation through EU policy. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of a listing with links that breaks in two lines

Introduction to EU law
Find EU legislation (EUR-Lex)
EU case law (EUR-Lex)
Summaries of EU legislation, Summaries of EU legislation, Summaries of EU legislation, Summaries of EU legislation
Departments and agencies 
<div class="section">
  <div class="section__group section__group--row-three section--navigation">
    <!-- Title with additional text, links, and grandchilds section item. -->
    <div class="section__item">
      <div class="listing listing--navigation">
        <h2 class="listing__section-title"><a href="#" title="Title">Title for a listing</a></h2>
        <p class="listing__description">This is the description. EU strategy, its role in setting priorities, and its implementation through EU policy.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel libero mauris.
        </p>
      </div>
    </div>
    <div class="section__item">
      <div class="listing listing--navigation">
        <h2 class="listing__section-title"><a href="#" title="Title">Title with additional text</a></h2>
        <p class="listing__description">This is the description. EU strategy, its role in setting priorities, and its implementation through EU policy.</p>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Introduction to EU law">Introduction to EU law</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Find EU legislation (EUR-Lex)">Find EU legislation (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="EU case law (EUR-Lex)">EU case law (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Summaries of EU legislation</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Departments and agencies</a>
        </div>
      </div>
    </div>
    <!-- Title with additional text section item. -->
    <div class="section__item">
      <div class="listing listing--navigation">
        <h2 class="listing__section-title"><a href="#" title="Title">Title with additional text</a></h2>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Introduction to EU law">Introduction to EU law</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Find EU legislation (EUR-Lex)">Find EU legislation (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="EU case law (EUR-Lex)">EU case law (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Summaries of EU legislation</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Departments and agencies</a>
        </div>
      </div>
    </div>
    <!-- Title with additional text, links, without any grandchild section item. -->
    <div class="section__item">
      <div class="listing listing--navigation">
        <h2 class="listing__section-title"><a href="#" title="Title">Title, listing navigation.</a></h2>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Introduction to EU law">Introduction to EU law</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Find EU legislation (EUR-Lex)">Find EU legislation (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="EU case law (EUR-Lex)">EU case law (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Summaries of EU legislation</a>
        </div>
        <hr class="listing__separator">
        <div class="listing__item">
          <a href="#test4" class="listing__title" title="Related Item 1.">Related Item 1.</a>
        </div>
        <div class="listing__item">
          <a href="#test5" class="listing__title" title="Related Item 2.">Related Item 2.</a>
        </div>
      </div>
    </div>
    <!-- Title with additional text, links, and grandchilds section item. -->
    <div class="section__item">
      <div class="listing listing--navigation">
        <h2 class="listing__section-title"><a href="#" title="Contact">Contact</a></h2>
        <p class="listing__description">This is the description. EU strategy, its role in setting priorities, and its implementation through EU policy.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <!-- Title with additional text section item. -->
    <div class="section__item">
      <div class="listing listing--navigation">
        <h2 class="listing__section-title"><a href="#" title="Title">Title of a listing with links that breaks in two lines</a></h2>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Introduction to EU law">Introduction to EU law</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Find EU legislation (EUR-Lex)">Find EU legislation (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="EU case law (EUR-Lex)">EU case law (EUR-Lex)</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Summaries of EU legislation, Summaries of EU legislation, Summaries of EU legislation, Summaries of EU legislation</a>
        </div>
        <div class="listing__item">
          <a href="#" class="listing__title" title="Summaries of EU legislation">Departments and agencies</a>
        </div>
      </div>
    </div>
  </div>
</div>

28.6 #listing.8 Listing layouts

Listing layouts are implemented as modifiers of the listing__wrapper element which is actually the container of the component.

28.6.1 #listing.8.1 Listing two columns

This is a way to put two listings in two different columns.

Example 
<div class="listing__wrapper listing__wrapper--two-columns">
  <ul class="listing listing--title">
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#" title="Agriculture">Agriculture and rural development</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Banking and financial services</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Borders and security</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Business and industry</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Climate action</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Competition</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Consumers</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Culture and media</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Customs</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Digital economy and society</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Economy, finance&nbsp;and the euro</a></div>
    </li>
  </ul>
  <ul class="listing listing--title">
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Employment and social affairs</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Energy</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">EU enlargement</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Environment</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">European neighbourhood policy</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Food safety</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Foreign affairs and security policy</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Fraud prevention</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Humanitarian aid and civil protection</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">International cooperation and development</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Justice and fundamental rights</a></div>
    </li>
  </ul>
</div>

28.6.2 #listing.8.2 Listing three columns

This is a way to put three listings in three different columns.

Example 
<div class="listing__wrapper listing__wrapper--three-columns">
  <ul class="listing listing--teaser">
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="AAb aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">AAb aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
      </h3>
      <p>Cras sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </li>
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
      </h3>
      <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Suspendisse pulvinar.</p>
    </li>
  </ul>
  <ul class="listing listing--teaser">
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
      </h3>
      <p>Cras sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </li>
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
      </h3>
      <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Suspendisse pulvinar.</p>
    </li>
  </ul>
  <ul class="listing listing--teaser">
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
      </h3>
      <p>Cras sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </li>
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
      </h3>
      <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Suspendisse pulvinar.</p>
    </li>
  </ul>
</div>

28.6.3 #listing.8.3 Listing three columns

Listings with featured items in three columns.

Example
  • Energy Union tour..
    announcement 21 December 2016

    Energy Union tour..

    Vice-President Šefcovic is visiting EU countries to present the opportunities that the Energy Union offers for Europe. The list of countries below are those he will visit over the next few months. Each completed visit comes with a presentation of the benefits of the Energy Union for that particular country. More visits will be added over time.

  • Energy Union tour..
    announcement 21 December 2016

    Energy Union tour..

    More visits will be added over time Vice-President Šefcovic is visiting EU countries to present the opportunities that the Energy Union offers for Europe. The list of countries below of the benefits of the Energy Union for that particular country.

  • Energy Union tour..
    announcement 21 December 2016

    Energy Union tour..

    EU countries to present the opportunities that the Energy Union offers for Europe. The list of countries below are those he will visit over the next few months. Each completed visit comes with a presentation of the benefits of the Energy Union for that particular country. More visits will be added over time.

<div class="listing__wrapper listing__wrapper--three-columns">
  <ul class="listing listing--no-border listing--teaser">
    <li class="listing__item">
      <div class="featured-item">
        <a href="#" class="wrapping-link" title="Energy Union tour.."><span class="sr-only">Energy Union tour..</span></a>
        <div class="featured-item__image">
          <img src="https://picsum.photos/590/450"/>
        </div>
        <div class="featured-item__content">
          <div class="meta">
            <span class="meta__item meta__item--type">announcement</span>
            <span class="meta__item"><span class="date-display-single">21 December 2016</span></span>
          </div>
          <h3 class="featured-item__title">Energy Union tour..</h3>
          <p>Vice-President Šefcovic is visiting EU countries to present the opportunities that the Energy Union offers for Europe. The list of countries below are those he will visit over the next few months. Each completed visit comes with a presentation of the benefits of the Energy Union for that particular country. More visits will be added over time.</p>
        </div>
      </div>
    </li>
  </ul>
  <ul class="listing listing--no-border listing--teaser">
    <li class="listing__item">
      <div class="featured-item">
        <a href="#" class="wrapping-link" title="Energy Union tour.."><span class="sr-only">Energy Union tour..</span></a>
        <div class="featured-item__image">
          <img src="https://picsum.photos/590/450"/>
        </div>
        <div class="featured-item__content">
          <div class="meta">
            <span class="meta__item meta__item--type">announcement</span>
            <span class="meta__item"><span class="date-display-single">21 December 2016</span></span>
          </div>
          <h3 class="featured-item__title">Energy Union tour..</h3>
          <p>More visits will be added over time Vice-President Šefcovic is visiting EU countries to present the opportunities that the Energy Union offers for Europe. The list of countries below of the benefits of the Energy Union for that particular country.</p>
        </div>
      </div>
    </li>
  </ul>
  <ul class="listing listing--no-border listing--teaser">
    <li class="listing__item">
      <div class="featured-item">
        <a href="#" class="wrapping-link" title="Energy Union tour.."><span class="sr-only">Energy Union tour..</span></a>
        <div class="featured-item__image">
          <img src="https://picsum.photos/590/450"/>
        </div>
        <div class="featured-item__content">
          <div class="meta">
            <span class="meta__item meta__item--type">announcement</span>
            <span class="meta__item"><span class="date-display-single">21 December 2016</span></span>
          </div>
          <h3 class="featured-item__title">Energy Union tour..</h3>
          <p>EU countries to present the opportunities that the Energy Union offers for Europe. The list of countries below are those he will visit over the next few months. Each completed visit comes with a presentation of the benefits of the Energy Union for that particular country. More visits will be added over time.</p>
        </div>
      </div>
    </li>
  </ul>
</div>

28.6.4 #listing.8.4 Listing three columns (cards)

Listings with cards in three columns.

Example 
<div class="listing__wrapper listing__wrapper--three-columns">
  <ul class="listing listing--no-border">
    <li class="listing__item">
      <div class="card">
        <a href="#" class="wrapping-link" title="Energy Union tour">
          <span class="sr-only">Citizen's Dialogue in Bled</span>
        </a>
        <div class="card__header">
          <div class="card__image">
            <img src="https://picsum.photos/590/450"/>
            <div class="card__icon">
              <span class="icon icon--camera"></span>
            </div>
          </div>
          <div class="card__info">
            <div class="icon icon--before icon--calendar">Friday 13 April</div>
            <div class="icon icon--before icon--location">Athens, Greece</div>
          </div>
        </div>

        <div class="card__content">
          <h3 class="card__content__title">
            <a href="#" title="Citizen's Dialogue in Bled">
              Citizen's Dialogue in Bled with commissioners Violeta Bulc and Phil hogan
            </a>
          </h3>
          <span class="card__content__description">
            A dummy text probably going to be too long and therefore going to be trimmed with ellipsis at the end.
            A dummy text probably going to be too long and therefore going to be trimmed with ellipsis at the end
          </span>
        </div>

        <div class="card__footer">
          <span class="icon icon--livestreaming icon--before">live streaming available</span>
        </div>
        <div class="card__share">
          <div class="wtShareList wtWidgets wtEnd">
            <ul class="wtShareNetworks">
              <li class="">
                <a class="icon-social icon-social--twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;text=UEC%20-%20WIZARD" tabindex="0" title="Twitter" style="cursor: pointer;">Twitter</a>
              </li>
              <li class="">
                <a class="icon-social icon-social--facebook" href="http://www.facebook.com/share.php?u=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;t=UEC%20-%20WIZARD" tabindex="0" title="Facebook" style="cursor: pointer;">Facebook</a>
              </li>
              <li class="">
                <a class="icon-social icon-social--generic" href="https://mail.google.com/mail/?view=cm&amp;fs=1&amp;tf=1&amp;to=&amp;su=UEC%20-%20WIZARD&amp;body=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;zx=RANDOMCRAP&amp;shva=1&amp;disablechatbrowsercheck=1&amp;ui=1" tabindex="0" title="Gmail" style="cursor: pointer;">Gmail</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <ul class="listing listing--no-border">
    <li class="listing__item">
      <div class="card">
        <a href="#" class="wrapping-link" title="Energy Union tour">
          <span class="sr-only">Citizen's Dialogue in Yellow</span>
        </a>
        <div class="card__header">
          <div class="card__image">
            <img src="https://picsum.photos/590/450"/>
          </div>
          <div class="card__info">
            <div class="icon icon--before icon--calendar">Friday 21 April</div>
            <div class="icon icon--before icon--location">Athens, Greece</div>
          </div>
        </div>

        <div class="card__content">
          <h3 class="card__content__title">
            <a href="#" title="Citizen's Dialogue in Bled">
              A short title
            </a>
          </h3>
          <span class="card__content__description">
            With a super long text that will probably be trimmed with ellipsis at the end because we don't want the title and the text to occupy more than 150pixels, let's see where this text is going to be trimmed, then.
          </span>
        </div>

        <div class="card__share">
          <div class="wtShareList wtWidgets wtEnd">
            <ul class="wtShareNetworks">
              <li class="">
                <a class="icon-social icon-social--twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;text=UEC%20-%20WIZARD" tabindex="0" title="Twitter" style="cursor: pointer;">Twitter</a>
              </li>
              <li class="">
                <a class="icon-social icon-social--facebook" href="http://www.facebook.com/share.php?u=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;t=UEC%20-%20WIZARD" tabindex="0" title="Facebook" style="cursor: pointer;">Facebook</a>
              </li>
              <li class="">
                <a class="icon-social icon-social--generic" href="https://mail.google.com/mail/?view=cm&amp;fs=1&amp;tf=1&amp;to=&amp;su=UEC%20-%20WIZARD&amp;body=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;zx=RANDOMCRAP&amp;shva=1&amp;disablechatbrowsercheck=1&amp;ui=1" tabindex="0" title="Gmail" style="cursor: pointer;">Gmail</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <ul class="listing listing--no-border">
    <li class="listing__item">
      <div class="card">
        <a href="#" class="wrapping-link" title="Energy Union tour">
          <span class="sr-only">Citizen's Dialogue in Red</span>
        </a>
        <div class="card__header">
          <div class="card__image">
            <img src="https://picsum.photos/590/450"/>
          </div>
          <div class="card__info">
            <div class="icon icon--before icon--calendar">Friday 21 April</div>
            <div class="icon icon--before icon--location">Athens, Greece</div>
          </div>
        </div>

        <div class="card__content">
          <h3 class="card__content__title">
            <a href="#" title="Citizen's Dialogue in Bled">
              Citizen's Dialogue in Bled with commissioners Violeta Bulc and Phil hogan with some other attendees and friends.
            </a>
          </h3>
          <span class="card__content__description">
            A text that is going to be stripped, probably, because of the long title.
          </span>
        </div>

        <div class="card__share">
          <div class="wtShareList wtWidgets wtEnd">
            <ul class="wtShareNetworks">
              <li class="">
                <a class="icon-social icon-social--twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;text=UEC%20-%20WIZARD" tabindex="0" title="Twitter" style="cursor: pointer;">Twitter</a>
              </li>
              <li class="">
                <a class="icon-social icon-social--facebook" href="http://www.facebook.com/share.php?u=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;t=UEC%20-%20WIZARD" tabindex="0" title="Facebook" style="cursor: pointer;">Facebook</a>
              </li>
              <li class="">
                <a class="icon-social icon-social--generic" href="https://mail.google.com/mail/?view=cm&amp;fs=1&amp;tf=1&amp;to=&amp;su=UEC%20-%20WIZARD&amp;body=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;zx=RANDOMCRAP&amp;shva=1&amp;disablechatbrowsercheck=1&amp;ui=1" tabindex="0" title="Gmail" style="cursor: pointer;">Gmail</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

<!-- Webtools styles -->
<style type="text/css">
  .wtShareNetworks {
    margin: 0 !important;
    overflow: hidden;
    padding: 0 !important;
  }
  .wtShareNetworks li, .wtShareNetworks {
    list-style-type: none;
    text-indent: 0;
    background-image: none;
    list-style-image: none !important;
  }
  .wtShareNetworks li {
    display: inline-block;
    height: 40px;
    width: 40px;
  }
  .wtShareNetworks a {
    font-size: 0pt;
    text-indent: -9999px;
  }
</style>

<!-- Example script. -->
<script type="application/json">
{
  "service": "share",
  "popup": false,
  "icon": true,
  "to": [
    "more",
    "twitter",
    "facebook"
  ],
  "selection": false
}
</script>

<!-- Script for the text ellipsis -->
<script>
  jQuery('.card__content').clamp();
  jQuery(window).on('resize', Superclamp.reclampAll);
</script>

28.6.5 #listing.8.5 Listing item two rows

This is a way to put two listing_item in the same row.

Example 
<div class="listing__wrapper listing__wrapper--row-two">
  <ul class="listing listing--no-border listing--teaser">
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
      </h3>
      <p>Cras sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </li>
    <li class="listing__item">
      <h3 class="listing__title">
        <a href="#" title="Architecto at deserunt, distinctio, eaque eos est et facere facilis.">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</a>
      </h3>
      <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Suspendisse pulvinar.</p>
    </li>
  </ul>
</div>

28.6.6 #listing.8.6 Listing item two rows with spoke blocks

Example

  • A spoke block in action

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula viverra, ullamcorper lorem ac, consectetur felis. Donec eleifend quis dolor in ultricies. Aenean lorem dolor, bibendum eget sem nec, pellentesque eleifend mi.

  • A title for a spoke block, it is just a title but this time it is a very long, long one...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula viverra, ullamcorper lorem ac, consectetur felis. Donec eleifend quis dolor in ultricie

    • A link in a spoke block
    • A list item in a spoke block with a significantly long text that should break in two lines.

  • A title for a spoke block without any link

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula viverra, ullamcorper lorem ac, consectetur felis. Donec eleifend quis dolor in ultricies. Aenean lorem dolor, bibendum eget sem nec, pellentesque eleifend mi. In finibus ante sapien, vel sollicitudin lorem vehicula eu. Quisque lobortis luctus placerat. In dictum turpis id urna imperdiet, eu viverra odio feugiat. Maecenas maximus est et neque tristique, at consectetur ex pharetra. Pellentesque lacinia molestie quam vel volutpat. Maecenas pellentesque ultricies metus, quis dapibus dolor ornare at

  • A spoke block title without a link

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="listing__wrapper listing__wrapper--row-two">
  <ul class="listing">
    <li class="listing__item listing__item--spoke-block">
      <div class="listing__spoke-block">
        <h3 class="listing__title">
          <a href="#">A spoke block in action</a>
        </h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula viverra, ullamcorper lorem ac, consectetur felis. Donec eleifend quis dolor in ultricies. Aenean lorem dolor, bibendum eget sem nec, pellentesque eleifend mi.</p>

        <ul>
          <li><a href="#">A link in a spoke block</a></li>
          <li>A list item in a spoke block</li>
          <li>And another list item</li>
        </ul>
      </div>
    </li>

    <li class="listing__item listing__item--spoke-block">
      <div class="listing__spoke-block">
        <h3 class="listing__title">
          <a href="#">A title for a spoke block, it is just a title but this time it is a very long, long one...</a>
        </h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula viverra, ullamcorper lorem ac, consectetur felis. Donec eleifend quis dolor in ultricie</p>

        <ul>
          <li><a href="#">A link in a spoke block</a></li>
          <li>A list item in a spoke block with a significantly long text that should break in two lines.</li>
        </ul>
      </div>
    </li>

    <li class="listing__item listing__item--spoke-block">
      <div class="listing__spoke-block">
        <h3 class="listing__title">A title for a spoke block without any link</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ligula viverra, ullamcorper lorem ac, consectetur felis. Donec eleifend quis dolor in ultricies. Aenean lorem dolor, bibendum eget sem nec, pellentesque eleifend mi. In finibus ante sapien, vel sollicitudin lorem vehicula eu. Quisque lobortis luctus placerat. In dictum turpis id urna imperdiet, eu viverra odio feugiat. Maecenas maximus est et neque tristique, at consectetur ex pharetra. Pellentesque lacinia molestie quam vel volutpat. Maecenas pellentesque ultricies metus, quis dapibus dolor ornare at</p>
      </div>
    </li>

    <li class="listing__item listing__item--spoke-block">
      <div class="listing__spoke-block">
        <h3 class="listing__title">A spoke block title without a link</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

        <ul>
          <li><a href="#">A link in a spoke block</a></li>
          <li>A list item in a spoke block</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

28.6.7 #listing.8.7 Listing item three rows

This is a way to put three listing_item in the same row.

Example 
<div class="listing__wrapper listing__wrapper--row-three equal-height listing--teaser__wrapper equal-height-blocks-processed">
  <ul class="listing listing--no-border listing--teaser">
    <li class="listing__item">
      <div about="white-paper-future-europe-avenues-unity-eu-27_en" class="node">
        <div class="listing__column-main">
          <div class="highlighted-item">
            <a href="#" class="wrapping-link" title="White Paper on the future of Europe">
              <span class="sr-only">White Paper on the future of Europe</span>
            </a>
            <div class="highlighted-item__image">
              <img class="img-responsive" src="https://picsum.photos/360/240"/>
            </div>
            <div class="highlighted-item__content">
              <h3>White Paper on the future of Europe</h3>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div about="content/european-solidarity-corps_en" class="node">
        <div class="listing__column-main">
          <div class="highlighted-item">
            <a href="#" class="wrapping-link" title="European Solidarity Corps">
              <span class="sr-only">European Solidarity Corps</span>
            </a>
            <div class="highlighted-item__image">
              <img class="img-responsive" src="https://picsum.photos/360/240"/>
            </div>
            <div class="highlighted-item__content">
              <h3>European Solidarity Corps</h3>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="listing__item">
      <div about="content/managing-refugee-crisis_en" class="node">
        <div class="listing__column-main">
          <div class="highlighted-item">
            <a href="#" class="wrapping-link" title="Migration">
              <span class="sr-only">Migration</span>
            </a>
            <div class="highlighted-item__image">
              <img class="img-responsive" src="https://picsum.photos/360/240"/>
            </div>
            <div class="highlighted-item__content">
              <h3>Migration</h3>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

28.6.8 #listing.8.8 Listing item three rows (title only)

This is a way to put three listing_item in the same row.

Examples
.listing--title-only-regular
Title as regular 
<div class="listing__wrapper listing__wrapper--row-three">
  <ul class="listing listing--title-only [modifier class]">
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#" title="Agriculture">Agriculture and rural development</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Banking and financial services</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Borders and security</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Business and industry</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Climate action</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Competition</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Consumers</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Culture and media</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Customs</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Digital economy and society</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title" href="#">Economy, finance&nbsp;and the euro</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Employment and social affairs</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Energy</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">EU enlargement</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Environment</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">European neighbourhood policy</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Food safety</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Foreign affairs and security policy</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Fraud prevention</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Humanitarian aid and civil protection</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">International cooperation and development</a></div>
    </li>
    <li class="listing__item">
      <div class="listing__item__wrapper"><a class="listing__title is-internal" href="#">Justice and fundamental rights</a></div>
    </li>
  </ul>
</div>

28.6.9 #listing.8.9 Listing item one column

Example 
<div class="listing__wrapper listing__wrapper--one-column">
  <ul class="listing">
    <li class="listing__item">
      <div class="listing__spoke-block">
        <h3 class="listing__title">
          <a href="#">A spoke block title with a link</a>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </li>
    <li class="listing__item">
      <div class="listing__spoke-block">
        <h3 class="listing__title">A spoke block title without a link</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <ul>
          <li><a href="#">A link in a spoke block</a></li>
          <li>A list item in a spoke block</li>
        </ul>
      </div>
    </li>
  </ul>
</div>