ÌìÃÀ´«Ã½Ó°ÊÓ

Callout and promo

See when and how to use our new callout and promo components.

• basic callout
• callout with supergraphic
• callout with image
• contact callout
• basic promo
• promo with supergraphic
• promo with image

Callouts

A callout is a supportive content component used to highlight important or noteworthy information that reinforces the surrounding content. It enhances scannability and adds emphasis, but does not interrupt the user journey. Links should only be included as link text (not CTA buttons, which are used with promos).

Guidance on colours

Callouts alwas have a solid background colour (unlike promos, which use a gradient background).

Feel free to be as creative as possible when using the colour of callouts on recruitment focused pages - especially when the information you're calling out needs to be enticing for students to read.

Try not to stack callouts of the same colour directly on top of or in the same viewport as each other - if two or more callouts appear consecutively or close to each other, try to use different coloured versions for each.

More formal content like contact information, terms and conditions, legal information or similar disclaimers must always appear in the 'chalk' callout - plain and straightforward. 

Basic callout

Callout with supergraphic

When the callout doesn't contain too much text, use the version with supergraphic. The supergraphic uses up width of the component and reduces the space it takes up.

Callout with image

Images used should be square, a minimum size of 720px by 720px.

Contact us

The variants below include a two-column and three-column variant. When using the three-column variant with a lot of text, please check everything displays correctly by resizing the browser down to various viewports.

---

Promos

A promo is a forward-looking, action-oriented component used to promote a specific opportunity, event or campaign. All promos should have CTAs, encouraging a continued user journey. If the content you're presenting doesn’t lead to a call to action, then maybe the promo isn’t the right component – try the callout instead.

You shouldn’t use link text in promos (unlike callouts) – just stick to the one CTA for a clear user journey.

Guidance on colours

Promos alwas have a gradient background (unlike callouts, which use a solid background colour).

In their current use, we've tried to ‘theme’ the promos:

• green promos have been used for things relating to campus and the university's vision (such as virtual tours or Sussex strategy content)
• purple promos have been used for things that students might directly interact with (such as open day promos and student stories)
• winter/pale promos have been used for more formal information (such as ResearchPlus, living costs and fees related information)

This may not apply to how you use promos going forward, but we're sharing this to give you an idea of how you may make colour choices if helpful.

Basic promo

Promo with supergraphic

When the callout doesn't contain too much text, use the version with supergraphic. The supergraphic uses up width of the component and reduces the space it takes up.

Promo with image

Images used should be square, a minimum size of 720px by 720px.