| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Info |
|---|
Picto card has been renamed Picto item to reflect the fact that it’s not considered a true card in this design system. |
Scope
...
Vertical Picto items.
Horizontal Picto items
Usage
Picto items are a non-interactive content type used to emphasise key points within the context of a larger story. Picto items can consist of of a Pictogram, heading (Typography), body (Typography), and Link. They can be grouped together to form a list (ordered or unordered) or used on their own.
Do’s
Use Picto items to concisely highlight concisely key points of a story or product benefit.
Use a Pictogram that is relevant to the point you are making.
Use Picto items for specific and relevant content to the page, not peripheral content.
Use a Link to direct users to additional relevant information rather than substituting a link for lots of content.
Dont’s
Don’t be overly verbose with your headings and body copy
Use Picto items as a summary to linked content - Use a Product Card, Page Card, or Asset card Teaser instead.
Link the Pictogram
Anatomy
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Insert image here |
...
Item | Component / type | Notes | ||||||
|---|---|---|---|---|---|---|---|---|
1 - Icon | Pictogram |
| ||||||
2 - List indicator | ? |
| ||||||
3 - Heading | Typography |
| ||||||
4 - Body | Typography |
| ||||||
5 - Link | Link (?Secondary CTA) |
|
...
Related/Similar Components
Text + Image
Asset item
Text list
Key Content
Item Type | Content type | Notes |
1 - Icon | Image | |
2 - List indicator | Text? | Not user controlled |
3 - Heading | Text | |
4 - Body | Text | |
5 - Link | Text |
...
The use of the list indicator will be controlled by the where this component is used. Most likely set in the CMS.
Style
Picto lists items 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
Variations
Left align
Style variations - (not component variants)
Alignment
Start align (works with RTL Languages)
Centre align
With or without list indicator
Size - controlled by the viewport
Large
Small
Orientation
Vertical
Horizontal
...
If this component is used in a list, list accessibility standards are required:
This is not an exhaustive list of requirementsThe user/listener is notified of the length of the list.
The list index is called out before the content.
The Pictogram is decorative and should not be visible to screen readers.
This can be delivered with alt=””. Assuming SVG will appear in HTML like icons currently do. The preferred picto size should be set as the height and width in the HTML.
The heading must come first in the DOM.
Analytics & Data
N/A
Future Expansion
...
Wider Conversations that may impact this
Asset item, Picto item, Text + Image, Text list - Are there all the same component?
...
Examples
Useful links
nN/aA