Introduction

This is the University of Dundee's pattern library for the web. This is an essential resource for anyone involved in the creation of content, layouts, templates and websites that will become part of the University's digital presence. The purpose of this guide is to help maintain a consistent digital style and visual language. Everything here has its own visual example and source code which you can use to decrease production time.

This guide is based largely on the principles of atomic design. The key idea of this methodology is that small, independent (atomic) parts such as form buttons and labels, can be combined into larger molecular structures such as forms. Molecular structures can be combined into larger organisms such as the website header, which can then serve as the foundation for templates and full pages.

Brand

Brand is the look, feel and tone of everything we produce to market and promote the University. In January 2017, we refreshed our brand to make it easier for all in the University community to effectively promote Dundee.

To help ensure maximum impact of this new brand, it is vital that colours, fonts and styles are applied consistently. Any specific guidance provided for the components within this pattern library, especially for colours and our custom font, Baxter Sans.

Project launches and support

We would ask that prior to launch, all new digital design work is passed to the Web Services team for review. We will work with you to ensure that we get the best results possible for your project, as well as ensuring quality standards for the University of Dundee brand are met.

Please also get in touch with us for general support for this pattern library.

How to contact Web Services

Colors

Core

Core colour 1

#4365E2

✓ Suitable for: Brand bar, brand logo, buttons

x Unsuitable for: Text links, headings, backgrounds

Highlight

Hightlight colour 1

#FF6264

✓ Suitable for: Gradients over images

x Unsuitable for: Text, links, headings, backgrounds, buttons

Hightlight colour 2

#01D17C

✓ Suitable for: Gradients over images

x Unsuitable for: Text, links, headings, backgrounds, buttons

Hightlight colour 3

#3B3B3B

✓ Suitable for: Body text, headings, secondary buttons

x Unsuitable for: links, backgrounds, primary buttons

Block colours

Block colour 1

#DDD9D6

✓ Suitable for: Backgrounds for text blocks, borders

x Unsuitable for: Text, links, headings, background for websites, buttons

Block colour 2

#F4CEC3

✓ Suitable for: Backgrounds for text blocks

x Unsuitable for: Text, links, headings, background for websites, buttons

Block colour 3

#FFECD2

✓ Suitable for: Backgrounds for text blocks

x Unsuitable for: Text, links, headings, background for websites, buttons

Block colour 4

#D1E2F2

✓ Suitable for: Backgrounds for text blocks

x Unsuitable for: Text, links, headings, background for websites, buttons

Block colour 5

#C4EBD0

✓ Suitable for: Backgrounds for text blocks

x Unsuitable for: Text, links, headings, background for websites, buttons

Text link

Text link

#2649CA

✓ Suitable for: Text links only

x Unsuitable for: All other elements

Background

Background colour

#FFFAF5

✓ Suitable for: Background for body

x Unsuitable for: All other elements

Background colour

#FFFFFF

✓ Suitable for: Background for body¹, backgrounds for text blocks, button backgrounds and text

x Unsuitable for: All other elements

¹ Only suitable for body background in exceptional circumstances

Font stacks

Font Normal:: "Baxter Sans Regular", Helvetica, Arial, sans-serif;
Font Italic:: "Baxter Sans Regular Italic", Helvetica, Arial, sans-serif;
Font Medium:: "Baxter Sans Medium", Helvetica, Arial, sans-serif;
Font Medium Italic:: "Baxter Sans Medium Italic", Helvetica, Arial, sans-serif;
Font Semibold:: "Baxter Sans Semibold", Helvetica, Arial, sans-serif;
Font Semibold Italic:: "Baxter Sans Semibold Italic", Helvetica, Arial, sans-serif;
Font Bold:: "Baxter Sans Bold", Helvetica, Arial, sans-serif;
Font Bold Italic:: "Baxter Sans Bold Italic", Helvetica, Arial, sans-serif;

Icons

Search Icon
.fa-search

Right Angle Arrow
.fa-angle-right

Home Icon
.fa-home

Twitter
.fa-twitter-square

Facebook
.fa-facebook-square

YouTube
.fa-youtube-square

Solid Arrow Right
.fa-caret-right

Calendar
.fa-calendar

Clock
.fa-clock-o

Building
.fa-building

Globe
.fa-globe

Book
.fa-book

Arrow Up
.fa-arrow-up

File
.fa-file-o

External Link
.fa-external-link-square

Email
.fa-envelope-o

Event Ticket
.fa-ticket

Plus Icon
.fa-plus-circle

Minus Icon
.fa-minus-circle

Phone
.fa-phone

Information
.fa-info-circle

Eye
.fa-eye

Desktop
.fa-desktop

Marker
.fa-map-marker

Cloud Download
.fa-cloud-download

Shield
.fa-shield

Times
.fa-times

Check
.fa-check

Check Square
.fa-check-square

Train
.fa-train

Plane
.fa-plane

Thumbnail
.fa-th-large

List
.fa-list-ul

Login
.fa-sign-in

Help
.fa-question-circle

Comment
.fa-comment

User
.fa-user

Grid example

The 12 column grid can be used for aligning components and assisting in responsive behavior. It is not intended to be the only solution for aligning components.

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-1

col-sm-2

col-sm-2

col-sm-2

col-sm-2

col-sm-2

col-sm-2

col-sm-3

col-sm-3

col-sm-3

col-sm-3

col-sm-4

col-sm-4

col-sm-4

col-sm-6

col-sm-6

Links

By default, links contained within a paragraph tag will be blue in color and underlined.

