Event list

Events can be displayed as a list of individual events. If images are required then consider using the article list or event tile grid patterns.

Rules for event list

  • Event titles should not exceed 60 characters.
  • A secondary title may be included to support the event title. This should not exceed 60 characters.
  • The date of the event must be included.
  • The time of the event should be included if known.
  • The location of the event should be included if known.
  • Information on limited attendance spaces should be included if known.
  • A tag may be added to an event to show its status.
  • An optional description may be used to provide additional key information about the event.
  • The optional description must be plain text only and contain no additional formatting or links.
  • The optional description should have a maximum length of 160 characters. If additional details are required this should be added to a different page and linked to from the event listing.

Options available


Single event

A list can consist of a single event.

Example
Code
<!-- Begin pattern: event-list //-->
<div class="event-listing expanded-link-wrapper">
<div class="event-listing__details">
    <h3 class="event-listing__heading">Piano Masterclass</h3>
    </div>
    <div class="event-listing__subtitle">Entry is free</div>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Tuesday 18 September 2018</dd>
        <dt class="metadata-list--full"><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt>
        <dd class="metadata-list--full">7.30pm to 9.00pm</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Younger Hall</dd>
</dl>
</div>
<!-- End pattern: event-list //-->

An event can link to further details of that event.

Example
Code
<!-- Begin pattern: event-list //-->
<div class="event-listing expanded-link-wrapper">
    <span class="sta-tag sta-tag--danger font-scale-minus-1">Cancelled</span>
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">Piano Masterclass</h3>
    </a>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Tuesday 18 September 2018</dd>
        <dt class="metadata-list--full"><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt>
        <dd class="metadata-list--full">7.30pm to 9.00pm</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Younger Hall</dd>
        <dt class="metadata-list--full"><i class="far fa-user" aria-hidden="true" title="Attend"></i><span class="sr-only">Attend</span></dt>
        <dd class="metadata-list--full">10 spaces available</dd>
</dl>
</div>
<!-- End pattern: event-list //-->

Event list

Events can be combined to make a list. This example shows a list of events with a variety of available information.

  • Events should be ordered in a list by date.
  • If an event in a list is linked then all other events must also be linked.
Example
Code
<!-- Begin pattern: event-list //-->
<div class="event-listing expanded-link-wrapper">
    <span class="sta-tag sta-tag--info font-scale-minus-1">Limited access</span>
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">Piano Masterclass</h3>
    </a>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Tuesday 18 September 2018</dd>
        <dt class="metadata-list--full"><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt>
        <dd class="metadata-list--full">7.30pm to 9.00pm</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Younger Hall</dd>
</dl>
</div>
<div class="event-listing expanded-link-wrapper">
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">Bike to Work Breakfast</h3>
    </a>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Friday 21 September 2018</dd>
        <dt class="metadata-list--full"><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt>
        <dd class="metadata-list--full">8.00am to 9.00am</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Rector&#x27;s Café</dd>
</dl>
</div>
<div class="event-listing expanded-link-wrapper">
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">Study Abroad Fair</h3>
    </a>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Wednesday 3 October 2018 to Friday 5 October 2018</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Students&#x27; Association</dd>
</dl>
    <div class="event-listing__description">Are you in second year and thinking about studying abroad in 2019-2020? If so, come along to our Study Abroad Fair where there will be a presentation followed by a fair during which you can meet other students who have studied abroad.</div>
</div>
<div class="event-listing expanded-link-wrapper">
    <span class="sta-tag sta-tag--danger font-scale-minus-1">Cancelled</span>
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">An Introduction to The Alexander Technique with Heather Coates</h3>
    </a>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Saturday 6 October 2018</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Younger Hall</dd>
</dl>
</div>
<div class="event-listing expanded-link-wrapper">
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">Early Career Women Network Meet-up</h3>
    </a>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Monday 29 October 2018 to Tuesday 30 October 2018</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">Hebdomadar&#x27;s Room</dd>
</dl>
</div>
<div class="event-listing expanded-link-wrapper">
<a href="#" class="event-listing__details">
    <h3 class="event-listing__heading">Choral Evensong</h3>
    </a>
    <div class="event-listing__subtitle">Part of the choral season of 2018</div>
<dl class="metadata-list inherit--colour">
        <dt class="metadata-list--full"><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt>
        <dd class="metadata-list--full">Wednesday 7 November 2018</dd>
        <dt class="metadata-list--full"><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt>
        <dd class="metadata-list--full">7.45pm</dd>
        <dt class="metadata-list--full"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt>
        <dd class="metadata-list--full">St Salvator&#x27;s Chapel</dd>
</dl>
</div>
<!-- End pattern: event-list //-->