Cards

See below for more variants.

When to use

Cards are added to pages for two main reasons:

• A user is on a gateway page and we want to signpost various options for them to choose from
• A user is at the bottom of a page and we want to give them somewhere to go next

Within cards we have a variety of visual options to choose from. The reason for this is that they create a different visual impact and depending on the visual hierarchy within the page, we need to be able to emphasize cards more in some places, or provide additional information. We should be aware of these considerations when selecting which variant to use.

How to use

Cards have a range of display options:

Card carousel or grid

We can make cards that display as either a grid (all cards display on page load) or as a carousel (shows an initial set of cards on desktop / an initial card on mobile, with arrows to scroll to others). To decide which option to take we should think about this from a user's perspective and the value that is given to them. Some examples:

• On the homepage cards are a key feature in showing users important areas to navigate to, in this scenario it makes sense to have a grid.
• On the brands page where the cards are the main feature, they should be displayed in a grid.
• Cards at the bottom of a page linking to additional content are not the main feature of the page and should be in a carousel.

Number of cards

For card grids, you have the option to choose how many cards you want to display on a row. If you choose four it will give the standard card layout. However, if you choose two, it will adapt the layout to give a horizontal card.

Card type

There are different options for card types:

• With Entity Cards you are using pre-existing entities within the CMS and the content pulls through automatically when the entity is selected.
• If instead you want to manually define what content is displayed then you use a Custom Card.
• Image with Text Link Cards are like Custom Cards however there is no CTA such as read more because the 'Link text' field is the only piece of text displayed and is accompanied by an arrow icon. This card style is typically used for categories in our Brands section.

Background color

The default color options will usually be the most muted options, white or light oak. When adding color we should be mindful of the visual hierarchy. Where appropriate we can inject some additional personality with color.

Blockquote

If we want to use a card with a quote style as opposed to an image, for example on Ask Nestlé category pages, we can do that by using the Blockquote variant.

Title

Cards have an optional title. Although the card image, title, and information snippet are all optional, it is recommended that you include at least a title or an information snippet on your cards.

This title can be in black text or you can select the option for colored using the colored text style. Consider the visual hierarchy when using color within cards. The cards will already stand out strongly within the page:

• Do they need to stand out more as a key feature within the page
• Do we need to differentiate between the different cards displayed together

Information snippet

There is an optional information snippet.

Category tags

There is an option to display category tags on the image. These category tags use Nestlé brush font. Category tags are mainly intended for core gateway pages where the content of each card might be significantly different and require a category displayed to the user. The homepage is a good example of this.

CTA text

The standard 'Read more' link text can be overwritten by a more meaningful call-to-action.

Additional considerations

• Recommended section heading length: less than 40 characters
• Reccomended category tag length: 10 - 20 characters (max. 25)
• Recommended card title length: 10 - 20 characters (max. 40)
• Recommended information snippet length: less than 125 characters
• Use mostly short functional text for the information snippet to ensure a user can make relevant choices
• When using multiple cards, where possible try to keep the length of the information snippets 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.
• Line breaks and paragraphs will automatically be included in the content, so you should not need to manually add these tags.
• The images use a standard 16:9 ratio for dimensions. 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