For when we need to show a list of items, for news articles, events listings, search results, and so on.

Simplest example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">An example listing</h2>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">An example listing</h2>
    </a>
  </li>

</ul>

Simple example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">An example listing</h2>
      <div class="c-listings-item__description">
        A description of some sort which gives the reader an idea of what the listing is about.
      </div>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">An example listing</h2>
      <div class="c-listings-item__description">
        A description of some sort which gives the reader an idea of what the listing is about.
      </div>
    </a>
  </li>

</ul>

News article example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--newspaper-o"></i> news</div>
      <h2 class="c-listings-item__title">An example news listing</h2>
      <time datetime="27 January 2018" class="c-listings-item__date">27 January 2018</time>
      <div class="c-listings-item__description">
        A description of some sort which gives the reader an idea of what the listing is about.
      </div>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--newspaper-o"></i> news</div>
      <h2 class="c-listings-item__title">An example news listing</h2>
      <time datetime="27 January 2018" class="c-listings-item__date">27 January 2018</time>
      <div class="c-listings-item__description">
        A description of some sort which gives the reader an idea of what the listing is about.
      </div>
    </a>
  </li>

</ul>

News with media example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <figure class="c-listings-item__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--newspaper-o"></i> news</div>
        <h2 class="c-listings-item__title">An example news listing</h2>
        <time datetime="27 January 2018" class="c-listings-item__date">27 January 2018</time>
        <div class="c-listings-item__description">
          A description of some sort which gives the reader an idea of what the listing is about. A major public lecture in York's historic Merchant Adventurers' Hall will explore the explosive and exciting combination of the visual arts and the sport of wrestling.
        </div>
      </div>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <figure class="c-listings-item__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--newspaper-o"></i> news</div>
        <h2 class="c-listings-item__title">An example news listing</h2>
        <time datetime="27 January 2018" class="c-listings-item__date">27 January 2018</time>
        <div class="c-listings-item__description">
          A description of some sort which gives the reader an idea of what the listing is about. A major public lecture in York's historic Merchant Adventurers' Hall will explore the explosive and exciting combination of the visual arts and the sport of wrestling.
        </div>
      </div>
    </a>
  </li>

</ul>

Event example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--calendar-o"></i> event</div>
      <h2 class="c-listings-item__title">An example event listing</h2>
      <time datetime="6 February 2018 10:00am" class="c-listings-item__date">6 February 2018 10:00am</time>
      <div class="c-listings-item__description">
        A description of some sort of event that is happening somewhere and is about something.
      </div>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--calendar-o"></i> event</div>
      <h2 class="c-listings-item__title">An example event listing</h2>
      <time datetime="6 February 2018 10:00am" class="c-listings-item__date">6 February 2018 10:00am</time>
      <div class="c-listings-item__description">
        A description of some sort of event that is happening somewhere and is about something.
      </div>
    </a>
  </li>

</ul>

Event with media example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <figure class="c-listings-item__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--calendar-o"></i> event</div>
        <h2 class="c-listings-item__title">An example news listing</h2>
        <time datetime="6 February 2018 10:00am" class="c-listings-item__date">6 February 2018 10:00am</time>
        <div class="c-listings-item__description">
          A description of some sort which gives the reader an idea of what the listing is about.
        </div>
      </div>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <figure class="c-listings-item__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--calendar-o"></i> event</div>
        <h2 class="c-listings-item__title">An example news listing</h2>
        <time datetime="6 February 2018 10:00am" class="c-listings-item__date">6 February 2018 10:00am</time>
        <div class="c-listings-item__description">
          A description of some sort which gives the reader an idea of what the listing is about.
        </div>
      </div>
    </a>
  </li>

</ul>

Generic search result example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">Art on campus - About the University</h2>
      <div class="c-listings-item__description">
        From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.
      </div>
      <p class="c-listings-item__url"> york.ac.uk/about/campus/art/</p>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">Art on campus - About the University</h2>
      <div class="c-listings-item__description">
        From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.
      </div>
      <p class="c-listings-item__url"> york.ac.uk/about/campus/art/</p>
    </a>
  </li>

</ul>

Best bet example (highlighted result)

<ul class="c-listings">
  <li class="c-listings-item c-listings-item--highlighted">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">Art on campus - About the University</h2>
      <div class="c-listings-item__description">
        From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.
      </div>
      <p class="c-listings-item__url"> york.ac.uk/about/campus/art/</p>
    </a>
  </li>

  <li class="c-listings-item c-listings-item--highlighted">
    <a class="c-listings-item__link" href="#">
      <h2 class="c-listings-item__title">Art on campus - About the University</h2>
      <div class="c-listings-item__description">
        From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.
      </div>
      <p class="c-listings-item__url"> york.ac.uk/about/campus/art/</p>
    </a>
  </li>

</ul>

Search result (news article) example

<ul class="c-listings">
  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--newspaper-o"></i> news</div>
      <h2 class="c-listings-item__title">Wrestling with art</h2>
      <time datetime="27 January 2018" class="c-listings-item__date">27 January 2018</time>
      <div class="c-listings-item__description">
        A major public lecture in York's historic Merchant Adventurers' Hall will explore the explosive and exciting combination of the visual arts and the sport of wrestling.
      </div>
      <p class="c-listings-item__url"> york.ac.uk/news-and-events/news/2012/events/wrestling-with-art/</p>
    </a>
  </li>

  <li class="c-listings-item ">
    <a class="c-listings-item__link" href="#">
      <div class="c-listings-item__label"><i class="c-icon c-icon--before c-icon--newspaper-o"></i> news</div>
      <h2 class="c-listings-item__title">Wrestling with art</h2>
      <time datetime="27 January 2018" class="c-listings-item__date">27 January 2018</time>
      <div class="c-listings-item__description">
        A major public lecture in York's historic Merchant Adventurers' Hall will explore the explosive and exciting combination of the visual arts and the sport of wrestling.
      </div>
      <p class="c-listings-item__url"> york.ac.uk/news-and-events/news/2012/events/wrestling-with-art/</p>
    </a>
  </li>

</ul>

Options

Atoms

  • listings-item
    • title: the title of the list (required)
    • link: the URL of the listing target (required)
    • description: a description of the listing
    • type: what kind of listing is it? News, Event, Search result, etc.
    • icon: an icon to display before 'type'
    • date: the date and time of an event or a news article published date
    • media: an image that can accompany a news article
    • mediaText: alt text for the an image (for use with 'media')
    • url: the URL to display on a listing if it is a search result
    • highlighted: if the listing items should be highlighted (see Best Bet section above)

Molecules

  • listings
    • atoms: an array of listings-item atoms