Versions Compared

Version Old Version 2 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Storybook component

The Picto Item component is a simple media layout used to used to emphasise key points within the context of a larger story. They can be grouped together to form a list (ordered or unordered) or used on their own.

Table of Contents
minLevel1
maxLevel2
indent0
separatorpipe

Usage

Tip

Do’s

  • Use Picto items to highlight concisely, key points of a story or product benefit.

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

Warning

Dont’s

  • Don’t be overly verbose with your headings and description copy

  • Use Picto items as a summary to linked content - Use a Product Card, Page Card, orTeaser instead.

  • Link the Pictogram

Anatomy

Image Added

Item

Component type

Content type

Notes

1

Image

Image

PNG, JPG

Status
colourRed
titleMANDATORY

2

Heading

Heading block

Text

Status
colourRed
titleMANDATORY

3

Description

Heading block

Text

Status
colourGreen
titleOptional

4

List indicator

N/A

Text

Status
colourGreen
titleOptional

5

Link

Link (Secondary)

Text

Status
colourGreen
titleOptional

Visual 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

Editorial

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

  • Picto items are designed to summarise key points so the heading and description copy must be concise.

Behaviour

  • This is a non-interactive component.

  • If used with a Link, standard link behaviour will apply.

Accessibility

  • If this component is used in a list, list accessibility standards are required:

    • The user/listener is notified of the length of the list.

    • The list index is called out before the content.

  • The heading must some first in the DOM.