Default Link and Hover Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus neque sed elit luctus, nec tempus mi malesuada. In consectetur id dui at tincidunt. Quisque nulla urna, finibus sed mauris ut, efficitur fermentum ex. Suspendisse vestibulum sollicitudin libero ut feugiat. Quisque egestas risus vitae est aliquet, ac suscipit ligula bibendum. Vivamus blandit, nisi vel suscipit eleifend, nisi ante aliquet enim, a eleifend leo odio id libero. In euismod at sem ac porta.

External Link Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus neque sed elit luctus, nec tempus mi malesuada. In consectetur id dui at tincidunt. Quisque nulla urna, finibus sed mauris ut, efficitur fermentum ex. Suspendisse vestibulum sollicitudin libero ut feugiat. Quisque egestas risus vitae est aliquet, ac suscipit ligula bibendum. Vivamus blandit, nisi vel suscipit eleifend, nisi ante aliquet enim, a eleifend leo odio id libero. In euismod at sem ac porta.

List link example

components

accordion

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

<div class="faq faq-kb ">
    <div class="faq-q" data-faq-section="About" data-faq-url="#" data-faq-tags=""><a href="#">Lorem ipsum dolor sit amet</a></div>
    <div class="faq-a" style="display: none;">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, urna non bibendum porta, mauris risus pellentesque orci, quis dignissim erat lectus pulvinar enim. Cras et nisl vel ante pharetra ultricies sed id mauris. Vestibulum ac
            mi mauris. Aenean vel dignissim velit, facilisis commodo dolor. Sed venenatis tristique magna, et iaculis justo auctor eget. Donec eleifend ultrices urna, quis dignissim erat ornare vel. Duis aliquam ut dolor vel auctor. Suspendisse tempor
            velit efficitur neque tristique, sed auctor lorem porttitor. Morbi pellentesque nulla ac libero vehicula hendrerit. Etiam lorem lacus, rhoncus nec ex eu, aliquet ullamcorper justo. Maecenas interdum elit non rutrum tempor. Nulla laoreet ornare
            bibendum. Nam ut urna urna. Suspendisse euismod elit quis metus commodo, ac luctus libero fermentum. Nunc vitae viverra enim. Quisque at leo non mauris suscipit elementum at a ligula. </p>
    </div>
</div>

<div class="faq faq-kb ">
    <div class="faq-q" data-faq-section="About" data-faq-url="#" data-faq-tags=""><a href="#">Lorem ipsum dolor sit amet</a></div>
    <div class="faq-a" style="display: none;">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, urna non bibendum porta, mauris risus pellentesque orci, quis dignissim erat lectus pulvinar enim. Cras et nisl vel ante pharetra ultricies sed id mauris. Vestibulum ac
            mi mauris. Aenean vel dignissim velit, facilisis commodo dolor. Sed venenatis tristique magna, et iaculis justo auctor eget. Donec eleifend ultrices urna, quis dignissim erat ornare vel. Duis aliquam ut dolor vel auctor. Suspendisse tempor
            velit efficitur neque tristique, sed auctor lorem porttitor. Morbi pellentesque nulla ac libero vehicula hendrerit. Etiam lorem lacus, rhoncus nec ex eu, aliquet ullamcorper justo. Maecenas interdum elit non rutrum tempor. Nulla laoreet ornare
            bibendum. Nam ut urna urna. Suspendisse euismod elit quis metus commodo, ac luctus libero fermentum. Nunc vitae viverra enim. Quisque at leo non mauris suscipit elementum at a ligula. </p>
    </div>
</div>

<div class="faq faq-kb ">
    <div class="faq-q" data-faq-section="About" data-faq-url="#" data-faq-tags=""><a href="#">Lorem ipsum dolor sit amet</a></div>
    <div class="faq-a" style="display: none;">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, urna non bibendum porta, mauris risus pellentesque orci, quis dignissim erat lectus pulvinar enim. Cras et nisl vel ante pharetra ultricies sed id mauris. Vestibulum ac
            mi mauris. Aenean vel dignissim velit, facilisis commodo dolor. Sed venenatis tristique magna, et iaculis justo auctor eget. Donec eleifend ultrices urna, quis dignissim erat ornare vel. Duis aliquam ut dolor vel auctor. Suspendisse tempor
            velit efficitur neque tristique, sed auctor lorem porttitor. Morbi pellentesque nulla ac libero vehicula hendrerit. Etiam lorem lacus, rhoncus nec ex eu, aliquet ullamcorper justo. Maecenas interdum elit non rutrum tempor. Nulla laoreet ornare
            bibendum. Nam ut urna urna. Suspendisse euismod elit quis metus commodo, ac luctus libero fermentum. Nunc vitae viverra enim. Quisque at leo non mauris suscipit elementum at a ligula. </p>
    </div>
</div>


<!-- CSS -->
<style>
    .faq-panel {
        margin: 2em 0 3em !important;
    }

    .faq-container {
        margin: 1em 0 2em;
    }

    .faq-panel .faq {
        background-color: #fff;
        border: 1px solid #ecf0f1;
        border-radius: 0;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        margin-bottom: 21px;
    }

    .faq-panel .faq .faq-q {
        background-color: #d1e2f2;
        border: 0 none;
        color: #3b3b3b;
    }

    .faq-q {
        transition: all 0.2s linear 0s;
    }

    .faq-q>a::before {
        color: #4365e2 !important;
    }

    .faq-q>a::before {
        color: #b4bcc2;
        content: "";
        font-family: FontAwesome;
        margin-bottom: 10px;
        padding-right: 8px;
    }

    *::before,
    *::after {
        box-sizing: border-box;
    }

    *::before,
    *::after {
        box-sizing: border-box;
    }

    .faq-panel .faq .faq-q a {
        font-size: 18px;
        font-weight: 500;
    }

    .faq-panel .faq .faq-q a {
        display: block;
        padding: 10px 15px;
    }

    .faq-q>a {
        transition: all 0.2s linear 0s;
    }

    .faq-panel .faq .faq-a {
        padding: 15px;
    }

    .js .faq-a {
        display: none;
    }

    .faq-a {
        margin-top: 0.5em;
    }
