| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
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.
...
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’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.
Anatomy
...
Item | Component / type | Notes | ||||||
|---|---|---|---|---|---|---|---|---|
1 - Icon | Pictogram |
| ||||||
2 - List indicator | ? |
| ||||||
3 - Heading | Typography |
| ||||||
4 - Body | Typography |
| ||||||
5 - Link | Link (standard) |
|
...
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
Variations
Left alignStart align (works with RTL Languages)
Centre align
With list indicator
Size - controlled by the viewport
Large
Small
Orientation
Vertical
Horizontal
...