Page Comparison

...

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 Card, Page Card, or Teaser instead.

Anatomy

...

...

Related/Similar Components 

• Text + Image

• Asset item

• Text list

Key Content  

...

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

• Variations

  • Start align (works with RTL Languages)

  • Centre align

  • End align

  • With list indicator

• Size - controlled by the viewport

  • Large

  • Small

• Orientation

  • VerticalHorizontal

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.

• The heading must come first in the DOM.

Analytics & Data 

• N/A

Future Expansion 

...

Wider Conversations that may impact this 

• Asset item, Picto item, Text + Image, Text list - Are there all the same component?

...

Examples

Useful links

n/a