'Picto item' component

Introduction

Picto items are a non-interactive content type used to emphasise key points within the context of a larger story. Picto items generally inherit the same layout options as product and page cards. However, it’s not considered a true card in this design system. They can be grouped together to form a list (ordered or unordered) or used on their own. Picto items do not have visual boundaries.

Anatomy

Key Content  

Editorial 

• The use of the list indicator will be controlled by the where this component is used. Most likely set in the CMS.

Visual Style 

Counter

Picto items can have counter or not (adjusting subtlety)

Open

Without counter

Open

With counter

Modes

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

Behavior

• Picto items do not have the whole card area clickable.

Usage

Do’s

• Picto items are never shown by themselves, always within lists.

• 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’ts

• Don’t use Picto items when you only need a simple call to action. Use a CTA Block instead.

• 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.

Related/Similar Components 

• Text + Image

• Asset item

• Text list