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.
<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
<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).
<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.
<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.
<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.
<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
- 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.
<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
<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
<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>