Event tile grid

Event tiles are used to promote featured events on a homepage.

Rules for event tile grid

Must have a solid white or light grey background colour.
Must have a heading.
Option to include a maximum of two call-to-action buttons.
There must be a maximum of six event tiles in a grid. Alternative patterns that allow more than six are article list and event list.
All event tiles must have an associated good quality image.
Event tile images must be 360px wide by 240px high.
Event titles should not exceed 60 characters.
The date of the event must be included.
The location of the event should be included if known.
A tag may be added to an event to show its status.

Options available

Event tile grid
Event tile grid with light grey background and call-to-action button
Event tile grid with two call-to-action buttons

Event tile grid

Example

Featured events

Piano Masterclass

Date: Tuesday 18 September 2018
Location: Younger Hall

Cancelled

Bike to Work Breakfast

Date: Friday 21 September 2018
Location: Rector's Café

Code

<!-- Begin pattern: event-tile //-->
<div class="event-grid">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2 class="event-grid__heading">Featured events</h2>
            </div>
        </div>
        <div class="event-grid__tiles">
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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="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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
                        <span class="sta-tag sta-tag--danger font-scale-minus-1">Cancelled</span>
<a href="#"><h3 class="featured-event__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="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>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: event-tile //-->

Event tile grid with light grey background and call-to-action button

Example

Featured events

See all events

Piano Masterclass

Date: Tuesday 18 September 2018
Location: Younger Hall

Limited access

Bike to Work Breakfast

Date: Friday 21 September 2018
Location: Rector's Café

Cancelled

Early Career Women Network Meet-up

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

Choral Evensong

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

Code

<!-- Begin pattern: event-tile //-->
<div class="event-grid light-grey">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-8">
                <h2 class="event-grid__heading">Featured events</h2>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-4 read-more">
                <a href="#">See all events</a>
            </div>
        </div>
        <div class="event-grid__tiles">
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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="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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
                        <span class="sta-tag sta-tag--info font-scale-minus-1">Limited access</span>
<a href="#"><h3 class="featured-event__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="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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
                        <span class="sta-tag sta-tag--danger font-scale-minus-1">Cancelled</span>
<a href="#"><h3 class="featured-event__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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__heading">Choral Evensong</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 7 November 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">St Salvator&#x27;s Chapel</dd>
                        </dl>
                       </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: event-tile //-->

Event tile grid with two call-to-action buttons

Example

Latest events

Featured

Piano Masterclass

Date: Tuesday 18 September 2018
Location: Younger Hall

Bike to Work Breakfast

Date: Friday 21 September 2018
Location: Rector's Café

Study Abroad Fair

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

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

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

Code

<!-- Begin pattern: event-tile //-->
<div class="event-grid">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2 class="event-grid__heading">Latest events</h2>
            </div>
            <div class="col-xs-6 col-md-3 read-more">
                <a href="#">Featured</a>
            </div>
            <div class="col-xs-6 col-md-3 read-more">
                <a href="#">Archive</a>
            </div>
        </div>
        <div class="event-grid__tiles">
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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="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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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="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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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>
                </div>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__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>
            </div>
            <div class="featured-event">
                <div class="expanded-link-wrapper">
                    <div class="featured-event__image">
                          <img 
                          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                          data-src="../../assets/docs/images/placeholders/360x240.png"
                          alt="Description"
                          class="lazyload">
                       </div>
                    <div class="featured-event__details">
<a href="#"><h3 class="featured-event__heading">Choral Evensong</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 7 November 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">St Salvator&#x27;s Chapel</dd>
                        </dl>
                       </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: event-tile //-->