University of St Andrews

Panel grid

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

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

Colour options

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

<!-- Begin pattern: panel-grid //-->

<div class="panel-grid">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="col-md-6">
					<!-- Begin pattern: panel //-->
					
					<article class="panel panel-primary">
					
					    <div class="panel-heading">
					        <h3 class="panel-title"><a href="http://www.st-andrews.ac.uk">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>
					
					</article>
					
					<!-- End pattern: panel //-->
				</div>
				<div class="col-md-6">
					<!-- Begin pattern: panel //-->
					
					<article class="panel panel-secondary">
					
					    <div class="panel-heading">
					        <h3 class="panel-title"><a href="http://www.st-andrews.ac.uk">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>
					
					</article>
					
					<!-- End pattern: panel //-->
				</div>
			</div>
			<div class="col-md-12">
				<div class="col-md-6">
					<!-- Begin pattern: panel //-->
					
					<article class="panel panel-tertiary-1">
					
					    <div class="panel-heading">
					        <h3 class="panel-title"><a href="http://www.st-andrews.ac.uk">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>
					
					</article>
					
					<!-- End pattern: panel //-->
				</div>
				<div class="col-md-6">
					<!-- Begin pattern: panel //-->
					
					<article class="panel panel-tertiary-2">
					
					    <div class="panel-heading">
					        <h3 class="panel-title"><a href="http://www.st-andrews.ac.uk">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>
					
					</article>
					
					<!-- End pattern: panel //-->
				</div>
			</div>
			<div class="col-md-12">
				<div class="col-md-6">
					<!-- Begin pattern: panel //-->
					
					<article class="panel panel-tertiary-3">
					
					    <div class="panel-heading">
					        <h3 class="panel-title"><a href="http://www.st-andrews.ac.uk">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>
					
					</article>
					
					<!-- End pattern: panel //-->
				</div>
				<div class=" col-md-6">
					<!-- Begin pattern: panel //-->
					
					<article class="panel panel-primary">
					
					    <div class="panel-heading">
					        <h3 class="panel-title"><a href="http://www.st-andrews.ac.uk">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>
					
					</article>
					
					<!-- End pattern: panel //-->
				</div>
			</div>
		</div>  <!-- // End .row -->
	</div> <!-- // End .container -->
</div>  <!-- // End .panel-grid -->

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