Digital pattern library

Tile grid

The tile grid pattern contains a heading, a call to browse button and a grid layout of tiles; it is used to show a collection of news and/or events.

Tile grid with background image

By default there is no 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 image will be be set to cover the background, so select a large image. The example image is 2100 x 1400.

What's happening in St Andrews

See all news
Description

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.

26 August 2014
News
Description

A Rae of Aristic Sunshine

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

21 August 2014
Photo of the week
Description

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.

14 July 2014
Photo of the week
Description

All in hand

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

4 July 2014
News
Description

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.

27 June 2014
Photo of the week
Description

Darling: "We belong together"

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

2 July 2014
Featured events
Code 
<!-- Begin pattern: tile-grid //-->

<div class="tile-grid" style="background-image: url(../../assets/docs/images/background/bg1.jpg);">

	<div class="container">

		<div class="row">
			<div class="col-md-8">
					<h2>What's happening in St&nbsp;Andrews</h2>
			</div>

			<div class="col-md-4 read-more read-more-container">

				<a href="http://www.google.com/">See all news</a>

			</div>
		</div>

		<div class="row">
			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile ">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
				        <h3><a href="#" class="big-target-anchor">MUSA is going greener</a></h3>
				    </div>
				
				    <p>The Museum of the University of St&nbsp;Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.</p>
				
				    <div class="tile-date" datetime="2014-08-26">26 August 2014</div>
				
				    <div class="tile-type">News</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile red">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-2.jpg" alt="Description">
				        <h3><a href="#" class="big-target-anchor">A Rae of Aristic 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&nbsp;Andrews.</p>
				
				    <div class="tile-date" datetime="2014-08-21">21 August 2014</div>
				
				    <div class="tile-type">Photo of the week</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile red">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-3.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-07-14">14 July 2014</div>
				
				    <div class="tile-type">Photo of the week</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile ">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-07-04">4 July 2014</div>
				
				    <div class="tile-type">News</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile red">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-06-27">27 June 2014</div>
				
				    <div class="tile-type">Photo of the week</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile green">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-6.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-07-02">2 July 2014</div>
				
				    <div class="tile-type">Featured events</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>
		</div>  <!-- // End .row -->

		<div class="read-more read-more-container-alt"></div>

	</div> <!-- // End .container -->

</div>  <!-- // End .tile-grid -->

<!-- End pattern: tile-grid //-->

Tile grid with solid background

The tile grid may be used without a background image, in which case it shows a default, solid background.

What's happening in St Andrews

See all news
Description

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.

26 August 2014
News
Description

A Rae of Aristic Sunshine

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

21 August 2014
Photo of the week
Description

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.

14 July 2014
Photo of the week
Description

All in hand

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

4 July 2014
News
Description

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.

27 June 2014
Photo of the week
Description

Darling: "We belong together"

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

2 July 2014
Featured events
Code 
<!-- Begin pattern: tile-grid //-->

<div class="tile-grid">

	<div class="container">

		<div class="row">
			<div class="col-md-8">
					<h2 class="sta-grey">What's happening in St&nbsp;Andrews</h2>
			</div>

			<div class="col-md-4 read-more read-more-container">

				<a href="http://www.google.com/">See all news</a>

			</div>
		</div>

		<div class="row">
			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile ">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
				        <h3><a href="#" class="big-target-anchor">MUSA is going greener</a></h3>
				    </div>
				
				    <p>The Museum of the University of St&nbsp;Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.</p>
				
				    <div class="tile-date" datetime="2014-08-26">26 August 2014</div>
				
				    <div class="tile-type">News</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile red">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-2.jpg" alt="Description">
				        <h3><a href="#" class="big-target-anchor">A Rae of Aristic 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&nbsp;Andrews.</p>
				
				    <div class="tile-date" datetime="2014-08-21">21 August 2014</div>
				
				    <div class="tile-type">Photo of the week</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile red">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-3.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-07-14">14 July 2014</div>
				
				    <div class="tile-type">Photo of the week</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile ">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-07-04">4 July 2014</div>
				
				    <div class="tile-type">News</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile red">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-06-27">27 June 2014</div>
				
				    <div class="tile-type">Photo of the week</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>

			<div class="col-sm-6 col-md-4 big-target-click-zone">
				<!-- Begin pattern: tile //-->
				
				<article class="tile green">
				
				    <div class="tile-image-title">
				            <img src="../../assets/docs/images/placeholders/360x240-6.jpg" alt="Description">
				        <h3><a href="#" 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" datetime="2014-07-02">2 July 2014</div>
				
				    <div class="tile-type">Featured events</div>
				
				    <div class="clear"></div>
				
				</article>
				
				<!-- End pattern: tile //-->			</div>
		</div>  <!-- // End .row -->

		<div class="read-more read-more-container-alt"></div>

	</div> <!-- // End .container -->

</div>  <!-- // End .tile-grid -->

<!-- End pattern: tile-grid //-->