Nav cards

Overview

Like many components in our system, these nav cards have been extensively tested and shown to be an intuitive and effective way of navigating our website.

Guidelines

• Each nav card section can have between 1-9 cards.

• You can have multiple nav card sections on the same page.

• If using multiple nav card sections on a page, use a different background colour for each instance.

Card variants

There are a number of different card variants available:

• Standard nav card (Image, title and synopsis)

• Variant with call to action button
  

• Variant with download link
  

• Variant with ‘Opens in new tab’ link

There are 5 different background colour variants:

• Navy

• Blue

• Light blue

• Yellow

• White

Image template

For the majority of pages, the nav cards will automatically pull in the banner image of the page they’re linking to, but there are a few exceptions where a separate image will need to be created.

These banner types don’t require a separate nav card image:

• Basic banner

• Campaign banner

• Form image

These banner types do require a separate nav card image*:

• Giving widget banner

• Emergency appeal banner

• Hub page banner

• World of Difference banner

*This is because in these banners the subject is off-centre and at risk of being cropped off when used in the nav card context.

To make up an overview image for nav cards use this Photoshop template

Word counts

Word counts for overall section heading

Each nav card section requires a short heading. There is also the option to have a 20 word intro sentence which pairs with this title.

Overall section heading (Mandatory):
Max 40 characters

Intro sentence (optional):
20 words
110 characters max