Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Current »

Component type

Component

Document status

READY

Design source (in Figma)

Author

Nick Harris

Responsible

Milestone

4

Usage

Asset 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 an Image, heading (Typography), body (Typography), and a Secondary CTA (Link). They can be grouped together to form a list (ordered or unordered) or used on their own. Asset items come in two sizes, large and small, which are controlled by the viewport width.

Do’s

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

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

Anatomy

Item

Component / type

Notes

1 - Image

Image

MANDATORY

2 - Heading

Typography

MANDATORY

3 - Body

Typography

MANDATORY

4 - List indicator

?

OPTIONAL

5 - Link

Link (Secondary CTA)

OPTIONAL

See Figma for full list of variants.

Related/Similar Components 

  • Text + Image

  • Picto item

  • Text list

Key Content  

Item 

Type 

Notes 

1 - Image

Image

2 - List indicator

?

Not user controlled

3 - Heading

Text

4 - Body

Text

5 - Link

Text

Editorial 

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

Style

  • 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

  • Variations

    • Start align (works with RTL Languages)

    • Centre align

    • End 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 heading must some 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

n/a

  • No labels