Quick links

See below for more variants.

When to use

This component can be used when users are on a functional or an exploratory journey. These cards are used to highlight key information to help users achieve their goal.

As an example of a functional journey, this could be used on the 'Contact us' page where there are a range of specific actions for the user:

• Visit Ask Nestlé section
• Phone consumer services
• Tweet us
• Report a compliance concern

As an exploratory journey it could be used on a main gateway page on a specific subject such as infant nutrition that links off to key subpages that address the most common user needs.

How to use

With the colored backgrounds, section heading and icons/imagery, this component has more visual prominence than our other card types. This section will stand out prominently on the page, so you should bear this in mind when using it.

The quick links component includes:

• an optional icon (from a defined set)
• an optional image
• a background color around the whole section matching a background color on cards
• multiple cards
• text underneath the cards

Additional considerations

• Recommended section heading length: less than 40 characters
• Recommended card title length: 10 - 20 characters (max. 40)
• Recommended short description length: less than 125 characters
• Use mostly short functional text for the description to ensure a user can make relevant choices
• When using multiple cards, where possible try to keep the length of the short descriptions to roughly the same length, as this will align them best visually. One extra line will look ok, but if you have one card with text significantly longer than the others then the page will look strange.
• The card's title and content are filtered to remove HTML that could affect the layout of the card. The following HTML tags are permitted in titles and content: em, i, strong, b. Additionally, content can also include: abbr, br, p, acronym.
• Line breaks and paragraphs will automatically be included in the content, so you should not need to manually add these tags.
• A standard 16:9 ratio is recommended images. No cropping is applied to the image, so card images within a section should all have the same aspect ratio to ensure that cards display consistently.
• For specific guidance on imagery, watch the photography tutorial video and refer to Brand Identity & Communication Standard for more details.

Variants

Quick links with images and colored background