University of St Andrews

Panel grid

The panel grid pattern arranges panel items in a two column grid.

Rules for the panel grid

• Panels must be arranged equally into two columns.
• Panel elements must never appear outside of a grid.

Colour options

A variety of colours are available, in keeping with the colour palette.

<!-- Begin pattern: panel-grid //-->
<!-- Begin pattern: panel //-->
<div class="col-md-6">
	<div class="panel panel-primary big-target-click-zone">
		<div class="panel-heading">
			<h3 class="panel-title"><a href="#" class="big-target-anchor">Primary</a></h3>
		</div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<div class="col-md-6">
	<div class="panel panel-secondary big-target-click-zone">
		<div class="panel-heading">
			<h3 class="panel-title"><a href="#" class="big-target-anchor">Secondary</a></h3>
		</div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<div class="col-md-6">
	<div class="panel panel-tertiary-1 big-target-click-zone">
		<div class="panel-heading">
			<h3 class="panel-title"><a href="#" class="big-target-anchor">Tertiary 1</a></h3>
		</div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<div class="col-md-6">
	<div class="panel panel-tertiary-2 big-target-click-zone">
		<div class="panel-heading">
			<h3 class="panel-title"><a href="#" class="big-target-anchor">Tertiary 2</a></h3>
		</div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<div class="col-md-6">
	<div class="panel panel-tertiary-3 big-target-click-zone">
		<div class="panel-heading">
			<h3 class="panel-title"><a href="#" class="big-target-anchor">Tertiary 3</a></h3>
		</div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<div class="col-md-6">
	<div class="panel panel-primary big-target-click-zone">
		<div class="panel-heading">
			<h3 class="panel-title"><a href="#" class="big-target-anchor">Primary</a></h3>
		</div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<!-- End pattern: panel //--><!-- End pattern: panel-grid //-->