</style>

blockquote

"having its head in the clouds and its feet firmly on the ground."

<blockquote>
    <p>
        "having its head in the clouds and its feet firmly on the ground."
    </p>
</blockquote>


<!-- CSS -->

<style>
    blockquote {
        margin: 0 0 21px;
        padding: 10.5px 21px;
        border-left-color: #d8d4d1;
        font-size: 1em;
        line-height: 1.8em;
    }
</style>

branding bar top

<div class="navbar navbar-site navbar-default" role="navigation">
    <div class="navbar-main">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <div class="logo-group clearfix">
                        <a class="logo-mark" href="//www.dundee.ac.uk/"><img src="images/UoD-Logo-Reverse.png" alt="logo" style="max-width:70%;"></a>
                    </div>
                </div>
                <div class="navbar-collapse collapse navbar-responsive-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Study</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Student Life</a></li>
                        <li><a href="#">Research</a></li>
                        <li><a href="#">Industry</a></li>
                        <li><a href="#">Alumni</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- / .navbar-main -->

    <div class="clearfix"></div>
</div>


<!-- CSS -->
<style>
    .navbar-main {
        background: #4365e2 none repeat scroll 0 0;
    }

    .navbar-header {
        float: left;
    }

    .navbar-site a {
        color: #ffffff;
    }

    .navbar-brand {
        float: left;
    }

    .navbar-brand {
        padding: 18.5px 15px 20.5px;
    }

    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }

    .navbar-main .nav {
        font-size: 1.25em;
    }

    .navbar-main .nav {
        margin-top: 23px;
        text-shadow: none;
    }

    .navbar-nav>li {
        float: left;
    }

    .nav>li {
        display: block;
        position: relative;
    }

    .navbar-fixed-top .navbar-main .nav li a::after,
    .navbar-fixed-notapplied .navbar-main .nav li a::after {
        display: none !important;
    }

    .js .navbar-main .nav li a::after {
        display: block;
    }

    .navbar-main .nav li a::after {
        transition: all 0.2s linear 0s;
    }

    .navbar-main .nav li a {
        color: #fff;
        transition: all 0.2s linear 0s;
    }

    .navbar-main .nav li a:hover {
        color: #fff;
        text-decoration: underline;
    }

    .navbar-main .nav>li>a {
        padding: 10px 17px;
    }
</style>

breadcrumbs

<ul class="breadcrumb">
	<li><a title="" href="/"><span class="fa fa-home"></span></a></li>
	<li><a href="#">Study</a> <span>/</span> <a href="#">Undergraduate</a> <span>/</span> Accountancy</li>
</ul>

buttons

Button With Info Icon

Promo Button and Right Arrow

<a class="btn btn-primary" href="#">Primary Button</a>
<br />
<div class="course-fixed-finder">
	<a class="btn-primary" href="#"><i class="fa fa-search"></i> <span>Course Search</span></a>
</div>
<br />
<a href="#" style="padding: 8px 10px; font-size: 0.8em;" class="btn-primary"><span class="fa fa-info-circle" style="font-size: 1.2em; padding-right: 5px;">&nbsp;</span>Button With Info Icon</a>
<br />
<br />
<a class="btn btn-primary" href="#">Promo Button and Right Arrow <i class="fa fa-long-arrow-right"></i></a>


<!-- CSS -->

<style>

.btn-primary{
  background: #fff none repeat scroll 0 0;
  border: 1px solid #4365e2;
  color: #4365e2;
}

.btn {
  font-family: "Baxter Sans Bold", Helvetica, Arial, sans-serif;;
  font-weight: 700;
  padding: 10px;
}

.btn-primary:hover, .btn-primary:focus{
  background: #4365e2 none repeat scroll 0 0 !important;
  border-color: #4365e2 !important;
  color: #fff;
}

</style>

figure

Figure With Link

Craniofacial Depiction for Forensic Identification and Archaeological Investigat

Craniofacial Depiction for Forensic Identification and Archaeological Investigation

Figure With No Link

Craniofacial Depiction for Forensic Identification and Archaeological Investigat

Craniofacial Depiction for Forensic Identification and Archaeological Investigation

<h3>Figure With Link</h3>
<div class="figure"><span class="mceNonEditable"><a href="#"><img class="img-responsive" title="Craniofacial Depiction for Forensic Identification and Archaeological Investigat" alt="Craniofacial Depiction for Forensic Identification and Archaeological Investigat" src="images/figure.jpg"></a></span>
<p><a href="#" class="noicon">Craniofacial Depiction for Forensic Identification and Archaeological Investigation</a></p>
</div>


<h3>Figure With No Link</h3>
<div class="figure"><span class="mceNonEditable"><img class="img-responsive" title="Craniofacial Depiction for Forensic Identification and Archaeological Investigat" alt="Craniofacial Depiction for Forensic Identification and Archaeological Investigat" src="images/figure2.jpg"></span>
<p>Craniofacial Depiction for Forensic Identification and Archaeological Investigation</p>
</div>

form elements

Text Input

Family Name (Surname) *

First and Middle Names *

Dropdown Selection

Gender *

Who is filling in this form? *

Radio Button

Were you born in the UK? * YesNo

Text Area

Additional Info

Add Another Button

Input Error

Personal Details

Title *

This field is required.

Family Name (Surname) *

This field is required.

