Brief: Picto Item v. 0.1 [Component]

Scope

• Vertical Picto items.

• Horizontal Picto items

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 concisely highlight key points of a story or product benefit.

• Use a Pictogram that is relevant to the point you are making.

• Use Picto items for specific and relevant content to the page, not peripheral content.

• Use a Link to direct users to additional relevant information.

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

• Link the Pictogram

Anatomy

Open

See Figma for full list of variants.

Related/Similar Components 

• Text + Image

• Asset item

• Text list

Key Content  

Editorial 

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

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

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.

    • This can be delivered with alt=””. Assuming SVG will appear in HTML like icons currently do. The preferred picto size should be set as the height and width in the HTML.

• The heading must come first in the DOM.

Analytics & Data 

• N/A

Future Expansion 

• N/A

Wider Conversations that may impact this 

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

Examples

Open

Picto items on detol.co.uk

Useful links

N/A