Digital Style Guide

Welcome to the digital style guide for your brand.

Buttons #

Default

(↓) Download | </> Show code

<button>Default button</button>

<!-- Alternatively, the below class can be added to an element
     <a href="#" class="button">Default button</a>
-->

Grey

(↓) Download | </> Show code

<button class="button--grey">Grey button</button>

Disabled

(↓) Download | </> Show code

<button disabled>Disabled button</button>
<button class="button--grey" disabled>Disabled button</button>

Context

(↓) Download | </> Show code

<div class="panel bg--red">
    <div class="inner">
        <button>Default button</button>
        <button class="button--grey">Grey button</button>
        <button disabled>Disabled button</button>
    </div>
</div>

Forms #

Checkboxes

(↓) Download | </> Show code

<label><input type="checkbox" name="name" value="value">Static</label>
<label><input type="checkbox" name="name" value="value" checked="checked">Selected</label>
<label><input type="checkbox" name="name" value="value" disabled="disabled">Disabled</label>

Dropdown

(↓) Download | </> Show code

<select>
	<option>This is a dropdown</option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

Input text

(↓) Download | </> Show code

<div class="form__field">
    <input placeholder="This is a static input field" name="name" type="text">
</div>
<div class="form__field">
    <input placeholder="This is a required input field" name="name" type="text" required>
</div>
<div class="form__field">
    <input placeholder="This is a disabled input field" name="name" type="text" disabled>
</div>

Radio buttons

(↓) Download | </> Show code

<label><input type="radio" name="name" value="value">Static</label>
<label><input type="radio" name="name" value="value" checked="checked">Selected</label>
<label><input type="radio" name="name" value="value" disabled="disabled">Disabled</label>

Textarea

(↓) Download | </> Show code

<textarea cols="50" rows="5" name="name">This is some copy within a text area</textarea>

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>

Panels #

Panel

Default panel

This is a default panel.

(↓) Download | </> Show code

<div class="panel">
    <div class="inner">
        <h2>Default panel</h2>
        <p>This is a default panel.</p>
    </div>
</div>

Red panel

Red panel

This is a red panel.

(↓) Download | </> Show code

<div class="panel bg--red">
    <div class="inner">
        <h2>Red panel</h2>
        <p>This is a red panel.</p>
    </div>
</div>

Grey panel

Grey panel

This is a grey panel.

(↓) Download | </> Show code

<div class="panel bg--grey">
    <div class="inner">
        <h2>Grey panel</h2>
        <p>This is a grey panel.</p>
    </div>
</div>

Light grey panel

Light grey panel

This is a light grey panel.

(↓) Download | </> Show code

<div class="panel bg--grey-l">
    <div class="inner">
        <h2>Light grey panel</h2>
        <p>This is a light grey panel.</p>
    </div>
</div>

Mid light panel

Mid light grey panel

This is a mid light grey panel.

(↓) Download | </> Show code

<div class="panel bg--grey-ml">
    <div class="inner">
        <h2>Mid light grey panel</h2>
        <p>This is a mid light grey panel.</p>
    </div>
</div>

Mid dark grey panel

Mid dark grey panel

This is a mid dark grey panel.

(↓) Download | </> Show code

<div class="panel bg--grey-md">
    <div class="inner">
        <h2>Mid dark grey panel</h2>
        <p>This is a mid dark grey panel.</p>
    </div>
</div>

Dark grey panel

Dark grey panel

This is a dark grey panel.

(↓) Download | </> Show code

<div class="panel bg--grey-d">
    <div class="inner">
        <h2>Dark grey panel</h2>
        <p>This is a dark grey panel.</p>
    </div>
</div>

Centered panel

Centered panel

This is a red centered panel.

(↓) Download | </> Show code

<div class="panel bg--red centered">
    <div class="inner">
        <h2>Centered panel</h2>
        <p>This is a red centered panel.</p>
    </div>
</div>

Tables #

Default

Course Qualification Duration
English and Film Studies BA Joint Hons 3 years
Drama and Film Studies BA Joint Hons 3 years
Film Studies BA Hons 3 years

(↓) Download | </> Show code