First and Middle Names *

This field is required.

Date of Birth * Date format (dd/mm/yyyy)

This field is required.

Gender *

This field is required.

Who is filling in this form? *

This field is required.

This section is required.

<div class="wFormContainer">

	<div class="wForm wFormdefaultWidth">

		<h3>Text Input</h3>
		<div class="oneField labelsAbove" id="tfa_FamilyNameSurnam-D">
			<label for="tfa_FamilyNameSurnam" class="preField">Family Name (Surname) <span class="reqMark">*</span></label> <input type="text" class="required" size="40" value="" name="tfa_FamilyNameSurnam" id="tfa_FamilyNameSurnam"> <br>
		</div>
		<div class="oneField labelsAbove" id="tfa_FirstandMiddleNa-D">
			<label for="tfa_FirstandMiddleNa" class="preField">First and Middle Names <span class="reqMark">*</span></label> <input type="text" class="required" size="40" value="" name="tfa_FirstandMiddleNa" id="tfa_FirstandMiddleNa"> <br>
		</div>
		<h3>Dropdown Selection</h3>
		<div class="oneField labelsAbove" id="tfa_Gender-D">
			<label for="tfa_Gender" class="preField">Gender <span class="reqMark">*</span></label> <select class="required" name="tfa_Gender" id="tfa_Gender"><option value="">Please select...</option>
			<option class="" value="tfa_Male">Male</option>
			<option class="" value="tfa_Female">Female</option>
			<option class="" value="tfa_Mx1">Mx</option></select> <br>
		</div>
		<div class="oneField labelsAbove" id="tfa_Whoisfillinginth-D">
			<label for="tfa_Whoisfillinginth" class="preField">Who is filling in this form? <span class="reqMark">*</span></label> <select class="required" name="tfa_Whoisfillinginth" id="tfa_Whoisfillinginth"><option value="">Please select...</option>
			<option class="" value="tfa_Applicant">Applicant</option>
			<option class="" value="tfa_ParentGuardian">Parent/Guardian</option>
			<option class="" value="tfa_Agent">Agent</option>
			<option class="" value="tfa_Partner">Partner</option>
			<option class="" value="tfa_Friend">Friend</option>
			<option class="" value="tfa_Other">Other</option></select> <br>
		</div>
		<h3>Radio Button</h3>
		<div class="oneField labelsAbove" id="tfa_Wereyouborninthe-D">
			<label class="preField">Were you born in the UK? <span class="reqMark">*</span></label> <span class="choices required" id="tfa_Wereyouborninthe"><span class="oneChoice"><input type="radio" name="tfa_Wereyouborninthe" id="tfa_Yes2" class="" value="tfa_Yes2" rel=" wfHandled"><label class="postField" for="tfa_Yes2">Yes</label></span><span class="oneChoice"><input type="radio" name="tfa_Wereyouborninthe" id="tfa_No2" class="switch-c" value="tfa_No2" rel=" wfHandled"><label class="postField" for="tfa_No2">No</label></span></span> <br>
		</div>
		<h3>Text Area</h3>
		<div class="oneField labelsAbove" id="tfa_AdditionalInfo1-D">
			<label for="tfa_AdditionalInfo1" class="preField">Additional Info</label> <textarea class="" name="tfa_AdditionalInfo1" id="tfa_AdditionalInfo1" rows="4" cols="40"></textarea> <br>
		</div>
		<h3>Add Another Button</h3>
		<span class="duplicateSpan"><a href="#" class="duplicateLink" id="tfa_6856035844928-wfDL">+ Add another</a></span>
		<h3>Input Error</h3>
		<div class="wfSection required-one errFld" id="tfa_GeneralDetails">
			<div id="html-tmp-5590820941750" class="htmlsection"><h3>Personal Details</h3></div>
			<div class="oneField labelsAbove errFld" id="tfa_Title-D">
				<label for="tfa_Title" class="preField">Title <span class="reqMark">*</span></label> <select class="required" name="tfa_Title" id="tfa_Title"><option value="">Please select...</option>
				<option class="" value="tfa_Mr">Mr.</option>
				<option class="" value="tfa_Miss">Miss.</option>
				<option class="" value="tfa_Ms">Ms.</option>
				<option class="" value="tfa_Mrs">Mrs.</option>
				<option class="" value="tfa_Mx">Mx.</option>
				<option class="" value="tfa_Dr">Dr.</option>
				<option class="" value="tfa_Prof">Prof.</option>
				<option class="" value="tfa_Rev">Rev.</option></select> <br>
				<div id="tfa_Title-E" class="errMsg"><span>This field is required.</span></div></div>
				<div class="oneField labelsAbove errFld" id="tfa_FamilyNameSurnam-D">
					<label for="tfa_FamilyNameSurnam" class="preField">Family Name (Surname) <span class="reqMark">*</span></label> <input type="text" class="required" size="40" value="" name="tfa_FamilyNameSurnam" id="tfa_FamilyNameSurnam"> <br>
					<div id="tfa_FamilyNameSurnam-E" class="errMsg"><span>This field is required.</span></div></div>
					<div class="oneField labelsAbove errFld" id="tfa_FirstandMiddleNa-D">
						<label for="tfa_FirstandMiddleNa" class="preField">First and Middle Names <span class="reqMark">*</span></label> <input type="text" class="required" size="40" value="" name="tfa_FirstandMiddleNa" id="tfa_FirstandMiddleNa"> <br>
						<div id="tfa_FirstandMiddleNa-E" class="errMsg"><span>This field is required.</span></div></div>
						<div class="oneField labelsAbove errFld" id="tfa_DateofBirth-D">
							<label for="tfa_DateofBirth" class="preField">Date of Birth <span class="reqMark">*</span></label> <input type="text" class="validate-date required" size="12" value="" name="tfa_DateofBirth" id="tfa_DateofBirth"> <span id="tfa_DateofBirth-H" class="field-hint-inactive"><span>Date format (dd/mm/yyyy)</span></span><br>
							<div id="tfa_DateofBirth-E" class="errMsg"><span>This field is required.</span></div></div>
							<div class="oneField labelsAbove errFld" id="tfa_Gender-D">
								<label for="tfa_Gender" class="preField">Gender <span class="reqMark">*</span></label> <select class="required" name="tfa_Gender" id="tfa_Gender"><option value="">Please select...</option>
								<option class="" value="tfa_Male">Male</option>
								<option class="" value="tfa_Female">Female</option>
								<option class="" value="tfa_Mx1">Mx</option></select> <br>
								<div id="tfa_Gender-E" class="errMsg"><span>This field is required.</span></div></div>
								<div class="oneField labelsAbove errFld" id="tfa_Whoisfillinginth-D">
									<label for="tfa_Whoisfillinginth" class="preField">Who is filling in this form? <span class="reqMark">*</span></label> <select class="required" name="tfa_Whoisfillinginth" id="tfa_Whoisfillinginth"><option value="">Please select...</option>
									<option class="" value="tfa_Applicant">Applicant</option>
									<option class="" value="tfa_ParentGuardian">Parent/Guardian</option>
									<option class="" value="tfa_Agent">Agent</option>
									<option class="" value="tfa_Partner">Partner</option>
									<option class="" value="tfa_Friend">Friend</option>
									<option class="" value="tfa_Other">Other</option></select> <br>
									<div id="tfa_Whoisfillinginth-E" class="errMsg"><span>This field is required.</span></div></div>
									<div id="tfa_GeneralDetails-E" class="errMsg"><span>This section is required.</span></div></div>
								</div>
							</div>

