Welcome to the digital style guide for your brand.
Grid #
Equal columns
(↓) Download | </> Show code
<div class="columns">
<div class="column">
<p>.column (1)</p>
</div>
<div class="column">
<p>.column (2)</p>
</div>
<div class="column">
<p>.column (3)</p>
</div>
<div class="column">
<p>.column (4)</p>
</div>
</div>
<div class="columns">
<div class="column">
<p>.column (1)</p>
</div>
<div class="column">
<p>.column (2)</p>
</div>
<div class="column">
<p>.column (3)</p>
</div>
<div class="column">
<p>.column (4)</p>
</div>
</div>
Limits
(↓) Download | </> Show code
<div class="columns max-4">
<div class="column">
<p>.column (1)</p>
</div>
<div class="column">
<p>.column (2)</p>
</div>
<div class="column">
<p>.column (3)</p>
</div>
<div class="column">
<p>.column (4)</p>
</div>
<div class="column">
<p>.column (5)</p>
</div>
<div class="column">
<p>.column (6)</p>
</div>
<div class="column">
<p>.column (7)</p>
</div>
<div class="column">
<p>.column (8)</p>
</div>
</div>
Bordered
(↓) Download | </> Show code
<div class="columns bordered">
<div class="column">
<p>.column</p>
</div>
<div class="column">
<p>.column</p>
</div>
<div class="column">
<p>.column</p>
</div>
<div class="column">
<p>.column</p>
</div>
</div>
Centered
(↓) Download | </> Show code
<div class="columns centered">
<div class="column">
<p>.column</p>
</div>
<div class="column">
<p>.column</p>
</div>
<div class="column">
<p>.column</p>
</div>
<div class="column">
<p>.column</p>
</div>
</div>
Vertically aligned
(↓) Download | </> Show code
<div class="columns aligned">
<div class="column">
<p>.column<br/>line break</p>
</div>
<div class="column">
<p>.column</p>
</div>
</div>
Right aligned
(↓) Download | </> Show code
<div class="columns">
<div class="column">
<p>.column</p>
</div>
<div class="column r-align">
<p>.column.r-align</p>
</div>
</div>
Colspan
(↓) Download | </> Show code
<div class="columns">
<div class="column colspan-9">
<p>.colspan-9</p>
</div>
<div class="column colspan-3">
<p>.colspan-3</p>
</div>
</div>
<div class="columns">
<div class="column colspan-8">
<p>.colspan-8</p>
</div>
<div class="column colspan-4">
<p>.colspan-4</p>
</div>
</div>
<div class="columns">
<div class="column colspan-2">
<p>.colspan-2</p>
</div>
<div class="column colspan-6">
<p>.colspan-6</p>
</div>
<div class="column colspan-4">
<p>.colspan-4</p>
</div>
</div>
Offsets
(↓) Download | </> Show code
<div class="columns">
<div class="column colspan-3">
<p>.colspan-3</p>
</div>
<div class="column colspan-3">
<p>.colspan-3</p>
</div>
<div class="column colspan-3 offset-3">
<p>.colspan-3.offset-3</p>
</div>
</div>
<div class="columns">
<div class="column colspan-6 offset-6">
<p>.colspan-6.offset-6</p>
</div>
</div>
<div class="columns">
<div class="column colspan-4">
<p>.colspan-4</p>
</div>
<div class="column colspan-4 offset-1">
<p>.colspan-4.offset-1</p>
</div>
<div class="column colspan-2 offset-1">
<p>.colspan-2.offset-1</p>
</div>
</div>
Context
(↓) Download | </> Show code
<div class="panel bg--red centered">
<div class="inner">
<div class="columns bordered">
<div class="column">
<h3>Can't find something?</h3>
<p><a href="#" class="button">Find out more</a></p>
</div>
<div class="column">
<h3>Why choose Queen's?</h3>
<p><a href="#" class="button">Find out more</a></p>
</div>
</div>
</div>
</div>
Context
(↓) Download | </> Show code
<div class="panel bg--red">
<div class="inner">
<div class="columns aligned">
<div class="column">
<h2>Latest News</h2>
</div>
<div class="column r-align">
<p><a href="#">View all news</a></p>
</div>
</div>
</div>
</div>