Cards
We have a number of variants to the standard card component. Cards display as one or more boxes with a subtle shadow to differentiate them from the rest of the page. There are a variety of colored background options to select from on individual cards, displaying in a card grid or layouts.
Card grid with colored background
-
Title Information snippet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
See below for more variants.
When to use
Cards are added to pages to enhance the visibility of content, using a colored background and accompanying images.
How to use
Refer to the main guidance for Cards in the Discoverability section to learn more about how to use this component.
Variants
Card grid with colored text and category tags
-
Title Information snippet
-
Title Information snippet
-
Title Information snippet
-
Title Information snippet
Card grid with colored background
-
Title Information snippet
-
Title Information snippet
-
Title Information snippet
-
Title Information snippet. Information snippet. Information snippet. Information snippet. Information snippet. Information snippet. Information snippet.
-
Title Information snippet. Information snippet. Information snippet. Information snippet. Information snippet. Information snippet. Information snippet. Information snippet.
Card grid with blockquote
-
Title Information snippet. -
Title Information snippet. -
Title Information snippet.
Example
See this component in use:
Working at Nestlé (Card grid with image and colored text)
Our vision and approach (Card grid with colored background)
Cocoa sourcing (Card grid with image and colored background)