headings

Main Page header h1

H1 in Article

Header Two Sample h2

Header Three Sample h3

Header Four Sample h4

Header Five Sample h5

Header Six Sample h6

<div class="heading-examples">
	<h1>Main Page header h1</h1>
	<article>
		<h1>H1 in Article</h1>
	</article>
	<h2>Header Two Sample h2</h2>
	<h3>Header Three Sample h3</h3>
	<h4>Header Four Sample h4</h4>
	<h5>Header Five Sample h5</h5>
	<h6>Header Six Sample h6</h6>
	<!-- <p>We're an established university with a progressive and dynamic outlook. Our international reputation attracts top-class students and academics from across the world, with well over 100 countries represented in the University community.</p>
	<p class="headline">Research at the University of Dundee has been ranked among the very best in the UK in the Research Excellence Framework 2014.</p>
	<div class="content fact">
		<h5 class="fact-colour-1">100<span class="fact-pullout-small">%</span></h5>
	</div> -->
</div>

layouts

Homepage Desktop

desk

Homepage Tablet

tab

Homepage Mobile

mob

Double Sidebar Desktop

desk

Double Sidebar Tablet

tab

Double Sidebar Mobile

mob

Single Sidebar Desktop

desk

Single Sidebar Tablet

tab

Single Sidebar Mobile

mob

<div class="layouts">
    <h3>Homepage Desktop</h3>
    <img src="images/home-desktop.jpg" alt="desk">
    <h3>Homepage Tablet</h3>
    <img src="images/home-tablet.jpg" alt="tab">
    <h3>Homepage Mobile</h3>
    <img src="images/home-mobile.jpg" alt="mob">


    <h3>Double Sidebar Desktop</h3>
    <img src="images/double-desktop.jpg" alt="desk">
    <h3>Double Sidebar Tablet</h3>
    <img src="images/double-tablet.jpg" alt="tab">
    <h3>Double Sidebar Mobile</h3>
    <img src="images/double-mobile.jpg" alt="mob">

    <h3>Single Sidebar Desktop</h3>
    <img src="images/single-desktop.jpg" alt="desk">
    <h3>Single Sidebar Tablet</h3>
    <img src="images/single-tablet.jpg" alt="tab">
    <h3>Single Sidebar Mobile</h3>
    <img src="images/single-mobile.jpg" alt="mob">
</div>

list alphabet

list item 1
list item 2
list item 3
list item 4

<ol type="a">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ol>

list ordered

list item 1
list item 2
list item 3
list item 4

<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ol>

list unordered

list item 1

list item 1
list item 2
list item 3
list item 4

list item 1
list item 2
list item 3
list item 4

list item 2
list item 3
list item 4

<ul>
	<li>list item 1</li>
	<ul>
		<li>list item 1</li>
		<li>list item 2</li>
		<li>list item 3</li>
		<li>list item 4</li>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
		</ul>
	</ul>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
</ul>

logos

University Blue Shield

University Blue Logo and Text

University Logo Reverse

School Logo

Please contact Creative Services for a bespoke version of the logo, if required

Contact Creative Services

