| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Vertical Picto items.
Horizontal Picto items are not in scope.
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 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) |
|
...
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.
...
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
VariationsStyle 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.
...
Asset item, Picto item, Text + Image, Text list - Are there all the same component?
...
Examples
Useful links
nN/aA