<table>
    <thead>
        <tr>
            <th>Course</th>
            <th>Qualification</th>
            <th>Duration</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>English and Film Studies</td>
            <td>BA Joint Hons</td>
            <td>3 years</td>
        </tr>
        <tr>
            <td>Drama and Film Studies</td>
            <td>BA Joint Hons</td>
            <td>3 years</td>
        </tr>
        <tr>
            <td>Film Studies</td>
            <td>BA Hons</td>
            <td>3 years</td>
        </tr>
    </tbody>
</table>

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>

Header #

Breadcrumbs

(↓) Download | </> Show code

<div class="breadcrumbs">
    <div class="inner">
        <ul class="list-inline">
            <li><a href="#">Home</a></li>
            <li><a href="#">Section</a></li>
            <li><a href="#">Sub-section</a></li>
            <li class="active">Page-title</li>
        </ul>
    </div>
</div>

Image Blocks #

Two verticals

Study at Queen's

We have over 300 courses to choose from

Find out more

Career Ready Graduates

Employability is at the heart of the Queen's curriculum

Find out more

(↓) Download | </> Show code

<div class="panel img-block vert"> <div class="inner"> <div class="columns"> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/study-at-queens.jpg" alt=""> </div> <h2 class="alt">Study at Queen's</h2> <h3>We have over 300 courses to choose from</h3> <p><a title="" href="#">Find out more</a></p> </div> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/career-ready-graduates.jpg" alt=""> </div> <h2 class="alt">Career Ready Graduates</h2> <h3>Employability is at the heart of the Queen's curriculum</h3> <p><a title="" href="#">Find out more</a></p> </div> </div> </div></div>

Three verticals

Entry Requirements

Important information for applicants

Find out more

Facilities

Award-winning facilities

Find out more

About Queen's

Central to the world

Find out more

(↓) Download | </> Show code

<div class="panel img-block vert"> <div class="inner"> <div class="columns"> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/entry-requirements.jpg" alt=""> </div> <h2 class="alt">Entry Requirements</h2> <h3>Important information for applicants</h3> <p><a title="" href="#">Find out more</a></p> </div> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/facilities.jpg" alt=""> </div> <h2 class="alt">Facilities</h2> <h3>Award-winning facilities</h3> <p><a title="" href="#">Find out more</a></p> </div> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/about-queens.jpg" alt=""> </div> <h2 class="alt">About Queen's</h2> <h3>Central to the world</h3> <p><a title="" href="#">Find out more</a></p> </div> </div> </div></div>

Four verticals

Student Stories

Eshal Amara

Pharmacy

See her story

Student Stories

Adam Taylor

Software Engineering

See his story

Student Stories

Kelly Marno

Biomedical Science

See her story

Student Stories

Zhang Wei

Aerospace Engineering

See his story

(↓) Download | </> Show code

<div class="panel img-block vert"> <div class="inner"> <div class="columns"> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/student-1.jpg" alt=""> </div> <h2 class="alt">Student Stories</h2> <h3>Eshal Amara</h3> <h4>Pharmacy</h4> <p><a title="" href="#">See her story</a></p> </div> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/student-2.jpg" alt=""> </div> <h2 class="alt">Student Stories</h2> <h3>Adam Taylor</h3> <h4>Software Engineering</h4> <p><a title="" href="#">See his story</a></p> </div> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/student-3.jpg" alt=""> </div> <h2 class="alt">Student Stories</h2> <h3>Kelly Marno</h3> <h4>Biomedical Science</h4> <p><a title="" href="#">See her story</a></p> </div> <div class="column"> <div> <img src="/assets/qub/images/templates/01-homepage/student-4.jpg" alt=""> </div> <h2 class="alt">Student Stories</h2> <h3>Zhang Wei</h3> <h4>Aerospace Engineering</h4> <p><a title="" href="#">See his story</a></p> </div> </div> </div></div>

One horizontal

Northern Ireland - a unique location

Northern Ireland is renowned for its beautiful beaches and coastal scenery and has a fascinating history and cultural heritage that showcases stunning castles, monasteries and historic industry.

It is the perfect UK study destination for students who want to easily explore Ireland, the UK and mainland Europe.

(↓) Download | </> Show code