<div class="main-logos">
   <div class="main-logos__shield">
    <h3>University Blue Shield</h3>
    <p><img src="images/uod-shield.jpg" alt="logo" class="sd-logo logo-shield" /></p>
    <p><img src="images/uod-shield@2x.jpg" alt="logo" class="retina-logo" /></p>
   </div>

   <div class="main-logos__primary">
    <h3>University Blue Logo and Text</h3>
    <p><img src="images/UoD-Logo-Blue.jpg" alt="logo" class="sd-logo logo-primary" /></p>
    <p><img src="images/UoD-Logo-Blue@2x.jpg" alt="logo" class="retina-logo" /></p>
   </div>

   <div class="main-logos__secondary">
    <h3>University Logo Reverse</h3>
    <p><img src="images/UoD-Logo-Reverse.jpg" alt="logo" class="sd-logo logo-secondary" /></p>
    <p><img src="images/UoD-Logo-Reverse@2x.jpg" alt="logo" class="retina-logo" /></p>
   </div>

   <div class="main-logos__school">
    <h3>School Logo</h3>
    <p><img src="images/sls.jpg" alt="logo" class="sd-logo" /></p>
    <p><img src="images/sls@2x.jpg" alt="logo" class="retina-logo" /></p>
   </div>

    <div class="info">
      <p>
        Please contact Creative Services for a bespoke version of the logo, if required
      </p>
      <p><a href="https://www.dundee.ac.uk/externalrelations/design-print/design/" class="btn btn-primary btn-lg" target="_blank">Contact Creative Services &nbsp;<i class="fa fa-long-arrow-right"></i></a></p>
    </div>
</div>

media

Video

Image with Text

Animation at Dundee

We offer a wide range of opportunities for contemporary animators. These include narrative storytelling, visual effects and visualisation.

Image by Birte Niedermeyer

<!--<h3>Circle Image</h3>
<img class="img-circle" src="images/opendaypanel_01.jpg">-->
<h3>Video</h3>
<div class="figure">
    <div class="container-video-play">
        <a style="font-size: 5em; width: 90px; height:80px;" data-fancybox-group="gallery" class="fancybox fancybox.iframe fa fa-youtube-play video-play" href="//www.youtube.com/embed/lDAyrRw0hcA"></a>
        <img class="" style="width : 1784px;
        height : 1004px;
        border : ;
        padding : ;
        margin : ;
        float : ;" title="" alt="" src="images/drone-thumb.png">
    </div>
</div>
<br>
<h3>Image with Text</h3>
<div class="imageinfo">
    <div style=" " class="info">
        <h4>Animation at Dundee</h4>
        <p>We offer a wide range of opportunities for contemporary animators. These include narrative storytelling, visual effects and visualisation.</p>
    </div>
    <img class="" style="width : 558px;
    height : 324px;
    border : ;
    padding : ;
    margin : ;
    float : ;" title="Image by Birte Niedermeyer" alt="Image by Birte Niedermeyer" src="images/Animation1.gif">
</div>

pagination

