There are no notes for this item.
<header class="header-site" id="header-site">
<div class="wrap">
<div class="header-site__flexContainer">
<a class="site-logo" title="Home" href="/">
<img src="../../img/theme-ldn/logo-ldn.svg" alt="Digital Institute London Logo" class="no-lazy-load">
</a>
<button class="toggle-megaNav" id="toggle-megaNav" aria-controls="megaNav"><span class="toggle-megaNav__label">Menu</span></button>
<nav class="megaNav" id="megaNav" role="navigation">
<div class="megaNav__controls">
<button class="megaNav__close" id="megaNav__close"><span class="visually-hidden">Close</span></button>
</div>
<div class="megaNav__topLevel">
<ul class="megaNav__topLevel-list">
<li class="megaNav__topLevel-item has-children has-simple-children">
<a class="megaNav__topLevel-link " href="">Courses</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Courses</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Animation</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Art and Design</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Computer Science, AI and Robotics</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Education</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Engineering</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">...</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>Find a Course</p>
<form>
<input type="text" placeholder="Search on keyword / subject" />
<input type="submit" class="button" />
</form>
</div>
</div>
</li>
<li class="megaNav__topLevel-item has-children">
<a class="megaNav__topLevel-link " href="">About us</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">About us</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Test Item</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Test Item</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Test Item</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Test Item</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>What’s it like living here?</p>
<p><a href="" class="button">Book an open day</a></p>
</div>
</div>
</li>
<li class="megaNav__topLevel-item has-children">
<a class="megaNav__topLevel-link " href="">Student life</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Student Life</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Accommodation</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Accommodation</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Private accommodation</a></li>
</ul>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Meet the Experts</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">How To Find Us</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Student support</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Life on campus</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Facilities</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>What’s it like living here?</p>
<p><a href="" class="button">Book an open day</a></p>
</div>
</div>
</li>
<li class="megaNav__topLevel-item">
<a class="megaNav__topLevel-link" href="">Events</a>
</li>
<li class="megaNav__topLevel-item ">
<a class="megaNav__topLevel-link " href="">Connect With Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="masthead">
<div class="masthead__inner">
<div class="masthead__bg">
<img src="../../img/theme-ldn/masthead0.jpg" style="object-position: 50% 20%" />
</div>
<div class="wrap">
<div class="title title--has-tail js-waypoint">
<h1 class="title__highlight">
Superpage!
</h1>
</div>
<div class="title title--bg-purple-deep-ldn title--has-tail js-waypoint">
<h4 class="title__highlight">
For testing
</h4>
</div>
<div class="title title--bg-white title--has-tail js-waypoint">
<p class="title__highlight">
This page includes (almost) all the components to test how they work with the LDN stylesheet
</p>
</div>
</div>
</div>
</div>
<main id="main-content" role="main">
<nav class="page-nav js-page-nav" id="js-page-nav">
<div class="page-nav__stickyContainer">
<div class="wrap">
<div class="page-nav__inner">
<ul class="page-nav__list">
<li class="page-nav__item"><a class="page-nav__link" href="#accordion">Accordion</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#banner">Banner</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#boxes">Boxes</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#buttons">Buttons</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#cards">Cards</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#contact-us">Contact Us</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#feature-tiles">Feature Tiles</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#feature-links">Feature Links</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#hr">Horizontal Rule</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#iconbox">IconBox</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#lists">Lists</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#masthead">Masthead</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#meta">Meta</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#pager">Pager</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#page-nav">Page Nav</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#quote-banners">Quote Banners</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#slabs">Slabs</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#sliders">Sliders</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tables">Tables</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tabs">Tabs</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tags">Tags</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tiles">Tiles</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#titles">Titles</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#zebra">Zebra</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="slab js-waypoint-page-section" id="accordion">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Accordion</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="accordion">
<details class="accordion__item">
<summary class="accordion__title">
<h2 class="accordion__toggle">Accordion toggle with h2</h2>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">
<h3 class="accordion__toggle">Accordion toggle with h3</h3>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">
<h4 class="accordion__toggle">Accordion toggle with h4</h4>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">
<h5 class="accordion__toggle">Accordion toggle with h5</h5>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">
<h6 class="accordion__toggle">Accordion toggle with h6</h6>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">
<span class="accordion__toggle">Accordion Toggle</span>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p>
</div>
</details>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="banner">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Banner</h2>
</div>
</div>
</div>
<div class="wrap">
<p>Backgrounds are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>
<p>Add a class of <code>banner__bg--blurred</code> to the <code>banner__bg</code> to <em>always</em> blur the background - backgrounds will by default be blurred only at small viewport widths.</p>
<div class="grid grid-2-cols@tablet">
<div>
<div class="banner">
<div class="banner__bg banner__bg--blurred">
<img src="https://placeimg.com/1200/400" />
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h2 title__highlight">Undergraduate Open Day</div>
</div>
<div class="title title--bg-slate">
<div class="h4 title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
</div>
<div class="title title--bg-white">
<p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta">
<a href="" class="button button--caps">Book an open day - a long button title</a>
</div>
</div>
</div>
</div>
<div>
<div class="banner">
<div class="banner__bg">
<img src="https://placeimg.com/1200/400" />
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h2 title__highlight">Undergraduate Open Day</div>
</div>
<div class="title title--bg-white">
<p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta">
<a href="" class="button button--caps">Book an open day</a>
</div>
</div>
</div>
</div>
</div>
<hr />
<p>Consider reducing the h-size of any titles if placing a banner in a column, place this size on the <code>title__highlight</code>.</p>
<p>If you're only using a very small amount of text, you might not need to always blur the <code>banner__bg</code>. Use judgement and test responsively :)</p>
<div class="grid grid-3-cols">
<div>
<div class="banner">
<div class="banner__bg banner__bg--blurred">
<img src="https://placeimg.com/1200/400" />
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h4 title__highlight">Undergraduate Open Day</div>
</div>
<div class="title title--bg-slate">
<div class="h5 title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
</div>
<div class="title title--bg-white">
<p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta">
<a href="" class="button button--caps">Book an open day - a long button title</a>
</div>
</div>
</div>
</div>
<div>
<div class="banner">
<div class="banner__bg banner__bg--blurred">
<img src="https://placeimg.com/1200/400" />
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h4 title__highlight">Sport</div>
</div>
<div class="title title--bg-white">
<p class="title__highlight">Whether you're a competing athlete or a casual enthusiast, our thriving sporting community has something for you.</p>
</div>
</div>
<div class="banner__cta">
<a href="" class="button">Sport opportunities and facilities</a>
</div>
</div>
</div>
</div>
<div>
<div class="banner">
<div class="banner__bg">
<img src="https://placeimg.com/1200/400" />
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h4 title__highlight">Undergraduate Open Day</div>
</div>
</div>
<div class="banner__cta">
<a href="" class="button button--caps">Book an open day</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner margin-top-xl">
<div class="banner__bg">
<img src="https://placeimg.com/1200/400/tech" />
</div>
<div class="wrap">
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h2 title__highlight">Undergraduate Open Day</div>
</div>
<div class="title title--bg-blue-ldn">
<div class="h4 title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
</div>
<div class="title title--bg-white">
<p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta">
<a href="" class="button button--clipped">Book an open day - a long button title</a>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-offwhite js-waypoint-page-section" id="boxes">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Boxes</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid-4-cols">
<div>
<div class="box box--has-shadow">
<div class="box__content">
<div class="box__title title">
<h2 class="h4 title__highlight"><a href="">A demo box title</a></h2>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<footer class="box__footer">
<a href="" class="button align-center">Book Now</a>
</footer>
</div>
</div>
<div>
<div class="box box--has-shadow">
<div class="box__content">
<div class="box__title title">
<h2 class="h4 title__highlight"><a href="">A demo box title</a></h2>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<footer class="box__footer">
<a href="" class="button align-center">Book Now</a>
</footer>
</div>
</div>
<div>
<div class="box box--has-shadow">
<div class="box__content">
<div class="box__title title">
<h2 class="h4 title__highlight"><a href="">A demo box title</a></h2>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<footer class="box__footer">
<a href="" class="button align-center">Book Now</a>
</footer>
</div>
</div>
<div>
<div class="box box--has-shadow">
<div class="box__content">
<div class="box__title title">
<h2 class="h4 title__highlight"><a href="">A demo box title</a></h2>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<footer class="box__footer">
<a href="" class="button align-center">Book Now</a>
</footer>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="buttons">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Buttons</h2>
</div>
</div>
</div>
<div class="wrap">
<p class="intro">A 'special' button modifier is available for LDN: <code>button--clipped</code></p>
<a href="" class="button button--lg button--clipped">A large clipped corner button!</a>
<a href="" class="button button--clipped">A clipped corner button!</a>
<a href="" class="button button--sm button--clipped">A small clipped corner button!</a>
</div>
</div>
<div class="slab js-waypoint-page-section" id="cards">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Cards</h2>
</div>
</div>
</div>
<div class="wrap">
<section class="">
<p>All types of cards work with the LDN skin, by default they use the primary colour, and accent modifiers relative to LDN can be applied.</p>
<p>These modifiers, cascade to the appropriate accented elements in different card types.</p>
<p>Like other LDN themed component variants, the modifiers are in a map in <code>main-ldn.scss</code>, consider this the source of truth, but at the time of typing, they're currently:</p>
<ul>
<li><code>blue-ldn</code></li>
<li><code>blue-deep-ldn</code></li>
<li><code>magenta-ldn</code></li>
<li><code>purple-deep-ldn</code></li>
</ul>
For example:
<pre><div class="card card--flex card--magenta-ldn"></div></pre>
<hr />
<div class="card card--flex">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="">Enjoying the View? How computer games can help evaluate landscapes</a></h3>
<p>2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.</p>
</div>
</div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="link--stretched">Graduates give Staffs Uni star role in popular app</a></h3>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<div class="card card--flex card--blue-ldn">
<div class="card__content">
<h3 class="h4 card__title">
<a href="#" class="link--stretched">Card Title (with <code>link--stretched</code>)</a>
</h3>
<p>Example without a figure image</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="link--stretched">Graduates give Staffs Uni star role in popular app</a></h3>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<hr />
<div class="grid grid-2-cols grid-4-cols@desktop">
<div>
<div class="card card--flex card--blue-deep-ldn">
<figure class="card__figure card__figure--video">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Research into poverty in Stoke-on-Trent gets new funding boost</a>
</h3>
<p><span class="tag">video</span></p>
<p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--blue-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/tech" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Graduates give Staffs Uni star role in popular app</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">11 February 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/nature" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">“It's Beautiful to be Old” Professor tells Vatican</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">10 August 2020</time>
</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Research into poverty in Stoke-on-Trent gets new funding boost</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">9 April 2020</time>
</p>
<p>Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
</div>
</div>
</div>
</div>
<hr />
<div class="grid grid-3-cols">
<div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/tech" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Accommodation</a>
</h3>
<p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/nature" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Staffordshire Campus</a>
</h3>
<p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
</div>
</div>
</div>
<div>
<a class="card card--flex" href="">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
Stoke-on-Trent Open Day Programme
</h3>
<p><span class="tag">publication</span></p>
<p>Download our open day PDF (2.8Mb)</p>
<b class="button button--clipped">Download</b>
</div>
</a>
</div>
</div>
<hr />
<div class="card card--flex-overlap">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<div class="title">
<h3 class="h4 title__highlight"><a href="" class="">Graduates give Staffs Uni star role in popular app</a></h3>
</div>
<p>Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
</div>
</div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
</div>
</a>
<p>2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.</p>
</div>
</div>
<div class="card card--flex-overlap card--magenta-ldn">
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
</div>
</a>
<p>Example without a figure image</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<div class="card card--flex-overlap card--blue-ldn">
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
</div>
</a>
<p>Example without a figure image</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<hr />
<div class="grid grid-2-cols grid-4-cols@desktop">
<div>
<div class="card card--flex-overlap">
<figure class="card__figure card__figure--video">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
</div>
</a>
<p><span class="tag">video</span></p>
<p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/tech" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Graduates give Staffs Uni star role in popular app</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">11 February 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--blue-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/nature" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">“It's Beautiful to be Old” Professor tells Vatican</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">10 August 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">9 April 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
</div>
<hr />
<div class="grid grid-3-cols">
<div>
<div class="card card--flex-overlap card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/tech" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Accommodation</h3>
</div>
</a>
<p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/nature" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Staffordshire Campus</h3>
</div>
</a>
<p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
</div>
</div>
</div>
<div>
<a class="card card--flex-overlap" href="">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<div class="title">
<h3 class="h5 title__highlight">Stoke-on-Trent Open Day Programme</h3>
</div>
<p><span class="tag">publication</span></p>
<p>Download our open day PDF (2.8Mb)</p>
<b class="button button--clipped">Download</b>
</div>
</a>
</div>
</div>
</section>
<section class="">
<div class="title title--has-tail margin-bottom-3xl">
<h3 class="title__highlight">Cards: Pullquote</h3>
</div>
<div class="card card--pullquote">
<div class="card__content">
<blockquote>
<span class="blockquote__highlight">I’m delighted for Staffordshire University to be shortlisted for Best Educational Institution and all the staff are incredibly proud that our students have been recognised for their game Pair Up. It is a well-deserved honour.</span>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate</p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
<div class="card card--pullquote card--blue-ldn">
<div class="card__content">
<blockquote>
<span class="blockquote__highlight">I’m delighted for Staffordshire University to be shortlisted for Best Educational Institution and all the staff are incredibly proud that our students have been recognised for their game Pair Up. It is a well-deserved honour.</span>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate</p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
<div class="card card--pullquote card--magenta-ldn">
<div class="card__content">
<blockquote>
<span class="blockquote__highlight">I’m delighted for Staffordshire University to be shortlisted for Best Educational Institution and all the staff are incredibly proud that our students have been recognised for their game Pair Up. It is a well-deserved honour.</span>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate</p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
<div class="card card--pullquote card--purple-deep-ldn">
<div class="card__content">
<blockquote>
<span class="blockquote__highlight">I’m delighted for Staffordshire University to be shortlisted for Best Educational Institution and all the staff are incredibly proud that our students have been recognised for their game Pair Up. It is a well-deserved honour.</span>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate</p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
<hr />
<div class="grid grid--spaced grid-2-cols@mobile-wide">
<div>
<div class="card card--pullquote">
<div class="card__content">
<blockquote class="">
<span class="blockquote__highlight">The quote icon uses an svg, so you can use these four card accent colours, but more will need to be added in the cards.scss partial</span>
<footer class="blockquote__footer">
<p class="cite">Dan Sheerman</p>
<p>Head of Blockquotes</p>
</footer>
</blockquote>
</div>
</div>
</div>
<div>
<div class="card card--pullquote card--blue-ldn">
<div class="card__content">
<blockquote class="blockquote--short">
<span class="blockquote__highlight">They can use the normal short/big long/small classes for sizing</span>
<footer class="blockquote__footer">
<p class="cite">Dan Sheerman</p>
<p>VP of Sizing Modifiers</p>
</footer>
</blockquote>
</div>
</div>
</div>
<div>
<div class="card card--pullquote card--purple-deep-ldn">
<div class="card__content">
<blockquote>
<span class="blockquote__highlight">The quote accent is intrinsically sized, so you can put them in any size column, just adjust the class for text size if needbe.</span>
<footer class="blockquote__footer">
<p class="cite">Dan Sheerman</p>
<p>VP of Sizing Modifiers</p>
</footer>
</blockquote>
</div>
</div>
</div>
<div>
<div class="card card--pullquote card--magenta-ldn">
<div class="card__content">
<blockquote class="blockquote--long">
<span class="blockquote__highlight">I’m delighted for Staffordshire University to be shortlisted for Best Educational Institution and all the staff are incredibly proud that our students have been recognised for their game Pair Up. It is a well-deserved honour.</span>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate</p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<section class="">
<div class="title title--has-tail margin-bottom-3xl">
<h3 class="title__highlight">Cards: Testimonial</h3>
</div>
<div class="card card--testimonial">
<div class="card__content">
<blockquote>
<figure class="blockquote__figure align-right align-size-md">
<img src="https://placeimg.com/480/480/people" alt="" />
</figure>
<q class="blockquote__title">Great relationships with leading institutions</q>
<div class="blockquote__prose">
<p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
<p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance.</p>
<p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
</div>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate </p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
<hr />
<div class="grid grid-2-cols@tablet">
<div>
<div class="card card--testimonial card--blue-deep-ldn">
<div class="card__content">
<blockquote class="blockquote--large">
<figure class="blockquote__figure align-right align-size-md">
<img src="https://placeimg.com/480/480/people" alt="" />
</figure>
<q class="blockquote__title">Great relationships with leading institutions</q>
<div class="blockquote__prose">
<p>Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals. Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals.</p>
</div>
<footer class="blockquote__footer">
<p class="cite">Sarah Jones</p>
<p>Digital Design</p>
</footer>
</blockquote>
</div>
</div>
</div>
<div>
<div class="card card--testimonial card--blue-ldn">
<div class="card__content">
<blockquote>
<figure class="blockquote__figure align-right align-size-md">
<img src="https://placeimg.com/480/480/people" alt="" />
</figure>
<q class="blockquote__title">Great relationships with leading institutions</q>
<div class="blockquote__prose">
<p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
<p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance.</p>
<p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
</div>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate </p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
</div>
<div>
<div class="card card--testimonial card--purple-deep-ldn">
<div class="card__content">
<blockquote class="blockquote--large">
<figure class="blockquote__figure align-right align-size-md">
<img src="https://placeimg.com/480/480/people" alt="" />
</figure>
<q class="blockquote__title">Tutors are supportive and really helpful!</q>
<div class="blockquote__prose">
<p>Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals. Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals.</p>
</div>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate </p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
</div>
<div>
<div class="card card--testimonial card--magenta-ldn">
<div class="card__content">
<blockquote>
<figure class="blockquote__figure align-right align-size-md">
<img src="https://placeimg.com/480/480/people" alt="" />
</figure>
<q class="blockquote__title">Great relationships with leading institutions</q>
<div class="blockquote__prose">
<p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
<p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
</div>
<footer class="blockquote__footer">
<p class="cite">Christie Scanion, Graduate </p>
<p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="slab slab--bg-granite" id="cards-ksp">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h3 class="title__highlight">Cards (KSP)</h3>
</div>
</div>
</div>
<div class="wrap">
<div class="slab slab--bg-slate align-full margin-bottom-md">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<i class="icon h3 card--ksp__icon">
<img src="../../img/icon-moneybag-white.svg" alt="Description of image here please" />
</i>
<h2 class="h4 card__title">£11 million funding secured for business</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<i class="icon h3 card--ksp__icon">
<img src="../../img/icon-threepeople-white.svg" alt="Description of image here please" />
</i>
<h2 class="h4 card__title">Over 400 regional vacancies filled</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<i class="icon h3 card--ksp__icon">
<img src="../../img/icon-circle-padlock-white.svg" alt="Description of image here please" />
</i>
<h2 class="h4 card__title">71% of our apprentices secure a permanent position</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-slate align-full">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">£11 million funding secured for business</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">Over 400 regional vacancies filled</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h2 class="h4 card__title">71% of our apprentices secure a permanent position</h2>
<p>Text describing the USP here which could if necessary have an arrow to denote link</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="contact-us">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Contact Us</h2>
</div>
</div>
</div>
<div class="wrap">
<p>This is just a specific demo of a box with an abstitle, see that component for source of truth.</p>
<div class="grid grid--spaced">
<div class="col-reverse col-1/3 col-1/4@tablet-wide">
<div class="box box--with-abstitle box--bg-greyblue-superlight">
<div class="box__figure">
<img src="https://placeimg.com/500/500/people" alt="person" />
</div>
<div class="box__content">
<div class="box__abstitle title">
<h4 class="h4 title__highlight">Contact Us</h4>
</div>
<h5 class="box__title margin-y-none">Katie Holdcroft</h5>
<p>Representative for Austria</p>
<ul class="list--icon-bullets">
<li><a href=""><i class="icon icon--envelope"></i>comms@staffs.ac.uk</a></li>
<li><a href=""><i class="icon icon--phone"></i>+44 7900 123456</a></li>
<li><a href=""><i class="icon icon--twitter"></i>StaffsUniNews</a></li>
<li><a href=""><i class="icon icon--twitter"></i>PressOffice</a></li>
</ul>
<p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
</div>
</div>
</div>
<div class="col-2/3 col-3/4@tablet-wide">
<div class="box box--with-abstitle box--bg-greyblue-superlight">
<div class="box__figure">
<img src="https://placeimg.com/500/200/people" alt="person" />
</div>
<div class="box__content">
<div class="box__abstitle title">
<h4 class="h4 title__highlight">Any Questions?</h4>
</div>
<ul class="list--icon-bullets list--inline">
<li><a href=""><i class="icon icon--envelope"></i>comms@staffs.ac.uk</a></li>
<li><a href=""><i class="icon icon--phone"></i>+44 7900 123456</a></li>
<li><a href=""><i class="icon icon--twitter"></i>StaffsUniNews</a></li>
<li><a href=""><i class="icon icon--twitter"></i>PressOffice</a></li>
</ul>
<p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="feature-tiles">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Feature Tiles</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="title title--has-tail">
<h2 class="title__highlight">London Colour Variants</h2>
</div>
<p>These can be styled with a modifier to the <code>feature-tiles__item</code>, which will cascade to the <code>title__highlight</code> and pseudo-square (if the grid item has one)</p>
<p>Modifiers are in the <code>$tile-accent-colors</code> map in <code>_main-ldn.scss</code>, currently: <code>accent-blue-ldn</code>, <code>accent-blue-deep-ldn</code>,
<code>accent-magenta-ldn</code>, <code>accent-purple-deep-ldn</code>, and <code>accent-tef-gold</code>.</p>
<p><strong>NB: Use the modifier on this item, not the tile if you want the accent to cascade correctly to the pseudo-square, you don't need to add to the tile as well :)</strong></p>
<p>As the map is overwritten, colours from the main site are not available unless explicitly added to the map in Sass.</p>
<div class="grid grid--flush grid-2-cols@mobile-wide grid-3-cols@tablet-wide feature-tiles">
<div class="feature-tiles__item feature-tiles__item--accent-blue-deep-ldn js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Digital Institute London</h3>
</div>
<div class="tile__content-body">
<p>Study Esports, Computer Games Design, Cyber Security, and more, with us in London.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-blue-ldn js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Developing knowledge</h3>
</div>
<div class="tile__content-body">
<p>Reach your full potential with our postgraduate courses.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-magenta-ldn js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/architecture" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Connecting Continents</h3>
</div>
<div class="tile__content-body">
<p>Study with us, no matter where in the world you come from.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-purple-deep-ldn js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Breaking boundaries</h3>
</div>
<div class="tile__content-body">
<p>Public lecture from Ade Adepitan MBE</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">There’s still time to apply for 2020 entry</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-tef-gold js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-tef-gold tile__title">
<h3 class="h4 title__highlight">TEF Gold</h3>
</div>
<div class="tile__content-body">
<p>Staffordshire University achieves Gold in the Teaching Excellence and Student Outcomes Framework</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="feature-links">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Feature Links</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid--spaced grid-2-cols">
<div>
<a class="feature-link" href="">
<figure class="feature-link__figure">
<img src="https://placeimg.com/720/360/people" alt="" />
</figure>
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Accommodation</h3>
<p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<figure class="feature-link__figure">
<img src="https://placeimg.com/720/360/nature" alt="" />
</figure>
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Life in Staffordshire</h3>
<p>We’ve invested in great new facilities on campus to make Staffordshire University a hub of activity and opportunity.</p>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Getting involved</h3>
<p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Campus & facilities</h3>
<p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Student Support</h3>
<p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Life on campus</h3>
<p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Link name here</h3>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Graduates give Staffs Uni star role in popular app</h3>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Text link (short)</h3>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Text link (short)</h3>
</div>
</a>
</div>
<div>
<a class="feature-link" href="">
<div class="feature-link__content">
<h3 class="h4 feature-link__title">Text link (short)</h3>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="hr">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Horizontal Rules</h2>
</div>
</div>
</div>
<div class="wrap">
<p class="intro">This is a style primarily developed for the LDN skin, as the brand more heavily uses the triangle 'cutout' from the logo as a device.</p>
<p>It can be used on the left or right (or alternating corners) of a horizontal rule. Demo combinations follow:</p>
<h2 class="title title--bg-magenta-ldn h3"><span class="title__highlight">Single triangle</span></h2>
<h3 class="h6">above-left</h3>
<hr class="hr--tri-above-left" />
<h3 class="h6">below-left</h3>
<hr class="hr--tri-below-left" />
<h3 class="h6">above-right</h3>
<hr class="hr--tri-above-right" />
<h3 class="h6">below-right</h3>
<hr class="hr--tri-below-right" />
<h2 class="title title--bg-magenta-ldn h3"><span class="title__highlight">Dual Triangles</span></h2>
<h3 class="h6">above-left + below-right</h3>
<hr class="hr--tri-above-left hr--tri-below-right" />
<h3 class="h6">above-right + below-left</h3>
<hr class="hr--tri-above-right hr--tri-below-left" />
</div>
</div>
<div class="slab js-waypoint-page-section" id="iconbox">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">IconBox</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="iconBox">
<div class="iconBox__icon">
<svg id="icon-games" viewBox="0 0 180.43 133.59" width="100%" height="100%" fill="white">
<title>games design</title>
<path d="M122,40.37a6,6,0,0,1,4.26-10.29,6,6,0,0,1,6,6,6,6,0,0,1-6,6A6,6,0,0,1,122,40.37ZM141.14,45a6,6,0,1,0,4.26,1.77A6,6,0,0,0,141.14,45Zm-29.34-.39a6,6,0,1,0,0,12h0a6,6,0,1,0,0-12Zm14.87,14.87a6,6,0,1,0,4.26,1.76A6,6,0,0,0,126.67,59.43Zm53.76,24.28a3.32,3.32,0,0,1-.16,1,3.09,3.09,0,0,1-.85,1.79l-45,46.2a3,3,0,0,1-2.22.94l-.22,0-.22,0a3.1,3.1,0,0,1-2.17-.89L90.21,93.86,50.84,132.7a3.1,3.1,0,0,1-2.17.89l-.22,0-.22,0a3,3,0,0,1-2.22-.94L1,86.45a3.09,3.09,0,0,1-.85-1.79,3.32,3.32,0,0,1-.16-1L.1,21A3.07,3.07,0,0,1,1.42,18.5L18.91,1.05l.16-.13A3.07,3.07,0,0,1,21.27,0H159a3.12,3.12,0,0,1,1.43.36,3.13,3.13,0,0,1,1.06.69l17.41,17.37a3.07,3.07,0,0,1,1.44,2.6Zm-6.2-.81-.1-60.47L157.86,6.2H22.53L6.3,22.39,6.2,82.9l42.29,43.42L88,87.4a3.1,3.1,0,0,1,2.27-.89,3.07,3.07,0,0,1,2.26.89l39.46,38.92ZM70.3,47.65H56V33.36a3.1,3.1,0,0,0-6.2,0V47.65H35.52a3.1,3.1,0,1,0,0,6.2H49.81V68.14a3.1,3.1,0,1,0,6.2,0V53.85H70.3a3.1,3.1,0,1,0,0-6.2Z"></path>
</svg>
</div>
<div class="iconBox__content">
<h3 class="h6 iconBox__title">BA (Hons) Games PR, and Community Management</h3>
<p>Study the art of promotion, management and content creation in our brand-new marketing focused course.</p>
</div>
</div>
</div>
<div>
<div class="iconBox">
<div class="iconBox__icon">
<svg id="icon-games" viewBox="0 0 180.43 133.59" width="100%" height="100%" fill="white">
<title>games design</title>
<path d="M122,40.37a6,6,0,0,1,4.26-10.29,6,6,0,0,1,6,6,6,6,0,0,1-6,6A6,6,0,0,1,122,40.37ZM141.14,45a6,6,0,1,0,4.26,1.77A6,6,0,0,0,141.14,45Zm-29.34-.39a6,6,0,1,0,0,12h0a6,6,0,1,0,0-12Zm14.87,14.87a6,6,0,1,0,4.26,1.76A6,6,0,0,0,126.67,59.43Zm53.76,24.28a3.32,3.32,0,0,1-.16,1,3.09,3.09,0,0,1-.85,1.79l-45,46.2a3,3,0,0,1-2.22.94l-.22,0-.22,0a3.1,3.1,0,0,1-2.17-.89L90.21,93.86,50.84,132.7a3.1,3.1,0,0,1-2.17.89l-.22,0-.22,0a3,3,0,0,1-2.22-.94L1,86.45a3.09,3.09,0,0,1-.85-1.79,3.32,3.32,0,0,1-.16-1L.1,21A3.07,3.07,0,0,1,1.42,18.5L18.91,1.05l.16-.13A3.07,3.07,0,0,1,21.27,0H159a3.12,3.12,0,0,1,1.43.36,3.13,3.13,0,0,1,1.06.69l17.41,17.37a3.07,3.07,0,0,1,1.44,2.6Zm-6.2-.81-.1-60.47L157.86,6.2H22.53L6.3,22.39,6.2,82.9l42.29,43.42L88,87.4a3.1,3.1,0,0,1,2.27-.89,3.07,3.07,0,0,1,2.26.89l39.46,38.92ZM70.3,47.65H56V33.36a3.1,3.1,0,0,0-6.2,0V47.65H35.52a3.1,3.1,0,1,0,0,6.2H49.81V68.14a3.1,3.1,0,1,0,6.2,0V53.85H70.3a3.1,3.1,0,1,0,0-6.2Z"></path>
</svg>
</div>
<div class="iconBox__content">
<h3 class="h6 iconBox__title">BA (Hons) Games PR, and Community Management</h3>
<p>Study the art of promotion, management and content creation in our brand-new marketing focused course.</p>
</div>
</div>
</div>
<div>
<div class="iconBox">
<div class="iconBox__icon">
<svg id="icon-games" viewBox="0 0 180.43 133.59" width="100%" height="100%" fill="white">
<title>games design</title>
<path d="M122,40.37a6,6,0,0,1,4.26-10.29,6,6,0,0,1,6,6,6,6,0,0,1-6,6A6,6,0,0,1,122,40.37ZM141.14,45a6,6,0,1,0,4.26,1.77A6,6,0,0,0,141.14,45Zm-29.34-.39a6,6,0,1,0,0,12h0a6,6,0,1,0,0-12Zm14.87,14.87a6,6,0,1,0,4.26,1.76A6,6,0,0,0,126.67,59.43Zm53.76,24.28a3.32,3.32,0,0,1-.16,1,3.09,3.09,0,0,1-.85,1.79l-45,46.2a3,3,0,0,1-2.22.94l-.22,0-.22,0a3.1,3.1,0,0,1-2.17-.89L90.21,93.86,50.84,132.7a3.1,3.1,0,0,1-2.17.89l-.22,0-.22,0a3,3,0,0,1-2.22-.94L1,86.45a3.09,3.09,0,0,1-.85-1.79,3.32,3.32,0,0,1-.16-1L.1,21A3.07,3.07,0,0,1,1.42,18.5L18.91,1.05l.16-.13A3.07,3.07,0,0,1,21.27,0H159a3.12,3.12,0,0,1,1.43.36,3.13,3.13,0,0,1,1.06.69l17.41,17.37a3.07,3.07,0,0,1,1.44,2.6Zm-6.2-.81-.1-60.47L157.86,6.2H22.53L6.3,22.39,6.2,82.9l42.29,43.42L88,87.4a3.1,3.1,0,0,1,2.27-.89,3.07,3.07,0,0,1,2.26.89l39.46,38.92ZM70.3,47.65H56V33.36a3.1,3.1,0,0,0-6.2,0V47.65H35.52a3.1,3.1,0,1,0,0,6.2H49.81V68.14a3.1,3.1,0,1,0,6.2,0V53.85H70.3a3.1,3.1,0,1,0,0-6.2Z"></path>
</svg>
</div>
<div class="iconBox__content">
<h3 class="h6 iconBox__title">BA (Hons) Games PR, and Community Management</h3>
<p>Study the art of promotion, management and content creation in our brand-new marketing focused course.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="lists">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Lists</h2>
</div>
</div>
</div>
<div class="wrap">
<ul class="list--inline-bulleted">
<li>This is</li>
<li>A list of things</li>
<li>Displayed inline</li>
<li>With bullets separating them</li>
<li>Ta da!</li>
</ul>
</div>
</div>
<div class="slab js-waypoint-page-section" id="masthead">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Masthead (Course)</h2>
</div>
</div>
</div>
<div class="masthead masthead--has-blurredBg">
<div class="masthead__bg masthead__bg--blurred">
<img src="../../img/masthead4.jpg" />
</div>
<div class="masthead__inner">
<div class="masthead__bg">
<img src="../../img/masthead4.jpg" />
</div>
<div class="wrap">
<nav class="breadcrumbs">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">Subjects</a>
</li>
<li>
<a href="#">Relatively Long Fourth Level</a>
</li>
</ul>
</nav>
<div class="title title--has-tail js-waypoint">
<h1 class="title__highlight h1">
Only use at the top of a course page, "obviously"
</h1>
</div>
<div class="title title--bg-white title--has-tail js-waypoint">
<h6 class="title__highlight">
MSci
</h6>
</div>
</div>
</div>
<div class="masthead__overlay">
<div class="wrap">
<div class="masthead__overlayInner">
<div class="grid grid-3-cols">
<div>
<div class="card card--light">
<div class="card__content">
<h2 class="h4 card__title">Study Options </h2>
<form class="form__group">
<div class="form__item">
<input type="radio" id="study-option-1" name="study-option" checked /> <label for="study-option-1">Full-time, Stoke-on-Trent campus</label>
</div>
<div class="form__item">
<input type="radio" id="study-option-2" name="study-option" /> <label for="study-option-2">Full-time, City of Stoke-On-Trent Sixth Form College, with a foundation year</label>
</div>
<div class="form__item">
<input type="radio" id="study-option-3" name="study-option" /> <label for="study-option-3">Full-time, Stoke-On-Trent campus, with a placement year</label>
</div>
</form>
</div>
</div>
</div>
<div>
<div class="card card--light">
<div class="card__content">
<h2 class="h4 card__title">Award Type</h2>
<form class="form__group">
<div class="form__item">
<input type="radio" id="award-type-msci" name="award-type" checked /> <label for="award-type-msci">MSci</label>
</div>
<div class="form__item">
<input type="radio" id="award-type-bschons" name="award-type" /> <label for="award-type-bschons">BSc (Hons)</label>
</div>
</form>
</div>
</div>
</div>
<div>
<div class="card card--light">
<div class="card__content">
<h2 class="h4 card__title">Key Facts</h2>
<dl class="meta meta--inline">
<div class="meta__item">
<dt>UCAS code:</dt>
<dd>I621</dd>
</div>
<div class="meta__item">
<dt>Location:</dt>
<dd>Stoke-on-Trent campus</dd>
</div>
<div class="meta__item">
<dt>Duration:</dt>
<dd>3 Years</dd>
</div>
<div class="meta__item">
<dt>Start date:</dt>
<dd>21 September 2020</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-granite">
<div class="wrap">
<div class="grid grid-3-cols">
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h3 class="h4 card__title">£11 million funding secured for business</h3>
<p>Text describing the USP here </p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h3 class="h4 card__title">Over 400 regional vacancies filled</h3>
<p>Text describing the USP here </p>
</div>
</div>
</div>
<div>
<div class="card card--ksp card--light">
<div class="card__content">
<h3 class="h4 card__title">71% of our apprentices secure a permanent position</h3>
<p>Text describing the USP here </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="meta">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Meta</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid--spaced">
<div class="col-1/3@tablet">
<div class="title">
<h3 class="h4 title__highlight">Meta</h3>
</div>
<dl class="meta">
<div class="meta__item">
<dt>Study Options</dt>
<dd>Full time</dd>
<dd>Part time</dd>
<dd>Foundation Year</dd>
<dd>Placement Year</dd>
<dd>Integrated Masters (MSci)</dd>
</div>
<div class="meta__item">
<dt>Day of Rest:</dt>
<dd>Sunday</dd>
</div>
<div class="meta__item">
<dt>Days of the week:</dt>
<dd>Monday</dd>
<dd>Tuesday</dd>
<dd>Wednesday</dd>
<dd>Thursday</dd>
<dd>Friday</dd>
</div>
</dl>
</div>
<div class="col-2/3@tablet">
<div class="title">
<h3 class="h4 title__highlight">Inline Meta</h3>
</div>
<dl class="meta meta--inline">
<div class="meta__item">
<dt>Study Options:</dt>
<dd>Full time</dd>
<dd>Part time</dd>
<dd>Foundation Year</dd>
<dd>Placement Year</dd>
<dd>Integrated Masters (MSci)</dd>
</div>
<div class="meta__item">
<dt>Days of the week:</dt>
<dd>Monday</dd>
<dd>Tuesday</dd>
<dd>Wednesday</dd>
<dd>Thursday</dd>
<dd>Friday</dd>
</div>
<div class="meta__item">
<dt>Day of Rest:</dt>
<dd>Sunday</dd>
</div>
</dl>
<div class="title">
<h3 class="h4 title__highlight">Inline Definitions Meta</h3>
</div>
<dl class="meta meta--inline-dd">
<div class="meta__item">
<dt>Study Options</dt>
<dd>Full time</dd>
<dd>Part time</dd>
<dd>Foundation Year</dd>
<dd>Placement Year</dd>
<dd>Integrated Masters (MSci)</dd>
</div>
<div class="meta__item">
<dt>Days of the week:</dt>
<dd>Monday</dd>
<dd>Tuesday</dd>
<dd>Wednesday</dd>
<dd>Thursday</dd>
<dd>Friday</dd>
</div>
<div class="meta__item">
<dt>Day of Rest:</dt>
<dd>Sunday</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="pager">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Pager</h2>
</div>
</div>
</div>
<div class="wrap">
<nav class="pager">
<ul class="pager__list">
<li class="pager__item"><a class="pager__link pager__prev" href="">Previous</a></li>
<li class="pager__item"><a class="pager__link pager__number" href="">1</a></li>
<li class="pager__item"><a class="pager__current">2</a></li>
<li class="pager__item"><a class="pager__link pager__number" href="">3</a></li>
<li class="pager__item"><a class="pager__link pager__number" href="">4</a></li>
<li class="pager__item"><span class="pager__ellipsis">…</span></li>
<li class="pager__item"><a class="pager__link pager__number" href="">77</a></li>
<li class="pager__item"><a class="pager__link pager__next" href="">Next</a></li>
</ul>
</nav>
</div>
</div>
<div class="slab js-waypoint-page-section" id="page-nav">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Page Nav (In-page)</h2>
</div>
</div>
</div>
<div class="wrap">
<p class="intro">Look up!</p>
</div>
</div>
<div class=" js-waypoint-page-section" id="quote-banners">
<div class="section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Quote Banners</h2>
</div>
</div>
</div>
<div class="quote-banner">
<div class="wrap">
<div class="quote-banner__flexContainer">
<div class="quote-banner__quoteContainer">
<div class="card card--testimonial card--purple-deep-ldn ">
<div class="card__content">
<blockquote class="blockquote--large">
<q class="blockquote__title">These quotes can use all the colour variants of cards</q>
<footer class="blockquote__footer">
<cite class="cite">Dan Sheerman</cite>
<p>Vice President of naming complicated variants of things</p>
</footer>
</blockquote>
</div>
</div>
</div>
<figure class="quote-banner__figure quote-banner__figure--align-bottom">
<img src="../../img/placeholder-transparent-person.png" alt="person smiling" />
</figure>
</div>
</div>
</div>
<div class="quote-banner quote-banner--reverse">
<div class="wrap">
<div class="quote-banner__flexContainer">
<div class="quote-banner__quoteContainer">
<div class="card card--testimonial card--magenta-ldn ">
<div class="card__content">
<blockquote class="blockquote--large">
<q class="blockquote__title">Since coming to Staffordshire Uni I’ve become much more creative and confident in myself and my abilities</q>
<footer class="blockquote__footer">
<cite class="cite">Dan Sheerman</cite>
<p>Vice President of naming complicated variants of things</p>
</footer>
</blockquote>
</div>
</div>
</div>
<figure class="quote-banner__figure quote-banner__figure--align-bottom">
<img src="../../img/placeholder-transparent-person.png" alt="person smiling" />
</figure>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-offwhite js-waypoint-page-section" id="slabs">
<div class="slab__header section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Section Headers & Slabs</h2>
</div>
</div>
</div>
<div class="wrap">
<h3 class="slab__title">Offwhite Slab</h3>
</div>
</div>
<div class="slab">
<div class="wrap">
<h3 class="slab__title">Default Slab</h3>
</div>
</div>
<div class="slab slab--bg-granite">
<div class="wrap">
<h3 class="slab__title">Granite Slab</h3>
</div>
</div>
<div class="slab slab--bg-granite-light">
<div class="wrap">
<h3 class="slab__title">Light Granite Slab</h3>
</div>
</div>
<div class="slab js-waypoint-page-section" id="sliders">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Sliders</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="margin-bottom-2xl">
<div class="slider--event-cards js-slider--event-cards">
<div>
<div class="card card--event">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__date">
<span class="card__day">28</span>
<span class="card__month">September</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event card--pink">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__date">
<span class="card__day">23</span>
<span class="card__month">September</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event card--red">
<figure class="card__figure">
<img src="https://placeimg.com/720/360/people" alt="" />
</figure>
<div class="card__date">
<span class="card__day">30</span>
<span class="card__month">September</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event card--red">
<div class="card__date">
<span class="card__day">30</span>
<span class="card__month">September</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__date">
<span class="card__day">2</span>
<span class="card__month">May</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event card--maroon">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__date">
<span class="card__day">9</span>
<span class="card__month">October</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event card--pink">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__date">
<span class="card__day">1</span>
<span class="card__month">October</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--event card--red">
<div class="card__date">
<span class="card__day">17</span>
<span class="card__month">April</span>
</div>
<div class="card__content">
<div class="title">
<h2 class="h6 title__highlight"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
</div>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
</div>
</div>
<div class="margin-bottom-2xl">
<div class="slider--gallery js-slider--gallery">
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/304/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Studying in the lab</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/3/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Graduates give Staffs Uni star role in popular app</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/22/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/304/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Studying in the lab</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/3/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Graduates give Staffs Uni star role in popular app</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/22/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/304/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Studying in the lab</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/3/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Graduates give Staffs Uni star role in popular app</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div>
<div class="tile">
<figure class="tile__figure">
<img src="https://picsum.photos/id/22/1600/800" class="" alt="" />
<figcaption class="tile__caption">
<div class="title">
<p class="h6 title__highlight">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="slider--gallery__nav js-slider--gallery__nav">
<div>
<img src="https://picsum.photos/id/304/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/3/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/22/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/304/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/3/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/22/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/304/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/3/300/300" class="" alt="" />
</div>
<div>
<img src="https://picsum.photos/id/22/300/300" class="" alt="" />
</div>
</div>
</div>
<div class="margin-bottom-2xl">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum 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.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="margin-bottom-2xl">
<div class="slider--tiles js-slider--tiles">
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-maroon tile__title">
<h3 class="h4 title__highlight">Specialist Labs</h3>
</div>
<div class="tile__content-body">
<p>Our specifically designed Science Centre includes specialist laboratories, interview suites, and dedicated specialist equipment.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-pink tile__title">
<h3 class="h4 title__highlight">Motion Capture Studio</h3>
</div>
<div class="tile__content-body">
<p>The Motion Capture Studio allows students to capture the motion of multiple human movement simultaneously in the creation of high quality for motion sequences for Games, Animation and VFX.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">HDTV Center</h3>
</div>
<div class="tile__content-body">
<p>You'll use our HD Television Centre, which is equipped with broadcast standard technologies, green room, vision gallery and a comprehensive racks room.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-slate tile__title">
<h3 class="h4 title__highlight">Extremely Longworded Long Title Demonstration</h3>
</div>
<div class="tile__content-body">
<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>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-maroon tile__title">
<h3 class="h4 title__highlight">Specialist Labs</h3>
</div>
<div class="tile__content-body">
<p>Our specifically designed Science Centre includes specialist laboratories, interview suites, and dedicated specialist equipment.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-pink tile__title">
<h3 class="h4 title__highlight">Clinical Training Facilities</h3>
</div>
<div class="tile__content-body">
<p>Our labs provide the environment for you to learn fundamental skills associated with emergency pre-hospital care. This includes: advanced patient assessment techniques, airway management, obtaining intramuscular, intravenous and intraosseous access, advanced life-support skills.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">HDTV Center</h3>
</div>
<div class="tile__content-body">
<p>You'll use our HD Television Centre, which is equipped with broadcast standard technologies, green room, vision gallery and a comprehensive racks room.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title title--bg-slate tile__title">
<h3 class="h4 title__highlight">Extremely Longworded Long Title Demonstration</h3>
</div>
<div class="tile__content-body">
<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>
</a>
</div>
</div>
</div>
<div class="margin-bottom-4xl">
<div class="slider--tiles js-slider--tiles">
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-maroon tile__title">
<h3 class="h4 title__highlight">Specialist Labs</h3>
</div>
</div>
</div>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-pink tile__title">
<h3 class="h4 title__highlight">Motion Capture Studio</h3>
</div>
</div>
</div>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title tile__title">
<h3 class="h4 title__highlight">HDTV Center</h3>
</div>
</div>
</div>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-slate tile__title">
<h3 class="h4 title__highlight">Extremely Longworded Long Title Demonstration</h3>
</div>
</div>
</a>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-maroon tile__title">
<h3 class="h4 title__highlight">Specialist Labs</h3>
</div>
</div>
</div>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-maroon tile__title">
<h3 class="h4 title__highlight">Specialist Labs</h3>
</div>
</div>
</div>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-pink tile__title">
<h3 class="h4 title__highlight">Motion Capture Studio</h3>
</div>
</div>
</div>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title tile__title">
<h3 class="h4 title__highlight">HDTV Center</h3>
</div>
</div>
</div>
</div>
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-slate tile__title">
<h3 class="h4 title__highlight">Extremely Longworded Long Title Demonstration</h3>
</div>
</div>
</a>
</div>
<div>
<div class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__caption">
<div class="title title--bg-maroon tile__title">
<h3 class="h4 title__highlight">Specialist Labs</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="tables">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tables</h2>
</div>
</div>
</div>
<div class="wrap">
<h2 class="h4">Full-time</h2>
<div class="overflow-x">
<table class="">
<thead>
<tr>
<td colspan="2"></td>
<th scope="col">Number of applications</th>
<th scope="col">Percentage of applications that received an offer</th>
<th scope="col">Percentage of applications that accepted an offer</th>
<th scope="col">Percentage of applications where the student registered</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" scope="row">Ethnicity</th>
<th scope="row">BAME</th>
<td>2380</td>
<td>78.7%</td>
<td>26.7%</td>
<td>23.7%</td>
</tr>
<tr>
<th scope="row">White</th>
<td>8260</td>
<td>84.8%</td>
<td>34.8%</td>
<td>32.1%</td>
</tr>
<tr>
<th rowspan="2" scope="row">EIMD quintile</th>
<th scope="row">1 and 2</th>
<td>4950</td>
<td>80.2%</td>
<td>33.3%</td>
<td>30.5%</td>
</tr>
<tr>
<th scope="row">3 to 5</th>
<td>5280</td>
<td>86.2%</td>
<td>33.7%</td>
<td>31%</td>
</tr>
<tr>
<th rowspan="3" scope="row">Gender</th>
<th scope="row">Female</th>
<td>5670</td>
<td>76.4%</td>
<td>30.5%</td>
<td>27.8%</td>
</tr>
<tr>
<th scope="row">Male</th>
<td>5090</td>
<td>90.6%</td>
<td>35.8%</td>
<td>32.9%</td>
</tr>
<tr>
<th scope="row">Other</th>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
<h2 class="h4">Percentage of first degrees at grade 2:1 or above by characteristic for 2017-18 qualifiers</h2>
<div class="overflow-x">
<table class="">
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Characteristic split</th>
<th scope="col">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" scope="row">Ethnicity</th>
<th scope="row">BAME</th>
<td>60%</td>
</tr>
<tr>
<th scope="row">White</th>
<td>76%</td>
</tr>
<tr>
<th rowspan="2" scope="row">EIMD quintile</th>
<th scope="row">1 and 2</th>
<td>66.3%</td>
</tr>
<tr>
<th scope="row">3 to 5</th>
<td>74.7%</td>
</tr>
<tr>
<th rowspan="3" scope="row">Gender</th>
<th scope="row">Female</th>
<td>69.1%</td>
</tr>
<tr>
<th scope="row">Male</th>
<td>74.2%</td>
</tr>
<tr>
<th scope="row">Other</th>
<td>N</td>
</tr>
</tbody>
</table>
</div>
<h2 class="h4">Choosing your accommodation</h2>
<div class="overflow-x">
<table class="">
<thead>
<tr>
<th><strong>Residence</strong></th>
<th><strong>Clarice Cliff Court</strong></th>
<th><strong>College Court</strong></th>
<th style="text-align: left;"><strong>Leek Road halls (Aynsley, Royal Doulton, Spode and Wedgewood)</strong></th>
<th><strong>Leek Road halls (Minton)</strong></th>
<th><strong>Leek Road houses</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Facilities</strong></td>
<td>Our en-suite community focused student halls</td>
<td>Our en-suite College Road student halls</td>
<td>Our most up to date shared student halls</td>
<td>Our most affordable shared student hall</td>
<td>Our popular shared student houses</td>
</tr>
<tr>
<td><strong>Residents</strong></td>
<td>3-6</td>
<td>3-6</td>
<td>12-14</td>
<td>12-14</td>
<td>4-6</td>
</tr>
<tr>
<td><strong>Ensuite</strong></td>
<td>✔</td>
<td>✔</td>
<td>✗</td>
<td>✗</td>
<td>✗</td>
</tr>
<tr>
<td><strong>Internet</strong></td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><strong>Number of rooms </strong></td>
<td>297</td>
<td>150</td>
<td>519</td>
<td>36</td>
<td>177</td>
</tr>
<tr>
<td><strong>Cost (39 week contract)<br></strong></td>
<td>Total Licence Fee (2020/21): £4,875</td>
<td>
<p>Total Licence Fee (2020/21): £4,875</p>
</td>
<td>Total Licence Fee (2020/21): £4,290</td>
<td>Total Licence Fee (2020/21): £3,705 </td>
<td>Total Licence Fee (2020/21): £4,875</td>
</tr>
</tbody>
</table>
</div>
<div class="title">
<h2 class="title__highlight">Variant in a box</h2>
</div>
<div class="box box--bg-slate">
<div class="box__content">
<table class="table--apply">
<thead>
<tr>
<th>Location</th>
<th>Award</th>
<th>Study option</th>
<th>Start date</th>
<th><span class="visually-hidden">Apply Link</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Location">Centre of Excellence Stafford</td>
<td data-label="Award">BSc (Hons)</td>
<td data-label="Study option">Part-time</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Centre of Excellence Stafford</td>
<td data-label="Award">BSc (Hons)</td>
<td data-label="Study option">Part-time</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Centre of Excellence Stafford</td>
<td data-label="Award">BSc (Hons)</td>
<td data-label="Study option">Part-time</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
</tbody>
</table>
</div>
</div>
<hr />
<div class="title">
<h2 class="title__highlight">Variant not in a box, with longer test data</h2>
</div>
<table class="table--apply">
<thead>
<tr>
<th>Location</th>
<th>Award</th>
<th>Study option</th>
<th>Start date</th>
<th><span class="visually-hidden">Apply Link</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Location">Centre of Excellence Stafford</td>
<td data-label="Award">BSc (Hons)</td>
<td data-label="Study option">Part-time</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
<td data-label="Award">Long Award Name (Hons)</td>
<td data-label="Study option">Complicated Study Option</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Centre of Excellence Stafford</td>
<td data-label="Award">BSc (Hons)</td>
<td data-label="Study option">Part-time</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
<td data-label="Award">Long Award Name (Hons)</td>
<td data-label="Study option">Complicated Study Option</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Centre of Excellence Stafford</td>
<td data-label="Award">BSc (Hons)</td>
<td data-label="Study option">Part-time</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
<tr>
<td data-label="Location">Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
<td data-label="Award">Long Award Name (Hons)</td>
<td data-label="Study option">Complicated Study Option</td>
<td data-label="Start date">28 September 2021</td>
<td class="table--apply__buttonCell"><a href="" class="button button--block button--lg button--pointy">Apply Now</a>
</tr>
</tbody>
</table>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="slab js-waypoint-page-section" id="tabs">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tabs</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="tabs js-tabs">
<nav class="tabs__nav">
<ul class="tabs__list">
<li class="tabs__item"><a class="tabs__link" href="#section1">Module Route 1</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section-two">Route Two</a></li>
<li class="tabs__item"><a class="tabs__link" href="#third-section">Third Route</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section4">Fourth and Final Route</a></li>
</ul>
</nav>
<section class="tabs__section" id="section1">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum 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.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="section-two">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum 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.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="third-section">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum 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.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="section4">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum 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.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="section5">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum 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.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="tags">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tags</h2>
</div>
</div>
</div>
<div class="wrap">
<ul class="list--inline">
<li><span class="tag">tag</span></li>
<li><span class="tag">long tag</span></li>
<li><span class="tag">really long tag</span></li>
<li><span class="tag">even looooonger tag</span></li>
</ul>
<ul class="list--inline">
<li><a href="#" class="tag">link</a></li>
<li><a href="#" class="tag">long link</a></li>
<li><a href="#" class="tag">really long tag</a></li>
<li><a href="#" class="tag">even looooonger tag</a></li>
</ul>
<span class="tag">solitary tag</span>
<a href="#" class="tag">solitary linked tag</a>
</div>
</div>
<div class="slab js-waypoint-page-section" id="tiles">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tiles</h2>
</div>
</div>
</div>
<div class="wrap">
<p>In the LDN theme, the default tile uses the <code>$primary</code> colour, as in the main theme.</p>
<p>These can be styled with a modifier, which will cascade to the <code>title__highlight</code></p>
<p>Like other LDN themed component variants, the modifiers are in a map in <code>main-ldn.scss</code>, consider this the source of truth, but at the time of typing, they're currently:</p>
<ul>
<li><code>accent-blue-ldn</code></li>
<li><code>accent-blue-deep-ldn</code></li>
<li><code>accent-magenta-ldn</code></li>
<li><code>accent-purple-deep-ldn</code></li>
<li><code>accent-tef-gold</code></li>
</ul>
For example:
<pre><div class="tile tile--accent-blue-deep-ldn"></div></pre>
<p>As the map is overwritten, colours from the main site are not available unless explicitly added to the map in Sass.</p>
<div class="grid grid--flush grid-2-cols@mobile-wide grid-3-cols@tablet-wide">
<div>
<a class="tile tile--accent-blue-deep-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-blue-deep-ldn</h3>
</div>
<div class="tile__content-body">
<p>Reach your full potential with our postgraduate courses.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-blue-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/architecture" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-blue-ldn</h3>
</div>
<div class="tile__content-body">
<p>Study with us, no matter where in the world you come from.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-magenta-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-magenta-ldn</h3>
</div>
<div class="tile__content-body">
<p>Study Esports, Computer Games Design, Cyber Security, and more, with us in London.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-purple-deep-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-purple-deep-ldn</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-tef-gold" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-tef-gold</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
</div>
<hr />
<p><code>tile-group</code> can still be applied for a grouped hover effect, as follows:</p>
<div class="grid grid--flush grid-2-cols@mobile-wide grid-3-cols@tablet-wide tile-group">
<div>
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile (no modifier)</h3>
</div>
<div class="tile__content-body">
<p>Reach your full potential with our postgraduate courses.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-blue-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/architecture" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-blue-ldn</h3>
</div>
<div class="tile__content-body">
<p>Study with us, no matter where in the world you come from.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-magenta-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-magenta-ldn</h3>
</div>
<div class="tile__content-body">
<p>Study Esports, Computer Games Design, Cyber Security, and more, with us in London.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-purple-deep-ldn" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-purple-deep-ldn</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
<div>
<a class="tile tile--accent-tef-gold" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">tile--accent-tef-gold</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="titles">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Titles</h2>
</div>
</div>
</div>
<div class="wrap">
<p>Modifiers are in the <code>$tile-accent-colors</code> map in <code>_main-ldn.scss</code>, currently:</p>
<ul class="list--inline">
<li><code>bg-white</code></li>
<li><code>bg-blue-ldn</code></li>
<li><code>bg-blue-deep-ldn</code></li>
<li><code>bg-magenta-ldn</code></li>
<li><code>bg-purple-deep-ldn</code></li>
<li><code>bg-tef-gold</code></li>
</ul>
<div class="box box--bg-slate">
<div class="box__content">
<div class="title title--has-tail">
<h1 class="title__highlight">
This is an H1 with a tail
</h1>
</div>
<div class="title">
<h2 class="title__highlight h3">
This is an H2 styled as an H3
</h2>
</div>
<div class="title title--bg-white title--has-tail">
<p class="title__highlight">
This is a paragraph on white with a tail
</p>
</div>
<div class="title title--bg-purple-deep-ldn">
<h2 class="title__highlight">
H2 on purple-deep-ldn
</h2>
</div>
<div class="title title--bg-blue-ldn">
<h4 class="title__highlight">
This is an H4 on blue-ldn
</h4>
</div>
<div class="title title--bg-magenta-ldn">
<p class="title__highlight">
This is a paragraph on magenta with a tail
</p>
</div>
</div>
</div>
<div class="box box--bg-offwhite">
<div class="box__content">
<div class="title title--has-tail">
<h1 class="title__highlight">
This is an H1 with a tail
</h1>
</div>
<div class="title title--has-tail">
<h2 class="title__highlight">
This is an H2 with a tail
</h2>
</div>
<div class="title title--has-tail">
<h3 class="title__highlight">
This is an H3 with a tail
</h3>
</div>
<div class="title title--has-tail">
<h4 class="title__highlight">
This is an H4 with a tail
</h4>
</div>
<div class="title title--has-tail">
<h5 class="title__highlight">
This is an H5 with a tail
</h5>
</div>
<div class="title title--has-tail">
<h6 class="title__highlight">
This is an H6 with a tail
</h6>
</div>
<div class="title title--bg-white title--has-tail">
<p class="title__highlight">
This is a paragraph on white with a tail
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="zebra">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Zebra</h2>
</div>
</div>
</div>
<div class="wrap">
<p><strong>Useful Note</strong>: Images are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>
<hr />
<div class="zebra">
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://placeimg.com/600/400/people" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="title zebra__title">
<h2 class="h4 title__highlight">Welcome Talks</h2>
</header>
<p>Once you’ve registered on the day, make your way to one of our welcome talks that run from 9.30am until 1pm. Here you’ll find out everything you need to know about our institution, the surrounding area, and why all our students and staff are <a href="">#ProudToBeStaffs</a>.</p>
</div>
</div>
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://placeimg.com/601/400/people" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="title zebra__title">
<h2 class="h4 title__highlight">A title that's very long that will probably-need to wrap to two lines</h2>
</header>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode. Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
<p>2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.</p>
</div>
</div>
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://placeimg.com/600/400/people" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="title zebra__title">
<h2 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h2>
</header>
<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>
</div>
</div>
</div>
</main>
<div class="slab slab--bg-granite-light ">
<div class="wrap">
<div class="accolade-slider js-slider--accolades">
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Rated Gold for Teaching Excellence</div>
<div class="accolade-slider__item-description">
<p>Teaching Excellence Framework</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-tef-gold.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Top 40 UK University</div>
<div class="accolade-slider__item-description">
<p>
37th out of 121 institutions University League Tables 2020</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-guardian.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">University of the Year Shortlist</div>
<div class="accolade-slider__item-description">
<p>Teaching Excellence Framework</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-times.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Top 1000 in the World Rankings</div>
<div class="accolade-slider__item-description">
<p>
Times Higher Education Awards</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-wur.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="accolade-slider__item-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-wur.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="accolade-slider__item-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-wur.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Rated Gold for Teaching Excellence</div>
<div class="accolade-slider__item-description">
<p>Teaching Excellence Framework</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-tef-gold.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Top 40 UK University</div>
<div class="accolade-slider__item-description">
<p>
37th out of 121 institutions University League Tables 2020</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-guardian.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">University of the Year Shortlist</div>
<div class="accolade-slider__item-description">
<p>Teaching Excellence Framework</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-times.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Top 1000 in the World Rankings</div>
<div class="accolade-slider__item-description">
<p>
Times Higher Education Awards</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-wur.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="accolade-slider__item-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-wur.png">
</figure>
</div>
</div>
<div>
<div class="accolade-slider__item">
<div class="h6 accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="accolade-slider__item-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
<figure class="accolade-slider__item-figure">
<img class="accolade-slider__item-img" src="../../img/logo-wur.png">
</figure>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-site">
<div class="wrap">
<a class="footer-site__logo" title="Home" href="/">
<img src="../../img/theme-ldn/logo-ldn.svg" alt="Digital Institute London Logo" class="no-lazy-load">
</a>
<div class="footer-site__main">
<div class="grid grid--spaced">
<div class="col-3/5 col-reverse">
<div class="grid grid--spaced grid-2-cols">
<div>
<h6>Courses</h6>
<ul class="list--unstyled list--links">
<li><a href="">Computer Science</a></li>
<li><a href="">Concept Art for Games and Film</a></li>
<li><a href="">Computer Games Design</a></li>
<li><a href="">Esports</a></li>
<li><a href="">Games PR, and Community Management</a></li>
<li><a href="">Cyber Security</a></li>
</ul>
</div>
<div>
<h6>Connect with us</h6>
<ul class="list--inline footer-site__social-list">
<li><a href=""><i class="icon"><img src="../../img/icon-facebook-white.svg" alt="Facebook" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-twitter-white.svg" alt="Twitter" /></i></a></li>
<li><a href=""><i class="icon"><img src="../../img/icon-instagram-white.svg" alt="Instagram" /></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-2/5">
<h6><strong>Staffordshire University London</strong></h6>
<p>
Here East<br />
Queen Elizabeth Olympic Park<br />
East London<br />
E20 3BS<br />
</p>
<p>+44 (0)1782 294000</p>
<p><a href="">Contact us</a></p>
<p>© Staffordshire University London 2020</p>
</div>
</div>
</div>
</div>
</footer>
{% include '@meganav--ldn' %}
<div class="masthead">
<div class="masthead__inner">
<div class="masthead__bg">
<img src="{{ ('/img/theme-ldn/masthead0.jpg') | path }}" style="object-position: 50% 20%"/>
{# <img src="https://dilondon.staffs.ac.uk/wp-content/uploads/2020/06/computer-science-sul-2000x888.jpg" style="object-position: 60% 35%" />#}
</div>
<div class="wrap">
{% include '@title' with {
text: 'Superpage!',
tail: true,
textElement: 'h1',
animate: true
} %}
{% include '@title' with {
text: 'For testing',
tail: true,
textElement: 'h4',
background: 'purple-deep-ldn',
animate: true
} %}
{% include '@title' with {
text: 'This page includes (almost) all the components to test how they work with the LDN stylesheet',
tail: true,
textElement: 'p',
background: 'white',
animate: true
} %}
</div>
</div>
</div>
<main id="main-content" role="main">
<nav class="page-nav js-page-nav" id="js-page-nav">
<div class="page-nav__stickyContainer">
<div class="wrap">
<div class="page-nav__inner">
<ul class="page-nav__list">
<li class="page-nav__item"><a class="page-nav__link" href="#accordion">Accordion</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#banner">Banner</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#boxes">Boxes</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#buttons">Buttons</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#cards">Cards</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#contact-us">Contact Us</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#feature-tiles">Feature Tiles</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#feature-links">Feature Links</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#hr">Horizontal Rule</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#iconbox">IconBox</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#lists">Lists</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#masthead">Masthead</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#meta">Meta</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#pager">Pager</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#page-nav">Page Nav</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#quote-banners">Quote Banners</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#slabs">Slabs</a></li>
{# <li class="page-nav__item"><a class="page-nav__link" href="#"></a></li>#}
{# <li class="page-nav__item"><a class="page-nav__link" href="#"></a></li>#}
{# <li class="page-nav__item"><a class="page-nav__link" href="#"></a></li>#}
{# <li class="page-nav__item"><a class="page-nav__link" href="#"></a></li>#}
<li class="page-nav__item"><a class="page-nav__link" href="#sliders">Sliders</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tables">Tables</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tabs">Tabs</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tags">Tags</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#tiles">Tiles</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#titles">Titles</a></li>
<li class="page-nav__item"><a class="page-nav__link" href="#zebra">Zebra</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="slab js-waypoint-page-section" id="accordion">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Accordion</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@accordion' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="banner">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Banner</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@banner--examples' %}
</div>
<div class="banner margin-top-xl">
<div class="banner__bg">
<img src="https://placeimg.com/1200/400/tech"/>
</div>
<div class="wrap">
<div class="banner__body">
<div class="hgroup">
<div class="title">
<div class="h2 title__highlight">Undergraduate Open Day</div>
</div>
<div class="title title--bg-blue-ldn">
<div class="h4 title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
</div>
<div class="title title--bg-white"><p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p></div>
</div>
<div class="banner__cta">
<a href="" class="button button--clipped">Book an open day - a long button title</a>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-offwhite js-waypoint-page-section" id="boxes">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Boxes</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid-4-cols">
{% for i in 1..4 %}
<div>
{% include '@box' with {
text: 'A demo box title',
lorem: loremShort,
modifiers: ['has-shadow']
} %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="buttons">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Buttons</h2>
</div>
</div>
</div>
<div class="wrap">
<p class="intro">A 'special' button modifier is available for LDN: <code>button--clipped</code></p>
<a href="" class="button button--lg button--clipped">A large clipped corner button!</a>
<a href="" class="button button--clipped">A clipped corner button!</a>
<a href="" class="button button--sm button--clipped">A small clipped corner button!</a>
</div>
</div>
<div class="slab js-waypoint-page-section" id="cards">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Cards</h2>
</div>
</div>
</div>
<div class="wrap">
<section class="">
{% include '@card--ldn-variants' %}
</section>
<section class="">
<div class="title title--has-tail margin-bottom-3xl">
<h3 class="title__highlight">Cards: Pullquote</h3>
</div>
{% include '@card--pullquote-ldn' %}
</section>
<section class="">
<div class="title title--has-tail margin-bottom-3xl">
<h3 class="title__highlight">Cards: Testimonial</h3>
</div>
{% include '@card--testimonial-ldn' %}
</section>
</div>
</div>
<div class="slab slab--bg-granite" id="cards-ksp">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h3 class="title__highlight">Cards (KSP)</h3>
</div>
</div>
</div>
<div class="wrap">
{% include '@card--ksp-light' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="contact-us">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Contact Us</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@contact-us' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="feature-tiles">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Feature Tiles</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@feature-tiles--ldn' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="feature-links">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Feature Links</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@feature-link--examples' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="hr">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Horizontal Rules</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@hr--triangles' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="iconbox">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">IconBox</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid-3-cols">
{% for i in 1..3 %}
<div>
<div class="iconBox">
<div class="iconBox__icon">
<svg id="icon-games" viewBox="0 0 180.43 133.59" width="100%" height="100%" fill="white">
<title>games design</title>
<path d="M122,40.37a6,6,0,0,1,4.26-10.29,6,6,0,0,1,6,6,6,6,0,0,1-6,6A6,6,0,0,1,122,40.37ZM141.14,45a6,6,0,1,0,4.26,1.77A6,6,0,0,0,141.14,45Zm-29.34-.39a6,6,0,1,0,0,12h0a6,6,0,1,0,0-12Zm14.87,14.87a6,6,0,1,0,4.26,1.76A6,6,0,0,0,126.67,59.43Zm53.76,24.28a3.32,3.32,0,0,1-.16,1,3.09,3.09,0,0,1-.85,1.79l-45,46.2a3,3,0,0,1-2.22.94l-.22,0-.22,0a3.1,3.1,0,0,1-2.17-.89L90.21,93.86,50.84,132.7a3.1,3.1,0,0,1-2.17.89l-.22,0-.22,0a3,3,0,0,1-2.22-.94L1,86.45a3.09,3.09,0,0,1-.85-1.79,3.32,3.32,0,0,1-.16-1L.1,21A3.07,3.07,0,0,1,1.42,18.5L18.91,1.05l.16-.13A3.07,3.07,0,0,1,21.27,0H159a3.12,3.12,0,0,1,1.43.36,3.13,3.13,0,0,1,1.06.69l17.41,17.37a3.07,3.07,0,0,1,1.44,2.6Zm-6.2-.81-.1-60.47L157.86,6.2H22.53L6.3,22.39,6.2,82.9l42.29,43.42L88,87.4a3.1,3.1,0,0,1,2.27-.89,3.07,3.07,0,0,1,2.26.89l39.46,38.92ZM70.3,47.65H56V33.36a3.1,3.1,0,0,0-6.2,0V47.65H35.52a3.1,3.1,0,1,0,0,6.2H49.81V68.14a3.1,3.1,0,1,0,6.2,0V53.85H70.3a3.1,3.1,0,1,0,0-6.2Z"></path>
</svg>
</div>
<div class="iconBox__content">
<h3 class="h6 iconBox__title">BA (Hons) Games PR, and Community Management</h3>
<p>Study the art of promotion, management and content creation in our brand-new marketing focused course.</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="lists">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Lists</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@list--inline-bulleted' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="masthead">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Masthead (Course)</h2>
</div>
</div>
</div>
{% include '@masthead--course' with {
title: 'Only use at the top of a course page, "obviously"',
slabBg: 'granite'
} %}
</div>
<div class="slab js-waypoint-page-section" id="meta">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Meta</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="grid grid--spaced">
<div class="col-1/3@tablet">
<div class="title">
<h3 class="h4 title__highlight">Meta</h3>
</div>
{% include '@meta' %}
</div>
<div class="col-2/3@tablet">
<div class="title">
<h3 class="h4 title__highlight">Inline Meta</h3>
</div>
{% include '@meta--inline' %}
<div class="title">
<h3 class="h4 title__highlight">Inline Definitions Meta</h3>
</div>
{% include '@meta--inline-dd' %}
</div>
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="pager">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Pager</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@pager' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="page-nav">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Page Nav (In-page)</h2>
</div>
</div>
</div>
<div class="wrap">
<p class="intro">Look up!</p>
</div>
</div>
<div class=" js-waypoint-page-section" id="quote-banners">
<div class="section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Quote Banners</h2>
</div>
</div>
</div>
<div class="quote-banner">
<div class="wrap">
<div class="quote-banner__flexContainer">
<div class="quote-banner__quoteContainer">
<div class="card card--testimonial card--purple-deep-ldn ">
<div class="card__content">
<blockquote class="blockquote--large">
<q class="blockquote__title">These quotes can use all the colour variants of cards</q>
<footer class="blockquote__footer">
<cite class="cite">Dan Sheerman</cite>
<p>Vice President of naming complicated variants of things</p>
</footer>
</blockquote>
</div>
</div>
</div>
<figure class="quote-banner__figure quote-banner__figure--align-bottom">
<img src="{{ '/img/placeholder-transparent-person.png' | path }}" alt="person smiling"/>
</figure>
</div>
</div>
</div>
<div class="quote-banner quote-banner--reverse">
<div class="wrap">
<div class="quote-banner__flexContainer">
<div class="quote-banner__quoteContainer">
<div class="card card--testimonial card--magenta-ldn ">
<div class="card__content">
<blockquote class="blockquote--large">
<q class="blockquote__title">Since coming to Staffordshire Uni I’ve become much more creative and confident in myself and my abilities</q>
<footer class="blockquote__footer">
<cite class="cite">Dan Sheerman</cite>
<p>Vice President of naming complicated variants of things</p>
</footer>
</blockquote>
</div>
</div>
</div>
<figure class="quote-banner__figure quote-banner__figure--align-bottom">
<img src="{{ '/img/placeholder-transparent-person.png' | path }}" alt="person smiling"/>
</figure>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-offwhite js-waypoint-page-section" id="slabs">
<div class="slab__header section-header section-header--bg-offwhite section-header--border-top">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Section Headers & Slabs</h2>
</div>
</div>
</div>
<div class="wrap">
<h3 class="slab__title">Offwhite Slab</h3>
</div>
</div>
<div class="slab">
<div class="wrap">
<h3 class="slab__title">Default Slab</h3>
</div>
</div>
<div class="slab slab--bg-granite">
<div class="wrap">
<h3 class="slab__title">Granite Slab</h3>
</div>
</div>
<div class="slab slab--bg-granite-light">
<div class="wrap">
<h3 class="slab__title">Light Granite Slab</h3>
</div>
</div>
<div class="slab js-waypoint-page-section" id="sliders">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Sliders</h2>
</div>
</div>
</div>
<div class="wrap">
<div class="margin-bottom-2xl">
{% include '@slider--event-cards' %}
</div>
<div class="margin-bottom-2xl">
{% include '@slider--gallery' %}
</div>
<div class="margin-bottom-2xl">
{% include '@slider--modules' %}
</div>
<div class="margin-bottom-2xl">
{% include '@slider--tiles' %}
</div>
<div class="margin-bottom-4xl">
{% include '@slider--tiles-gallery' %}
</div>
</div>
</div>
<div class="slab js-waypoint-page-section" id="tables">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tables</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@table' %}
{% include '@table--apply' %}
{% include '@table--modules' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="tabs">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tabs</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@tabs--with-sliders' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="tags">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tags</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@tag' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="tiles">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Tiles</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@tile--accent-colours-ldn' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="titles">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Titles</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@title--ldn-examples' %}
</div>
</div>
<div class="slab js-waypoint-page-section" id="zebra">
<div class="slab__header section-header section-header--bg-offwhite">
<div class="wrap">
<div class="section-header__title title title--has-tail">
<h2 class="title__highlight">Zebra</h2>
</div>
</div>
</div>
<div class="wrap">
{% include '@zebra' %}
</div>
</div>
</main>
{% include '@slider--accolades' with {
slabBg: 'granite-light'
} %}
{% include '@page-footer--ldn' %}