Tile grid

The tile grid pattern shows a collection of links to highlighted content such as news articles. It contains a heading, call-to-action buttons and a grid layout of tiles. Each tile is a clickable link, and includes an image, title and description along with optional date and tag.

Rules for tile grid

Must have a light grey, or white background colour.
Must only be used on full width page layouts.
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.
May contain a maximum of two call-to-action buttons.
Tile images must be 750 by 500 pixels.
Tile titles should not be more than 50 characters, or two lines in length.
Tile description text should be between 80 to 140 characters, or roughly three to four lines in length.

Tile grid with light grey background

This example contains the maximum number of tiles, placed on a light grey background.

Example

What's happening in St Andrews

See all news

MUSA is going greener

The Museum of the University of St Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.

23 August 2017

News

A Rae of artistic sunshine

The work of one of Scotland's most revered contemporary artists, Barbara Rae, is to go on display in St Andrews.

16 August 2017

Photo of the week

World Cup fever at Sandy's Bar

Hundreds of football fans watched the World Cup final in the newly opened Sandy's Bar at the Students' Association on Sunday.

12 July 2017

Photo of the week

All in hand

Scientists have, for the first time, decoded the meanings of chimpanzee gestures.

5 July 2017

News

Dogrees all round!

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.

28 June 2017

Photo of the week

Darling: "We belong together"

Alistair Darling to use public address to make the case for Scotland remaining in the UK

21 June 2017

Featured events

Code

<!-- Begin pattern: tile-grid //-->
<div class="tile-grid light-grey">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-8">
                <h2 class="tile-grid__heading sta-grey">What&#x27;s happening in St Andrews</h2>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-4 read-more">
                <a href="#">See all news</a>
            </div>
        </div>
        <div class="row tile-grid__tiles">
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
                        <h3><a href="#">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"><span class="sr-only">Date </span>23 August 2017</div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">News</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-2.jpg" alt="Description">
                        <h3><a href="#">A Rae of artistic sunshine</a></h3>
                    </div>
                    <p>The work of one of Scotland&#x27;s most revered contemporary artists, Barbara Rae, is to go on display in St Andrews.</p>
                    <div class="tile-date"><span class="sr-only">Date </span>16 August 2017</div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">Photo of the week</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-3.jpg" alt="Description">
                        <h3><a href="#">World Cup fever at Sandy&#x27;s Bar</a></h3>
                    </div>
                    <p>Hundreds of football fans watched the World Cup final in the newly opened Sandy&#x27;s Bar at the Students&#x27; Association on Sunday.</p>
                    <div class="tile-date"><span class="sr-only">Date </span>12 July 2017</div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">Photo of the week</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Description">
                        <h3><a href="#">All in hand</a></h3>
                    </div>
                    <p>Scientists have, for the first time, decoded the meanings of chimpanzee gestures.</p>
                    <div class="tile-date"><span class="sr-only">Date </span>5 July 2017</div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">News</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Description">
                        <h3><a href="#">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"><span class="sr-only">Date </span>28 June 2017</div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">Photo of the week</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-6.jpg" alt="Description">
                        <h3><a href="#">Darling: &quot;We belong together&quot;</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"><span class="sr-only">Date </span>21 June 2017</div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">Featured events</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: tile-grid //-->

Tile grid with white background

This example features two call-to-action buttons, while the tiles do not feature the optional date value.

Example

Recent highlights

News

Events

Code

<!-- Begin pattern: tile-grid //-->
<div class="tile-grid white">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2 class="tile-grid__heading sta-grey">Recent highlights</h2>
            </div>
            <div class="col-xs-6 col-md-3 col-lg-3 read-more">
                <a href="#">News</a>
            </div>
            <div class="col-xs-6 col-md-3 col-lg-3 read-more">
                <a href="#">Events</a>
            </div>
        </div>
        <div class="row tile-grid__tiles">
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
                        <h3><a href="#">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"><span class="sr-only">Date </span></div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">News</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-2.jpg" alt="Description">
                        <h3><a href="#">A Rae of artistic sunshine</a></h3>
                    </div>
                    <p>The work of one of Scotland&#x27;s most revered contemporary artists, Barbara Rae, is to go on display in St Andrews.</p>
                    <div class="tile-date"><span class="sr-only">Date </span></div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">Photo of the week</a></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 tile-grid__tile">
                <div class="tile">
                    <div class="tile-image-title">
                        <img src="../../assets/docs/images/placeholders/360x240-3.jpg" alt="Description">
                        <h3><a href="#">World Cup fever at Sandy&#x27;s Bar</a></h3>
                    </div>
                    <p>Hundreds of football fans watched the World Cup final in the newly opened Sandy&#x27;s Bar at the Students&#x27; Association on Sunday.</p>
                    <div class="tile-date"><span class="sr-only">Date </span></div>
                    <div class="tile-type"><span class="sr-only">Category </span><a href="#">Photo of the week</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: tile-grid //-->