<ul class="pagination"><li style="display: inline;"> <span class="currentpage">1</span> </li><li style="display: inline;"> <a href="/news/2/index.php">2</a> <a href="#">...&nbsp;&nbsp;</a></li><li style="display: none;"> <a href="/news/3/index.php">3</a> </li><li style="display: none;"> <a href="/news/4/index.php">4</a> </li><li style="display: none;"> <a href="/news/5/index.php">5</a> </li><li style="display: none;"> <a href="/news/6/index.php">6</a> </li><li style="display: none;"> <a href="/news/7/index.php">7</a> </li><li style="display: none;"> <a href="/news/8/index.php">8</a> </li><li style="display: none;"> <a href="/news/9/index.php">9</a> </li><li style="display: none;"> <a href="/news/10/index.php">10</a> </li><li style="display: none;"> <a href="/news/11/index.php">11</a> </li><li style="display: none;"> <a href="/news/12/index.php">12</a> </li><li style="display: none;"> <a href="/news/13/index.php">13</a> </li><li style="display: none;"> <a href="/news/14/index.php">14</a> </li><li style="display: none;"> <a href="/news/15/index.php">15</a> </li><li style="display: none;"> <a href="/news/16/index.php">16</a> </li><li style="display: none;"> <a href="/news/17/index.php">17</a> </li><li style="display: none;"> <a href="/news/18/index.php">18</a> </li><li style="display: none;"> <a href="/news/19/index.php">19</a> </li><li style="display: none;"> <a href="/news/20/index.php">20</a> </li><li style="display: none;"> <a href="/news/21/index.php">21</a> </li><li style="display: none;"> <a href="/news/22/index.php">22</a> </li><li style="display: none;"> <a href="/news/23/index.php">23</a> </li><li style="display: none;"> <a href="/news/24/index.php">24</a> </li><li style="display: none;"> <a href="/news/25/index.php">25</a> </li><li style="display: none;"> <a href="/news/26/index.php">26</a> </li><li style="display: none;"> <a href="/news/27/index.php">27</a> </li><li style="display: none;"> <a href="/news/28/index.php">28</a> </li><li style="display: none;"> <a href="/news/29/index.php">29</a> </li><li style="display: none;"> <a href="/news/30/index.php">30</a> </li><li style="display: none;"> <a href="/news/31/index.php">31</a> </li><li style="display: none;"> <a href="/news/32/index.php">32</a> </li><li style="display: none;"> <a href="/news/33/index.php">33</a> </li><li style="display: none;"> <a href="/news/34/index.php">34</a> </li><li style="display: none;"> <a href="/news/35/index.php">35</a> </li><li style="display: none;"> <a href="/news/36/index.php">36</a> </li><li style="display: none;"> <a href="/news/37/index.php">37</a> </li><li style="display: none;"> <a href="/news/38/index.php">38</a> </li><li style="display: none;"> <a href="/news/39/index.php">39</a> </li><li style="display: none;"> <a href="/news/40/index.php">40</a> </li><li style="display: none;"> <a href="/news/41/index.php">41</a> </li><li style="display: none;"> <a href="/news/42/index.php">42</a> </li><li style="display: none;"> <a href="/news/43/index.php">43</a> </li><li style="display: none;"> <a href="/news/44/index.php">44</a> </li><li style="display: none;"> <a href="/news/45/index.php">45</a> </li><li style="display: none;"> <a href="/news/46/index.php">46</a> </li><li style="display: none;"> <a href="/news/47/index.php">47</a> </li><li style="display: none;"> <a href="/news/48/index.php">48</a> </li><li style="display: none;"> <a href="/news/49/index.php">49</a> </li><li style="display: none;"> <a href="/news/50/index.php">50</a> </li><li style="display: none;"> <a href="/news/51/index.php">51</a> </li><li style="display: none;"> <a href="/news/52/index.php">52</a> </li><li style="display: none;"> <a href="/news/53/index.php">53</a> </li><li style="display: none;"> <a href="/news/54/index.php">54</a> </li><li style="display: none;"> <a href="/news/55/index.php">55</a> </li><li style="display: none;"> <a href="/news/56/index.php">56</a> </li><li style="display: none;"> <a href="/news/57/index.php">57</a> </li><li style="display: none;"> <a href="/news/58/index.php">58</a> </li><li style="display: none;"> <a href="/news/59/index.php">59</a> </li><li style="display: none;"> <a href="/news/60/index.php">60</a> </li><li style="display: none;"> <a href="/news/61/index.php">61</a> </li><li style="display: none;"> <a href="/news/62/index.php">62</a> </li><li style="display: none;"> <a href="/news/63/index.php">63</a> </li><li style="display: none;"> <a href="/news/64/index.php">64</a> </li><li style="display: none;"> <a href="/news/65/index.php">65</a> </li><li style="display: none;"> <a href="/news/66/index.php">66</a> </li><li style="display: none;"> <a href="/news/67/index.php">67</a> </li><li style="display: none;"> <a href="/news/68/index.php">68</a> </li><li style="display: none;"> <a href="/news/69/index.php">69</a> </li><li style="display: none;"> <a href="/news/70/index.php">70</a> </li><li style="display: none;"> <a href="/news/71/index.php">71</a> </li><li style="display: none;"> <a href="/news/72/index.php">72</a> </li><li style="display: none;"> <a href="/news/73/index.php">73</a> </li><li style="display: none;"> <a href="/news/74/index.php">74</a> </li><li style="display: none;"> <a href="/news/75/index.php">75</a> </li><li style="display: none;"> <a href="/news/76/index.php">76</a> </li><li style="display: none;"> <a href="/news/77/index.php">77</a> </li><li style="display: none;"> <a href="/news/78/index.php">78</a> </li><li style="display: none;"> <a href="/news/79/index.php">79</a> </li><li style="display: none;"> <a href="/news/80/index.php">80</a> </li><li style="display: none;"> <a href="/news/81/index.php">81</a> </li><li style="display: none;"> <a href="/news/82/index.php">82</a> </li><li style="display: none;"> <a href="/news/83/index.php">83</a> </li><li style="display: none;"> <a href="/news/84/index.php">84</a> </li><li style="display: none;"> <a href="/news/85/index.php">85</a> </li><li style="display: none;"> <a href="/news/86/index.php">86</a> </li><li style="display: none;"> <a href="/news/87/index.php">87</a> </li><li style="display: none;"> <a href="/news/88/index.php">88</a> </li><li style="display: none;"> <a href="/news/89/index.php">89</a> </li><li style="display: none;"> <a href="/news/90/index.php">90</a> </li><li style="display: none;"> <a href="/news/91/index.php">91</a> </li><li style="display: none;"> <a href="/news/92/index.php">92</a> </li><li style="display: none;"> <a href="/news/93/index.php">93</a> </li><li style="display: none;"> <a href="/news/94/index.php">94</a> </li><li style="display: none;"> <a href="/news/95/index.php">95</a> </li><li style="display: none;"> <a href="/news/96/index.php">96</a> </li><li style="display: inline;"> <a href="/news/97/index.php">97</a> <a href="/news/2/index.php">&gt;</a> <a href="/news/97/index.php">&gt;&gt;</a></li></ul>

student quotes

I'd definitely recommend Dundee - the 50-50 mix of placements and theory spread through the year is a great way to make the links between theory and practice and the staff are all so supportive. Our campus is great too and our skills centre lets us get important hands on practice in a safe environment.

The highlight has been seeing myself progress from a slightly unsure and a bit nervous first year into a soon to be qualified third year who has gained the skills and knowledge needed to be a newly registered nurse. It's honestly amazing how much you learn in three little years.

Morven Kyle
current student

<div class="content-expand-container student-profile">
    <div class="content-expand row">
        <div class="col-md-11 col-md-offset-1">
            <div class="contents">
                <img class="img-circle" style="float:right;width:auto !important; margin:.5em 0em 1em 1em; margin-bottom:1em" src="https://www.dundee.ac.uk/media/dundeewebsite/study/coursepg/humanclinicalembryologyandassisted/Morven_Kyle.jpg" alt="">
                <p>I'd definitely recommend Dundee - the 50-50 mix of placements and theory spread through the year is a great way to make the links between theory and practice and the staff are all so supportive. Our campus is great too and our skills centre
                    lets us get important hands on practice in a safe environment.</p>
                <p>The highlight has been seeing myself progress from a slightly unsure and a bit nervous first year into a soon to be qualified third year who has gained the skills and knowledge needed to be a newly registered nurse. It's honestly amazing
                    how much you learn in three little years.</p>
                <div class="row">
                    <div class="col-md-5">
                        <p class="attribute text-uppercase" style="display:inline-block; padding-top:0; line-height:1.4em !important ">Morven Kyle
                            <br><small class="text-uppercase" style="font-weight:normal">current student</small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- CSS -->
<style>
.content-expand-container.student-profile {
  background: #d8d4d1;
}

