...
X
...
| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Component Description
Use When
X
X
Don’t Use When
|
| 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 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.
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 Teaser instead.
Link the Pictogram
Anatomy
...
Item | Component / type | Notes | ||||||
|---|---|---|---|---|---|---|---|---|
1 - Icon | Pictogram |
| ||||||
2 - List indicator | ? |
| ||||||
3 - Heading | Typography |
| ||||||
4 - Body | Typography |
| ||||||
5 - Link | Link (Secondary CTA) |
|
See Figma for full list of variants.
Related/Similar Components
X
X Text + Image
Asset item
Text list
Key Content
...
Item | TypeContent type | Notes |
|
|
*Notes
Visual Style
X
Anatomy
...
Item
...
Type
...
Notes
...
1.
...
2.
Behaviour
Progressive enhancement:
Non JS
JS
Editorial
X
X
X
Accessibility
...
Key
...
Interaction
Aria considerations
etc
Analytics & Data
X
X
Future Expansion
X
X
Wider Conversations that may impact this
Item: Description
Item: Description
Inspiration from elsewhere
X
X
Examples
Insert here
1 - Icon | Image | |
2 - List indicator | Text | Not user controlled |
3 - Heading | Text | |
4 - Body | Text | |
5 - Link | Text |
Editorial
The use of the list indicator will be controlled by where this component is used. Most likely set in the CMS.
Style
Picto 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
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
Accessibility
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
N/A
Wider Conversations that may impact this
Asset item, Picto item, Text + Image, Text list - Are there all the same component?
...
Examples
Useful links
N/A