<div class="panel img-block horz"> <div class="inner"> <div class="columns max-2"> <div class="column"> <div class="stretch-h"> <img src="/assets/qub/images/templates/06-content-page-images-set-aside/northern-ireland.jpg" alt=""> </div> </div> <div class="column"> <h2 class="alt">Northern Ireland - a unique location</h2> <p class="intro">Northern Ireland is renowned for its beautiful beaches and coastal scenery and has a fascinating history and cultural heritage that showcases stunning castles, monasteries and historic industry.</p> <p>It is the perfect UK study destination for students who want to easily explore Ireland, the UK and mainland Europe.</p> </div> </div> </div></div>

Two horizontals

Queen's campus: access all areas

Queen’s University’s historic, city-based campus is set in south Belfast, 15 minutes’ walk from the vibrant city centre. Travelling to and from Northern Ireland is easy and cheap.

Other major UK cities are within an hour’s flying time from Belfast’s two airports and are serviced by multiple daily flights.

The ultimate student city

Queen’s is at the heart of the city’s culture, arts and social scenes.

Whatever the time of year, Belfast is the ultimate student city, offering a huge selection of places to shop, socialise, eat and relax – all within walking distance of the cosmopolitan University campus. No matter how large or small your budget is, or what your interests are, you are sure to find something to see and do in Belfast.

(↓) Download | </> Show code

<div class="panel img-block horz"> <div class="inner"> <div class="columns max-2"> <div class="column"> <div class="stretch-h"> <img src="/assets/qub/images/templates/06-content-page-images-set-aside/queens-campus.jpg" alt=""> </div> </div> <div class="column"> <h2 class="alt">Queen's campus: access all areas</h2> <p class="intro">Queen’s University’s historic, city-based campus is set in south Belfast, 15 minutes’ walk from the vibrant city centre. Travelling to and from Northern Ireland is easy and cheap.</p> <p>Other major UK cities are within an hour’s flying time from Belfast’s two airports and are serviced by multiple daily flights.</p> </div> <div class="column"> <div class="stretch-h"> <img src="/assets/qub/images/templates/06-content-page-images-set-aside/ultimate-student-city.jpg" alt=""> </div> </div> <div class="column"> <h2 class="alt">The ultimate student city</h2> <p class="intro">Queen’s is at the heart of the city’s culture, arts and social scenes.</p> <p>Whatever the time of year, Belfast is the ultimate student city, offering a huge selection of places to shop, socialise, eat and relax – all within walking distance of the cosmopolitan University campus. No matter how large or small your budget is, or what your interests are, you are sure to find something to see and do in Belfast.</p> </div> </div> </div></div>

One horizontal with colspan

Latest News

Film Studies student secures internship at Northern Ireland screen

29/06/2015

Read article

(↓) Download | </> Show code

<div class="panel img-block horz"> <div class="inner"> <div class="columns max-2"> <div class="column colspan-8"> <div> <img src="/assets/qub/images/templates/02-school-homepage/latest-news-1.jpg" alt=""> </div> </div> <div class="column colspan-4"> <h2 class="alt">Latest News</h2> <h3>Film Studies student secures internship at Northern Ireland screen</h3> <p><small>29/06/2015</small></p> <p><a href="#" class="button">Read article</a></p> </div> </div> </div></div>

One horizontal with background

Latest news from the School of English

MA in Poetry: £10,000 scholarship available for international student

Find out more

(↓) Download | </> Show code

<div class="panel bg--red img-block horz"> <div class="inner"> <div class="columns max-2"> <div class="column"> <div class="stretch-h"> <img src="/assets/qub/images/templates/14d-undergraduate-page/school-of-english-news.jpg" alt=""> </div> </div> <div class="column"> <h2 class="alt">Latest news from the School of English</h2> <h3>MA in Poetry: £10,000 scholarship available for international student</h3> <p><a title="" href="#">Find out more</a></p> </div> </div> </div></div>

Sidebar #

Sidebar

(↓) Download | </> Show code

<aside class="sidebar">
    <a href="" class="sidebar__toggle"></a>
    <nav>
        <ul>
            <li class="study active">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Sidebar open

(↓) Download | </> Show code

<aside class="sidebar open">
    <a href="" class="sidebar__toggle open"></a>
    <nav>
        <ul>
            <li class="study active">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Sidebar second level

(↓) Download | </> Show code

