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
-
An example listing
A description of some sort which gives the reader an idea of what the listing is about. -
An example listing
A description of some sort which gives the reader an idea of what the listing is about.
<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
-
news
An example news listing
A description of some sort which gives the reader an idea of what the listing is about. -
news
An example news listing
A description of some sort which gives the reader an idea of what the listing is about.
<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
-
news
An example news listing
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. -
news
An example news listing
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.
<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
-
event
An example event listing
A description of some sort of event that is happening somewhere and is about something. -
event
An example event listing
A description of some sort of event that is happening somewhere and is about something.
<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
-
event
An example news listing
A description of some sort which gives the reader an idea of what the listing is about. -
event
An example news listing
A description of some sort which gives the reader an idea of what the listing is about.
<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
-
Art on campus - About the University
From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.york.ac.uk/about/campus/art/
-
Art on campus - About the University
From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.york.ac.uk/about/campus/art/
<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)
-
Art on campus - About the University
From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.york.ac.uk/about/campus/art/
-
Art on campus - About the University
From the Norman Rea Gallery to the various sculptures, the campus at York provides a wide variety of art, in all its forms.york.ac.uk/about/campus/art/
<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
-
news
Wrestling with art
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.york.ac.uk/news-and-events/news/2012/events/wrestling-with-art/
-
news
Wrestling with art
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.york.ac.uk/news-and-events/news/2012/events/wrestling-with-art/
<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