Navigation

See examples of navigation blocks (known as nav blocks), spotlights and other page navigation components.

Nav blocks

Image sizes should be cropped to 745px by 468px.

Two in a row

 

Three in a row

 

Call to action link

 

Spotlights

Images should be 845px by 600px. When choosing an image, allow for the left-hand side of it to get chopped off when viewed on a desktop screen.

Welcome to Sussex!

Congratulations to everyone who has a place at Sussex! Find out everything you need to know before you arrive on campus.

Find out what to do next

Single column block

 

Double column block

These should only be used on full-width pages, such as the homepage. See full width examples page.

Legacy spotlights

These are an older style of spotlight.

Images should be:

  • 633px by 400px for tablet and desktop (medium)
  • 320px by 204px for mobile (small).

Right-aligned text – light example

On a mobile show the first paragraph only. Add the class class="show-for-medium".

To get a dark spotlight, change the class "spotlight-content-light" to "spotlight-content-dark".

Life at Sussex

Your student experience doesn’t stop when you leave the lecture theatre. That’s why we have over 200 societies, cafés, bars and events on campus. And as we're only nine minutes from Brighton, with its famous beach, shopping streets and festivals, you're never short of things to do.

Discover student life at Sussex…

 

Left-aligned text – dark example

Accommodation

Whatever your budget, there are a range of housing options for you. From en-suite bedrooms on campus to student houses in Brighton, find a place you can call home.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam maximus mauris vitae posuere. Vestibulum metus urna, convallis non egestas in, congue non ligula.

Find out more…

 

Campaign banners

Images should be cropped to 633px wide, with a height of 400px.

Stick to about the amount of text shown in these examples. Less is more.

Email dcm@sussex.ac.uk if you need a content writer to refine campaign text.

Single CTA

 

Secondary CTA