<aside class="sidebar open">
    <a href="" class="sidebar__toggle open"></a>
    <nav>
        <ul class="expanded">
            <li class="study active open">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Sidebar third level

(↓) Download | </> Show code

<aside class="sidebar open">
    <a href="" class="sidebar__toggle open"></a>
    <nav>
        <ul class="expanded">
            <li class="study open">
                <a href="#">
                    <span>Study</span>
                </a>
                <ul class="expanded">
                    <li>
                        <a href="#">
                            <span>Course Finder</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Undergraduate</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Postgraduate</span>
                        </a>
                    </li>
                    <li class="active open">
                        <a href="#">
                            <span>Student Stories</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <span>Eshal Amara</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Adam Taylor</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Kelly Marno</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>Zhang Wei</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="research">
                <a href="#">
                    <span>Research</span>
                </a>
            </li>
            <li class="international">
                <a href="#">
                    <span>International</span>
                </a>
            </li>
            <li class="business">
                <a href="#">
                    <span>Business</span>
                </a>
            </li>
            <li class="explore">
                <a href="#">
                    <span>Explore</span>
                </a>
            </li>
            <li class="connect">
                <a href="#">
                    <span>Connect</span>
                </a>
            </li>
            <li class="ten-reasons">
                <a href="#">
                    <span>10 Reasons</span>
                </a>
            </li>
            <li class="back-to-top">
                <a href="#">
                    <span>Back to top</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

Tabs #

Without sub menu

(↓) Download | </> Show code

<nav class="tabs" id="tabs">
    <div class="tabs__main">
        <div class="inner">
            <ul class="columns">
                <li class="column"><a href="03-course-overview#tabs" class="tab active">Overview</a></li>
                <li class="column"><a href="04-course-course#tabs" class="tab">Course</a></li>
                <li class="column"><a href="#" class="tab">Connect</a></li>
            </ul>
        </div>
    </div>
</nav>

With sub menu

(↓) Download | </> Show code

<nav class="tabs" id="tabs">
    <div class="tabs__main">
        <div class="inner">
            <ul class="columns">
                <li class="column"><a href="03-course-overview#tabs" class="tab">Overview</a></li>
                <li class="column"><a href="04-course-course#tabs" class="tab active">Course</a></li>
                <li class="column"><a href="#" class="tab">Connect</a></li>
            </ul>
        </div>
    </div>
    <div class="tabs__sub">
        <div class="inner">
            <ul class="columns max-3">
                <li class="column"><a href="#" class="tab active">Course Modules</a></li>
                <li class="column"><a href="#" class="tab">Entry Requirements</a></li>
                <li class="column"><a href="#" class="tab">Other courses you may like</a></li>
                <li class="column"><a href="#" class="tab">Fees & Scholarships</a></li>
                <li class="column"><a href="#" class="tab">Apply Now</a></li>
                <li class="column"><a href="#" class="tab">Learning & Teaching</a></li>
                <li class="column"><a href="#" class="tab">Career Prospects</a></li>
                <li class="column"><a href="#" class="tab">Assessment & Feedback</a></li>
                <li class="column"><a href="#" class="tab">Add to Virtual Prospectus</a></li>
            </ul>
        </div>
    </div>
</nav>

Toggles #

Default closed

Toggle header

Archaeology explores a wide range of evidence that documents the human past - from artefacts, monuments and settlements to entire landscapes - and from these interprets how societies have adapted and developed. Modules focus on different periods of World, European and Irish/British archaeology from human origins to modern times and heritage.

Palaeoecology studies environmental evidence to assess the impact of natural events and human activities on landscapes, climate and changing environments. Modules examine themes such as ancient environments, evolution, economic and climate change.

The combined disciplines progressively develop general and specific knowledge and skills, through excavation, fieldwork, overseas field trips, laboratory and practical work.

As well as the Single Honours BA in Archaeology and BSc in Archaeology-Palaeoecology, Queen’s offers several degrees which combine Archaeology (the study of past human activities) and Palaeoecology (the study of past environments) with other subjects (Languages, Geography and History). We have also introduced the MSci in Archaeology, which is an integrated four-year degree, whereby students can progress directly to Masters-level study in Level 4.

(↓) Download | </> Show code

