*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Picto item
- Nick Harris
The Picto Item component is a simple media layout used to used to emphasise key points within the context of a larger story. They can be grouped together to form a list (ordered or unordered) or used on their own.
Usage
Do’s
Use Picto items to highlight concisely, key points of a story or product benefit.
Use 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.
Anatomy
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | Image | PNG, JPG | MANDATORY | |
2 | Heading | Text | MANDATORY | |
3 | Description | Text | Optional | |
4 | List indicator | N/A | Text | Optional |
5 | Link | Text | Optional |
Visual 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
Editorial
The use of the list indicator will be controlled by the where this component is used. Most likely set in the CMS.
Picto items are designed to summarise key points so the heading and description copy must be concise.
Behaviour
This is a non-interactive component.
If used with a Link, standard link behaviour will apply.
Accessibility
If this component is used in a list, list accessibility standards are required:
The user/listener is notified of the length of the list.
The list index is called out before the content.
The heading must some first in the DOM.