/
Asset item

*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Asset item

Owned by Nick Harris, created
Last updated: Sept 01, 2022
2 min read

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.

Usage

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.

Anatomy

 

Item

Component type

Content type

Notes

 

Item

Component type

Content type

Notes

1

Image

Image

PNG, JPG

MANDATORY

2

Heading

Heading block

Text

MANDATORY

3

Description

Heading block

Text

Optional

4

List indicator

N/A

Text

Optional

5

Link

Link (Secondary)

Text

Optional

Visual 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

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