Page Comparison

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.

...

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)

...

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.

...

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

Analytics & Data 

• Most requirements are covered under listsDon’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 

• Product cards

• Page cards

• Asset items

• ListText + Image

• Asset item

• Text list