Tile grid
The tile grid pattern contains a heading, a call-to-action button and a grid layout of tiles; it is used to show a collection of news and/or events. Each tile is a clickable, single-action item, and includes an image, title and description.
Rules for tile grid
- Must have an image or light grey background colour.
- Must not use more than six tiles in one grid.
- Must only have one tile grid per page.
- Must only be used within the main body of the page.
- Must contain one or two call-to-action buttons.
- Tile images must be 360 x 240 pixels.
- Tile titles must not be more than two lines.
- Tile description text should be three to four lines in length, or roughly 80 to 140 characters.
Tile colours
Tile colours represent different categories used. For example, in the below options, tile colours represent the following categories:
- Blue, primary: News
- Green, secondary: Featured event
- Red, tertiary: Photo of the week
Blue is the primary colour used for the most popular category. Tile grids must not include more than three category colours.
Options available
Tile grid with background image
To add a background image, attach the image using an inline style, for example <div class="tile-grid" style="background-image: url(path/to/image.jpg)">.
- The background image must be blurred, this can be done in Photoshop.
- The background image must be large, this example is 2100 x 1400 pixels.
Code
<div class="tile-grid" style="background-image: url(../../assets/docs/images/background/bg1.jpg);">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-8">
<h2>What's happening in St Andrews</h2>
</div>
<div class="col-xs-6 col-md-3 col-lg-2 read-more read-more-container">
<a href="#">News</a>
</div>
<div class="col-xs-6 col-md-3 col-lg-2 read-more read-more-container">
<a href="#">Events</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile ">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">MUSA is going greener</a></h3>
</div>
<p>The Museum of the University of St Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.</p>
<div class="tile-date">Wednesday 23 August 2017</div>
<div class="tile-type">News</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile red">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-2.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">A Rae of artistic sunshine</a></h3>
</div>
<p>The work of one of Scotland's most revered contemporary artists, Barbara Rae, is to go on display in St Andrews.</p>
<div class="tile-date">Wednesday 16 August 2017</div>
<div class="tile-type">Photo of the week</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile red">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-3.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">World Cup fever at Sandy's Bar</a></h3>
</div>
<p>Hundreds of football fans watched the World Cup final in the newly opened Sandy's Bar at the Students' Association on Sunday.</p>
<div class="tile-date">Wednesday 12 July 2017</div>
<div class="tile-type">Photo of the week</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile ">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">All in hand</a></h3>
</div>
<p>Scientists have, for the first time, decoded the meanings of chimpanzee gestures.</p>
<div class="tile-date">Wednesday 5 July 2017</div>
<div class="tile-type">News</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile red">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">Dogrees all round!</a></h3>
</div>
<p>Graduation is a time for all the family but this year one pet dog made its way into the post-ceremony celebrations in the Quad.</p>
<div class="tile-date">Wednesday 28 June 2017</div>
<div class="tile-type">Photo of the week</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile green">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-6.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">Darling: "We belong together"</a></h3>
</div>
<p>Alistair Darling to use public address to make the case for Scotland remaining in the UK</p>
<div class="tile-date">Wednesday 21 June 2017</div>
<div class="tile-type">Featured events</div>
<div class="clear"></div>
</article>
</div>
</div>
<div class="read-more read-more-container-alt"></div>
</div>
</div>
Tile grid with light grey background
This is the default background.
Code
<div class="tile-grid">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-8">
<h2 class="sta-grey">What's happening in St Andrews</h2>
</div>
<div class="col-xs-12 col-md-4 read-more read-more-container">
<a href="#">See all news</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile ">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">MUSA is going greener</a></h3>
</div>
<p>The Museum of the University of St Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.</p>
<div class="tile-date">Wednesday 23 August 2017</div>
<div class="tile-type">News</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile red">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-2.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">A Rae of artistic sunshine</a></h3>
</div>
<p>The work of one of Scotland's most revered contemporary artists, Barbara Rae, is to go on display in St Andrews.</p>
<div class="tile-date">Wednesday 16 August 2017</div>
<div class="tile-type">Photo of the week</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile red">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-3.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">World Cup fever at Sandy's Bar</a></h3>
</div>
<p>Hundreds of football fans watched the World Cup final in the newly opened Sandy's Bar at the Students' Association on Sunday.</p>
<div class="tile-date">Wednesday 12 July 2017</div>
<div class="tile-type">Photo of the week</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile ">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">All in hand</a></h3>
</div>
<p>Scientists have, for the first time, decoded the meanings of chimpanzee gestures.</p>
<div class="tile-date">Wednesday 5 July 2017</div>
<div class="tile-type">News</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile red">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">Dogrees all round!</a></h3>
</div>
<p>Graduation is a time for all the family but this year one pet dog made its way into the post-ceremony celebrations in the Quad.</p>
<div class="tile-date">Wednesday 28 June 2017</div>
<div class="tile-type">Photo of the week</div>
<div class="clear"></div>
</article>
</div>
<div class="col-sm-6 col-md-4 big-target-click-zone">
<article class="tile green">
<div class="tile-image-title">
<img src="../../assets/docs/images/placeholders/360x240-6.jpg" alt="Description">
<h3><a href="#" role="button" class="big-target-anchor">Darling: "We belong together"</a></h3>
</div>
<p>Alistair Darling to use public address to make the case for Scotland remaining in the UK</p>
<div class="tile-date">Wednesday 21 June 2017</div>
<div class="tile-type">Featured events</div>
<div class="clear"></div>
</article>
</div>
</div>
<div class="read-more read-more-container-alt"></div>
</div>
</div>
