| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
...
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 are not in scope.
Usage
...
Usage
Asset items are a non-interactive content type used to emphasise key points within the context of a larger story. Picto Asset items can consist of of a Pictograman Image, heading (Typography), body (Typography), and a Secondary CTA (Link). They can be grouped together to form a list (ordered or unordered) or used on their own. Asset items come in two sizes, large and small, which are controlled by the viewport width.
Do’s
Use Picto Asset items to highlight concisely, key points of a story or product benefit.
Use a Pictogram an Image 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’t be overly verbose with your headings and body copy
Use Picto Asset items as a summary to linked content - Use a Product Card, Page Card, or Asset card Teaser instead.
Link the image
Anatomy
...
Item | Component / type | Notes | ||||||
|---|---|---|---|---|---|---|---|---|
1 - IconImage | PictogramImage |
| ||||||
2 - List indicatorHeading | ?Typography |
| ||||||
3 - HeadingBody | Typography |
| ||||||
4 - BodyList indicator | Typography? |
| ||||||
5 - Link | Link (standardSecondary CTA) |
|
...
Related/Similar Components
Text + Image
Picto item
Text list
Key Content
Item | Content Type | Notes |
1 - IconImage | Image | |
2 - List indicator | ? | 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 Asset 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 contentThe Pictogram is decorative and should not be visible to screen readers.
The heading must some first in the DOM.
Analytics & Data
N/A
Future Expansion
...
Image may contain background and foreground image
This will be an update to the Image component not the Asset Item component.
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