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:

For example:
<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.