| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introduction
Picto cards items are a non-interactive content type used to emphasise key points within the context of a larger story. Picto items generally inherit the same layout options as product and page cards. Picto cards However, it’s not considered a true card in this design system.They can be grouped together to form a list (ordered or unordered) or used on their own.Picto items do not have visual boundaries.
...
Anatomy
Key Content
Item | Type | Notes | |
Icon | Pictogram | image | |
TitleHeading | Typography | ||
DescriptionBody | Typography | ||
Counter (list indicator) | Typography | Optional | |
Link | Component |
Editorial
The use of the list indicator will be controlled by the where this component is used. Most likely set in the CMS.
...
Visual Style
Counter
Picto cards items can have counter or not (adjusting subtlety)
...
Modes
Picto lists come in two modes (not to be confused with light and dark theme):
Default - to be used on the default brand background
Inverse - To be used on the inverse brand background
...
Behavior
Picto cards items do not have the whole card area clickable.
...
Usage
Do’s
Cards Picto items are never shown by themselves, always within lists.
Use Picto items to highlight concisely key points of a story or product benefit.
Use a Pictogramthat is relevant to the point you are making.
Use a Link to direct users to additional relevant information rather than substituting a link for lots of content.
Don’ts
Don’t use picto cards Picto items when you only need a simple call to action. Use a CTA Block instead.
Analytics & Data
Most requirements are covered under listsDon’t be overly verbose with your headings and body copy
Use Picto items as a summary to linked content - Use a Product, Page, or Asset card instead.
...
Related/Similar Components
Product cards
Page cardsText + Image
Asset cardsitem
ListText list