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
Single event - linking to further details
Event list

Single event

A list can consist of a single event.

Example

Piano Masterclass

Entry is free

Date: Tuesday 18 September 2018
Time: 7.30pm to 9.00pm
Location: Younger Hall

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

Single event - linking to further details

An event can link to further details of that event.

Example

Cancelled

Piano Masterclass

Date: Tuesday 18 September 2018
Time: 7.30pm to 9.00pm
Location: Younger Hall
Attend: 10 spaces available

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

Limited access

Piano Masterclass

Date: Tuesday 18 September 2018
Time: 7.30pm to 9.00pm
Location: Younger Hall

Bike to Work Breakfast

Date: Friday 21 September 2018
Time: 8.00am to 9.00am
Location: Rector's Café

Study Abroad Fair

Date: Wednesday 3 October 2018 to Friday 5 October 2018
Location: Students' Association

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.

Cancelled

An Introduction to The Alexander Technique with Heather Coates

Date: Saturday 6 October 2018
Location: Younger Hall

Early Career Women Network Meet-up

Date: Monday 29 October 2018 to Tuesday 30 October 2018
Location: Hebdomadar's Room

Choral Evensong

Part of the choral season of 2018

Date: Wednesday 7 November 2018
Time: 7.45pm
Location: St Salvator's Chapel

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