Page Comparison

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

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, Page, or Asset card instead.

Anatomy

See Figma for full list of variants.

Related/Similar Components 

• Text + Image

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.

Style

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

  • Centre align

  • With 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 requirements

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

Analytics & Data 

• N/A

Future Expansion 

• N/A

Wider Conversations that may impact this 

...

Examples

Useful links

n/a