1. Design System
  2. Components
  3. Tiled blocks

Tiled blocks

The tiled blocks component provides a linked block to more detailed information.

Default tiled blocks

<div class="tile is-ancestor">
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-white p-20 is-flex">
			<p class="font-type-2 is-size-5 has-text-centered has-text-weight-bold m-bottom-0 tags">The UK’s number one for research in the THE Young University Rankings 2019</p>
		</a>
	</div>
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-white p-20 is-flex">
			<p class="font-type-2 is-size-5 has-text-centered has-text-weight-bold m-bottom-0 tags">The only UK University in QS World University Rankings Top 50 Under 50 2020</p>
		</a>
	</div>
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-white p-20 is-flex">
			<p class="font-type-2 is-size-5 has-text-centered has-text-weight-bold m-bottom-0 tags">A climb of 21 places in The Times / Sunday Times Good University Guide 2019</p>
		</a>
	</div>
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-white p-20 is-flex">
			<p class="font-type-2 is-size-5 has-text-centered has-text-weight-bold m-bottom-0 tags">“Amongst the world’s top universities” in 13 subject areas in the QS World University Rankings by Subject 2020</p>
		</a>
	</div>
</div>

Tiled block with icon

<div class="tile is-ancestor">
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-light p-20">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><span class="fas fa-th-list" aria-hidden="true"></span> Undergraduate courses</p>
		</a>
	</div>
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-light p-20">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><span class="fas fa-th-list" aria-hidden="true"></span> Postgraduate courses</p>
		</a>
	</div>
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-light p-20">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><span class="fas fa-th-list" aria-hidden="true"></span> Order a prospectus</p>
		</a>
	</div>
	<div class="tile is-parent">
		<a class="tile is-child item-block box has-background-light p-20">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><span class="fas fa-th-list" aria-hidden="true"></span> Campus tours</p>
		</a>
	</div>
</div>

Tiled block for sub-section pages

<div class="tile is-ancestor section-panel">
	<div class="tile is-12">
		<div class="tile">
			<div class="tile is-parent">
				<a href="#" class="tile is-child item-block box has-background-white">
					<h2 class="font-type-2 is-size-3 m-bottom-10">Special Collections</h2>
					<p class="is-size-5"></p>
				</a>
			</div>
			<div class="tile is-parent">
				<a href="#" class="tile is-child item-block box has-background-white">
					<h2 class="font-type-2 is-size-3 m-bottom-10">Course resources and advice</h2>
					<p class="is-size-5"></p>
				</a>
			</div>
			<div class="tile is-parent">
				<a href="#" class="tile is-child item-block box has-background-white">
					<h2 class="font-type-2 is-size-3 m-bottom-10">Brookes staff publications</h2>
					<p class="is-size-5"></p>
				</a>
			</div>
		</div>
	</div>
</div>
<div class="tile is-ancestor section-panel">
	<div class="tile is-12">
		<div class="tile">
			<div class="tile is-parent">
				<a href="#" class="tile is-child item-block box has-background-white">
					<h2 class="font-type-2 is-size-3 m-bottom-10">Collection management</h2>
					<p class="is-size-5"></p>
				</a>
			</div>
			<div class="tile is-parent">
				<a href="#" class="tile is-child item-block box has-background-white">
					<h2 class="font-type-2 is-size-3 m-bottom-10">Brookes research repository (RADAR)</h2>
					<p class="is-size-5"></p>
				</a>
			</div>
		</div>
	</div>
</div>

Accessibility