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 body1, backgrounds for text blocks, button backgrounds and text

x Unsuitable for: All other elements

1 Only suitable for body background in exceptional circumstances

Font stacks

Font Normal:
"Baxter Sans Regular", Helvetica, Arial, sans-serif;

Suitable for: Body text, text links

x Unsuitable for: Headings, buttons

Font Italic:
"Baxter Sans Regular Italic", Helvetica, Arial, sans-serif;

Suitable for: Italicised body text only

x Unsuitable for: Any other elements

Font Medium:
"Baxter Sans Medium", Helvetica, Arial, sans-serif;

Suitable for: Headings, bold body text

x Unsuitable for: Any other elements

Font Medium Italic:
"Baxter Sans Medium Italic", Helvetica, Arial, sans-serif;

Suitable for: Bold and italicised headings and body text

x Unsuitable for: Any other elements

Font Semibold:
"Baxter Sans Semibold", Helvetica, Arial, sans-serif;

Suitable for: Headings, buttons, navigation

x Unsuitable for: Any other elements

Font Semibold Italic:
"Baxter Sans Semibold Italic", Helvetica, Arial, sans-serif;

Suitable for: Headings with italicised text

x Unsuitable for: Any other elements

Font Bold:
"Baxter Sans Bold", Helvetica, Arial, sans-serif;

Suitable for: Buttons

x Unsuitable for: Any other elements

Font Bold Italic:
"Baxter Sans Bold Italic", Helvetica, Arial, sans-serif;

Suitable for: Buttons with italicised text

x Unsuitable for: Any other elements

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

components

accordion

Back to Top
<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."

Back to Top
<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

Back to 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

Back to Top
<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

Primary Button

 Button With Info Icon

Promo Button and Right Arrow
Back to Top
<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

Figure With No Link

Craniofacial Depiction for Forensic Identification and Archaeological Investigat

Craniofacial Depiction for Forensic Identification and Archaeological Investigation

Back to Top
<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



Dropdown Selection



Radio Button


Text Area


Add Another Button

+ Add another

Input Error

Personal Details


This field is required.

This field is required.

This field is required.
Date format (dd/mm/yyyy)
This field is required.

This field is required.

This field is required.
This section is required.
Back to Top
<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
Back to Top
<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
Back to Top
<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

  1. list item 1
  2. list item 2
  3. list item 3
  4. list item 4
Back to Top
<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

  1. list item 1
  2. list item 2
  3. list item 3
  4. list item 4
Back to Top
<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
Back to Top
<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  

Back to Top
<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
Back to Top
<!--<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

Back to Top
<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

Back to Top
<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

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.

Back to Top
<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
Back to Top
<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>