Digital Style Guide

Welcome to the digital style guide for your brand.

Grid #

Equal columns

.column (1)

.column (2)

.column (3)

.column (4)

.column (1)

.column (2)

.column (3)

.column (4)

(↓) 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>

<!-- Up to six equal column wrappers can be added and the widths will adapt automatically within the row -->

Limits

.column (1)

.column (2)

.column (3)

.column (4)

.column (5)

.column (6)

.column (7)

.column (8)

(↓) 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

.column

.column

.column

.column

(↓) 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

.column

.column

.column

.column

(↓) 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

.column
line break

.column

(↓) 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

.column

.column.r-align

(↓) 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

.colspan-9

.colspan-3

.colspan-8

.colspan-4

.colspan-2

.colspan-6

.colspan-4

(↓) Download | </> Show code

<!-- Example 1 -->
<div class="columns">
    <div class="column colspan-9">
        <p>.colspan-9</p>
    </div>
    <div class="column colspan-3">
        <p>.colspan-3</p>
    </div>
</div>

<!-- Example 2 -->
<div class="columns">
    <div class="column colspan-8">
        <p>.colspan-8</p>
    </div>
    <div class="column colspan-4">
        <p>.colspan-4</p>
    </div>
</div>

<!-- Example 3 -->
<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>

<!-- In this twelve column grid the "colspan-" class can be suffixed with any number from 1 to 12  -->

Offsets

.colspan-3

.colspan-3

.colspan-3.offset-3

.colspan-6.offset-6

.colspan-4

.colspan-4.offset-1

.colspan-2.offset-1

(↓) Download | </> Show code

<!-- Example 1 -->
<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>

<!-- Example 2 -->
<div class="columns">
    <div class="column colspan-6 offset-6">
        <p>.colspan-6.offset-6</p>
    </div>
</div>

<!-- Example 3 -->
<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

Can't find something?

Find out more

Why choose Queen's?

Find out more

(↓) 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

Latest News

View all news

(↓) 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>