Backgrounds are img elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of object-position to set the focal point for the image, eg. style="object-position: 70% 20%" for an image with a focal point towards the top right.

Add a class of banner__bg--blurred to the banner__bg to always blur the background - backgrounds will by default be blurred only at small viewport widths.

Undergraduate Open Day

Saturday 28 March 2020 - Stoke-on-trent campus

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.

Book an open day - a long button title

Undergraduate Open Day

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.

Book an open day

Consider reducing the h-size of any titles if placing a banner in a column, place this size on the title__highlight.

If you're only using a very small amount of text, you might not need to always blur the banner__bg. Use judgement and test responsively :)

Undergraduate Open Day

Saturday 28 March 2020 - Stoke-on-trent campus

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.

Book an open day - a long button title

Sport

Whether you're a competing athlete or a casual enthusiast, our thriving sporting community has something for you.

Sport opportunities and facilities

Undergraduate Open Day

Book an open day

A 'special' button modifier is available for LDN: button--clipped

This is just a specific demo of a box with an abstitle, see that component for source of truth.

Contact Us

Katie Holdcroft

Representative for Austria

• comms@staffs.ac.uk
• +44 7900 123456
• StaffsUniNews
• PressOffice

For further advice, you can contact our Central Enquiries Team.

Any Questions?

• comms@staffs.ac.uk
• +44 7900 123456
• StaffsUniNews
• PressOffice

For further advice, you can contact our Central Enquiries Team.

These can be styled with a modifier to the feature-tiles__item, which will cascade to the title__highlight and pseudo-square (if the grid item has one)

Modifiers are in the $tile-accent-colors map in _main-ldn.scss, currently: accent-blue-ldn, accent-blue-deep-ldn, accent-magenta-ldn, accent-purple-deep-ldn, and accent-tef-gold.

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

As the map is overwritten, colours from the main site are not available unless explicitly added to the map in Sass.

Digital Institute London

Study Esports, Computer Games Design, Cyber Security, and more, with us in London.

Developing knowledge

Reach your full potential with our postgraduate courses.

Connecting Continents

Study with us, no matter where in the world you come from.

Breaking boundaries

Public lecture from Ade Adepitan MBE

There’s still time to apply for 2020 entry

Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.

TEF Gold

Staffordshire University achieves Gold in the Teaching Excellence and Student Outcomes Framework

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.

It can be used on the left or right (or alternating corners) of a horizontal rule. Demo combinations follow:

Single triangle

above-left

below-left

above-right

below-right

Dual Triangles

above-left + below-right

above-right + below-left

• This is
• A list of things
• Displayed inline
• With bullets separating them
• Ta da!

Look up!

Full-time

Percentage of first degrees at grade 2:1 or above by characteristic for 2017-18 qualifiers

Choosing your accommodation

• tag
• long tag
• really long tag
• even looooonger tag

• link
• long link
• really long tag
• even looooonger tag

In the LDN theme, the default tile uses the $primary colour, as in the main theme.

These can be styled with a modifier, which will cascade to the title__highlight

Like other LDN themed component variants, the modifiers are in a map in main-ldn.scss, consider this the source of truth, but at the time of typing, they're currently:

• accent-blue-ldn
• accent-blue-deep-ldn
• accent-magenta-ldn
• accent-purple-deep-ldn
• accent-tef-gold

<div class="tile  tile--accent-blue-deep-ldn"></div>

As the map is overwritten, colours from the main site are not available unless explicitly added to the map in Sass.

tile--accent-blue-deep-ldn

Reach your full potential with our postgraduate courses.

tile--accent-blue-ldn

Study with us, no matter where in the world you come from.

tile--accent-magenta-ldn

Study Esports, Computer Games Design, Cyber Security, and more, with us in London.

tile--accent-purple-deep-ldn

Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.

tile--accent-tef-gold

Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.

tile-group can still be applied for a grouped hover effect, as follows:

tile (no modifier)

Reach your full potential with our postgraduate courses.

tile--accent-blue-ldn

Study with us, no matter where in the world you come from.

tile--accent-magenta-ldn

Study Esports, Computer Games Design, Cyber Security, and more, with us in London.

tile--accent-purple-deep-ldn

Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.

tile--accent-tef-gold

Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.

Modifiers are in the $tile-accent-colors map in _main-ldn.scss, currently:

• bg-white
• bg-blue-ldn
• bg-blue-deep-ldn
• bg-magenta-ldn
• bg-purple-deep-ldn
• bg-tef-gold

Useful Note: Images are img elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of object-position to set the focal point for the image, eg. style="object-position: 70% 20%" for an image with a focal point towards the top right.

Welcome Talks

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 #ProudToBeStaffs.

A title that's very long that will probably-need to wrap to two lines

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.

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.

Enjoying the View? How computer games can help evaluate landscapes

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.