Digital Style Guide

Welcome to the digital style guide for your brand.

Typography #

Headers

H1 Heading. Avenir Book #58595B. 36px. 125% line height.

H2 Heading. Avenir Book #58595B. 32px. 125% line height.

H3 Heading. Avenir Book #58595B. 28px. 125% line height.

H4 Heading. Avenir Book #58595B. 20px. 125% line height.

H5 Heading. Avenir Book #58595B. 18px. 125% line height.
H6 Heading. Avenir Book #58595B. 16px. 125% line height.

(↓) Download | </> Show code

<h1>H1 Heading. Avenir Book #58595B. 36px. 125% line height.</h1>
<h2>H2 Heading. Avenir Book #58595B. 32px. 125% line height.</h2>
<h3>H3 Heading. Avenir Book #58595B. 28px. 125% line height.</h3>
<h4>H4 Heading. Avenir Book #58595B. 20px. 125% line height.</h5>
<h5>H5 Heading. Avenir Book #58595B. 18px. 125% line height.</h5>
<h6>H6 Heading. Avenir Book #58595B. 16px. 125% line height.</h6>

Headers alternative

H1 Alternative Heading. Avenir Black #C41030. 20px. 125% line height

H2 Alternative Heading. Avenir Black #C41030. 18px. 125% line height

H3 Alternative Heading. Avenir Black #C41030. 16px. 125% line height

H4 Alternative Heading. Avenir Medium #C41030. 20px. 125% line height

H5 Alternative Heading. Avenir Medium #C41030. 16px. 125% line height
H6 Alternative Heading. Avenir Medium #C41030. 16px. 125% line height

(↓) Download | </> Show code

<h1 class="alt">H1 Alternative Heading. Avenir Black #C41030. 20px. 125% line height</h1>
<h2 class="alt">H2 Alternative Heading. Avenir Black #C41030. 18px. 125% line height</h2>
<h3 class="alt">H3 Alternative Heading. Avenir Black #C41030. 16px. 125% line height</h3>
<h4 class="alt">H4 Alternative Heading. Avenir Medium #C41030. 20px. 125% line height</h5>
<h5 class="alt">H5 Alternative Heading. Avenir Medium #C41030. 16px. 125% line height</h5>
<h6 class="alt">H6 Alternative Heading. Avenir Medium #C41030. 16px. 125% line height</h6>

Paragraph

Paragraph. Avenir Light. 16px #58595b with a line height of 24px. Level 1 covers both disciplines, and the modules are introductory courses which assume no previous knowledge. (They may also interest students who are taking another subject as their main degree, but who wish to enhance their knowledge of their human and environmental past and heritage).

(↓) Download | </> Show code

<p>Paragraph. Avenir Light. 16px #58595b with a line height of 24px. Level 1 covers both disciplines, and the modules are introductory courses which assume no previous knowledge. (They may also interest students who are taking another subject as their main degree, but who wish to enhance their knowledge of their human and environmental past and heritage).</p>

Introduction

Intro paragraph. Avenir Light. 20px #58595b with a line height of 30px. Level 1 covers both disciplines, and the modules are introductory courses which assume no previous knowledge.

(↓) Download | </> Show code

<p class="intro">Intro paragraph. Avenir Light. 20px #58595b with a line height of 30px. Level 1 covers both disciplines, and the modules are introductory courses which assume no previous knowledge.</p>

Links

This is an inline link.

(↓) Download | </> Show code

<p>This is <a href="#">an inline link</a>.</p>

Bulleted list

  • Avenir Light. 16px #58595b. Line height of 24px.
  • Avenir Light. 16px #58595b. Line height of 24px.
  • Avenir Light. 16px #58595b. Line height of 24px.
  • Avenir Light. 16px #58595b. Line height of 24px.

(↓) Download | </> Show code

<ul>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
</ul>

<!-- jQuery is used to add a class to the list and a <span> wrapper to each list item to create styled bullets, resulting markup shown below.

<ul class="list-style">
    <li><span>List item 1</span></li>
    <li><span>List item 2</span></li>
</ul>
-->

Numbered list

  1. Avenir Light. 16px #58595b. Line height of 24px.
  2. Avenir Light. 16px #58595b. Line height of 24px.
  3. Avenir Light. 16px #58595b. Line height of 24px.
  4. Avenir Light. 16px #58595b. Line height of 24px.

(↓) Download | </> Show code

<ol>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
	<li>Avenir Light. 16px #58595b. Line height of 24px.</li>
</ol>

<!-- jQuery is used to add a class to the list and a <span> wrapper to each list item to create styled numbers, resulting markup shown below.

<ul class="list-style">
    <li><span>List item 1</span></li>
    <li><span>List item 2</span></li>
</ul>
-->

Inline list

  • List item 1
  • List item 2
  • List item 3
  • List item 4

(↓) Download | </> Show code

<ul class="list-inline">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>

Blockquote

“Making the decision to study at Queen’s was the smartest move of my life. I’m getting a world-class education and the experience of a lifetime.”
Lauren Louisa Halstead
Archaeology Student

(↓) Download | </> Show code

<blockquote>“Making the decision to study at Queen’s was the smartest move of my life. I’m getting a world-class education and the experience of a lifetime.”</blockquote>
<cite>Lauren Louisa Halstead<br/>Archaeology Student</cite>