<div class="toggle">
    <header class="bg--red">
        <h2>Toggle header</h2>
    </header>
    <div class="toggle__inner">
        <div class="toggle__content">
            <p>Archaeology explores a wide range of evidence that documents the human past - from artefacts, monuments and settlements to entire landscapes - and from these interprets how societies have adapted and developed. Modules focus on different periods of World, European and Irish/British archaeology from human origins to modern times and heritage.</p>
            <p>Palaeoecology studies environmental evidence to assess the impact of natural events and human activities on landscapes, climate and changing environments. Modules examine themes such as ancient environments, evolution, economic and climate change.</p>
            <p>The combined disciplines progressively develop general and specific knowledge and skills, through excavation, fieldwork, overseas field trips, laboratory and practical work.</p>
            <p>As well as the Single Honours BA in Archaeology and BSc in Archaeology-Palaeoecology, Queen’s offers several degrees which combine Archaeology (the study of past human activities) and Palaeoecology (the study of past environments) with other subjects (Languages, Geography and History). We have also introduced the MSci in Archaeology, which is an integrated four-year degree, whereby students can progress directly to Masters-level study in Level 4.</p>
        </div>
    </div>
</div>

Default open

Toggle header

Archaeology explores a wide range of evidence that documents the human past - from artefacts, monuments and settlements to entire landscapes - and from these interprets how societies have adapted and developed. Modules focus on different periods of World, European and Irish/British archaeology from human origins to modern times and heritage.

Palaeoecology studies environmental evidence to assess the impact of natural events and human activities on landscapes, climate and changing environments. Modules examine themes such as ancient environments, evolution, economic and climate change.

The combined disciplines progressively develop general and specific knowledge and skills, through excavation, fieldwork, overseas field trips, laboratory and practical work.

As well as the Single Honours BA in Archaeology and BSc in Archaeology-Palaeoecology, Queen’s offers several degrees which combine Archaeology (the study of past human activities) and Palaeoecology (the study of past environments) with other subjects (Languages, Geography and History). We have also introduced the MSci in Archaeology, which is an integrated four-year degree, whereby students can progress directly to Masters-level study in Level 4.

(↓) Download | </> Show code

<div class="toggle open">
    <header class="bg--red open">
        <h2>Toggle header</h2>
    </header>
    <div class="toggle__inner">
        <div class="toggle__content">
            <p>Archaeology explores a wide range of evidence that documents the human past - from artefacts, monuments and settlements to entire landscapes - and from these interprets how societies have adapted and developed. Modules focus on different periods of World, European and Irish/British archaeology from human origins to modern times and heritage.</p>
            <p>Palaeoecology studies environmental evidence to assess the impact of natural events and human activities on landscapes, climate and changing environments. Modules examine themes such as ancient environments, evolution, economic and climate change.</p>
            <p>The combined disciplines progressively develop general and specific knowledge and skills, through excavation, fieldwork, overseas field trips, laboratory and practical work.</p>
            <p>As well as the Single Honours BA in Archaeology and BSc in Archaeology-Palaeoecology, Queen’s offers several degrees which combine Archaeology (the study of past human activities) and Palaeoecology (the study of past environments) with other subjects (Languages, Geography and History). We have also introduced the MSci in Archaeology, which is an integrated four-year degree, whereby students can progress directly to Masters-level study in Level 4.</p>
        </div>
    </div>
</div>

Usage #

Course finder module

Explore our courses

Sign in to filter results by your A-Levels

(↓) Download | </> Show code

<div class="panel bg--grey course-finder-module">
    <div class="inner">
        <h2 class="alt">Explore our courses</h2>
        <p>Sign in to filter results by your A-Levels</p>
        <div class="form__field">
            <select>
                <option>Undergraduate 2015/16</option>
                <option>Undergraduate 2016/17</option>
            </select>
            <button>Find a course</button>
        </div>
    </div>
</div>

Unistats

(↓) Download | </> Show code

<div class="panel bg--unistats">
    <div class="inner">
        <iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="http://widget.unistats.ac.uk/Widget/10005343/ARP-BSC-S/horizontal/small" scrolling="no" style="overflow: hidden; border: 0px none transparent; width: 620px; height: 150px;"></iframe>
    </div>
</div>