.content-expand-container.student-profile {
  border-top: 1px solid #efefef;
}

.content-expand-container {
  margin: 30px 0;
  overflow: hidden;
}

.content-expand-container.student-profile .content-expand .contents {
  padding: 25px !important;
}

.content-expand-container.student-profile .content-expand .contents {
  color: #000000;
}

.content-expand-container.student-profile .content-expand .contents p {
  font-family:'Baxter Sans Regular Italic', Helvetica, Arial, sans-serif;
  font-size: 1.4em !important;
  line-height: 1.5em !important;
  margin-bottom: 15px;
}

.content-expand-container .content-expand img {
  display: block;
  max-width: 100%;
  width: 100% !important;
}

.content-expand-container.student-profile .content-expand .contents p.attribute {
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0;
  font-size: 17px !important;
  font-family: "Baxter Sans Regular",Helvetica,Arial,sans-serif;
}
</style>

tabbed data

Research Students
Research Staff

Research Students

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Research Staff

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<div class="tab-content" id="container-tab"><ul role="tablist" data-tabs="tabs" class="nav nav-tabs"><li class="active"><a data-toggle="tab" href="#tab-187847" aria-expanded="true">Research Students</a></li><li class=""><a data-toggle="tab" href="#tab-187848" aria-expanded="false">Research Staff</a></li></ul><div class="tab-pane active" id="tab-187847">
<h3>Research Students</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="tab-pane" id="tab-187848">
<h3>Research Staff</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div></div>

tables

Qualification	Grade
SQA Advanced Higher	BB (Advanced Higher) + BB (Higher) in different subjects
GCE A-Level	ABB
IB Diploma	34 points (including 6, 6, 5, at Higher level)
Essential Subjects	Art and Design, or related subject (at SQA Advanced Higher, GCE A-Level, IB Higher Level), an appropriate literate subject (at SQA Advanced Higher, GCE A Level, IB Higher Level) and one other subject outside art & design subjects (at SQA Higher, GCE A Level, IB Higher Level).
EU & International	Visit our EU and International webpages for entry requirements tailored to your home country
Other Qualifications
SQA	A recognised Foundation Course or a relevant HND with BB in the Graded Units
Scottish Baccalaureate	Pass with BB at Advanced Higher
SWAP Access
EDEXCEL	A recognised Foundation Course or a relevant BTEC Extended Diploma with DDM
Advanced Diploma	Grade B with ASL A-levels in appropriate subjects at AB
Welsh Baccalaureate	Pass with A-levels in appropriate subjects at AB
European Baccalaureate	75% overall with 7.5 in an Art & Design subject and 7.5 in a literate subject

Alternate Rows Table

IELTS Overall	6.0
Listening	5.5
Reading	5.5
Writing	6.0
Speaking	5.5

<div class="table-responsive">
  <table cellspacing="0" cellpadding="0" border="0" width="100%" class="ug_courses_table">
    <thead>
      <tr>
        <th width="20%" class="table_dark">Qualification</th>
        <th class="table_dark"><strong>Grade</strong></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>SQA Advanced Higher</td>
        <td>BB (Advanced Higher) + BB (Higher) in different subjects</td>
      </tr>
      <tr>
        <td>GCE A-Level</td>
        <td><strong>ABB</strong></td>
      </tr>
      <tr>
        <td>IB Diploma</td>
        <td>34 points (including 6, 6, 5, at Higher level)</td>
      </tr>
      <tr>
        <td>Essential Subjects</td>
        <td>Art and Design, or related subject (at SQA Advanced Higher, GCE A-Level, IB Higher Level), an appropriate literate subject (at SQA Advanced Higher, GCE A Level, IB Higher Level) and one other subject outside art &amp; design subjects (at SQA Higher, GCE A Level, IB Higher Level).</td>
      </tr>
      <tr>
        <td>EU &amp; International</td>
        <td colspan="2">
          Visit our <a href="/study/international/country/">EU and International</a> webpages for entry requirements tailored to your home country</td>            </tr>
          <tr>
            <td colspan="3" class="table_dark"><strong>Other Qualifications</strong></td>
          </tr>
          <tr>
            <td>SQA</td>
            <td colspan="2">A recognised Foundation Course or a relevant HND with BB in the Graded Units</td>
          </tr>
          <tr>
            <td>Scottish Baccalaureate</td>
            <td colspan="2">Pass with BB at Advanced Higher</td>
          </tr>
          <tr>
            <td>SWAP Access</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td>EDEXCEL</td>
            <td colspan="2">A recognised Foundation Course or a relevant BTEC Extended Diploma with DDM</td>
          </tr>
          <tr>
            <td>Advanced Diploma</td>
            <td colspan="2">Grade B with ASL A-levels in appropriate subjects at AB</td>
          </tr>
          <tr>
            <td>Welsh Baccalaureate</td>
            <td colspan="2">Pass with A-levels in appropriate subjects at AB</td>
          </tr>
          <tr>
            <td>European Baccalaureate</td>
            <td colspan="2">75% overall with 7.5 in an Art &amp; Design subject and 7.5 in a literate subject</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h3>Alternate Rows Table</h3>
    <table class="table table-striped unstackable table-ielts">
      <tbody>
        <tr>
          <th>IELTS Overall</th>
          <th>6.0</th>
        </tr>
        <tr>
          <td>Listening</td>
          <td>5.5</td>
        </tr>
        <tr>
          <td>Reading</td>
          <td>5.5</td>
        </tr>
        <tr>
          <td>Writing</td>
          <td>6.0</td>
        </tr>
        <tr>
          <td>Speaking</td>
          <td>5.5</td>
        </tr>
      </tbody>
    </table>