Versions Compared

Version Old Version 4 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of ContentsminLevel1maxLevel7typeflatseparatorpipe
Panel
panelIconId1f517293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:linkFigma:
panelIconText🔗:Figma:
bgColor#F4F5F7

Figma component link

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
bgColor#F4F5F7

Storybook component link

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

  • Enter text here

Dont’s

  • Enter text here

Anatomy

WarningInsert image here

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

  • Use an Imagethat 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 Asset items as a summary to linked content - Use a Product Card, Page Card, orTeaser instead.

  • Link the image

Image Removed

Component

A very brief description

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

Editorial

Behaviour

Accessibility

Related components

Image Removed

Component

A very brief description

Image Removed

Component

A very brief description

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

Editorial

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

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