Introduction
Picto 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. However, it’s not considered a true card in this design system. Picto items do not have visual boundaries.
Anatomy
Key Content
Item | Type | Notes |
Icon | Pictogram | |
Heading | Typography | |
Body | 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 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 items do not have the whole card area clickable.
Usage
Do’s
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 Pictogram that 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 items when you only need a simple call to action. Use a CTA Block instead.
Don’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
Text + Image