University of St Andrews

Panel

The panel pattern shows either a header link with an optional background colour or an image. Both always with a description. Panels are can be used in asides for additional information or combined together to form a panel grid.

Rules for panels

• Individual panels must only be used in asides.
• Multiple panels must not be used in asides.
• Individual panels must not be used in the main body of pages.
• Panel grid pattern must be used to feature multiple panels on a page.
• Any combination of coloured of panels can be used on a panel grid.
• Panels with images must only appear in asides.
• Images in panels must be 360 × 240 pixels.

Options available

• Primary
• Secondary
• Tertiary 1
• Tertiary 2
• Tertiary 3
• Panel with image

Primary

<!-- Begin pattern: panel //-->
<div class="col-md-4">
	<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 //-->

Secondary

<!-- Begin pattern: panel //-->
<div class="col-md-4">
	<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>
<!-- End pattern: panel //-->

Tertiary 1

<!-- Begin pattern: panel //-->
<div class="col-md-4">
	<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>
<!-- End pattern: panel //-->

Tertiary 2

<!-- Begin pattern: panel //-->
<div class="col-md-4">
	<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>
<!-- End pattern: panel //-->

Tertiary 3

<!-- Begin pattern: panel //-->
<div class="col-md-4">
	<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>
<!-- End pattern: panel //-->

Panel with image

A panel with an image must only be used in asides. It is recommended that panels with images include a link in the description text for further context. Images be must 360 × 240 pixels in resolution.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

<!-- Begin pattern: panel //-->
<div class="col-md-4">
	<div class="panel">
		<div class="panel-image">
        	<img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="placeholder">
        </div>
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.</p>
		</div>
	</div>
</div>
<!-- End pattern: panel //-->