/
Brief: Asset item v. 0.1 [Component]

Brief: Asset item v. 0.1 [Component]

Owned by Nick Harris
Last updated: Aug 11, 2022
3 min read

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

  • Link the image

Anatomy

 

Item

Component type

Notes

Item

Component type

Notes

1 - Image

Image

Mandatory

2 - Heading

Typography

Mandatory

3 - Body

Typography

Optional

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 

Content 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

  • 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

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 

  • Image may contain background and foreground image

    • This will be an update to the Image component not the Asset Item component.

Wider Conversations that may impact this 

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

Examples

 

Partner logos on finish.com.au

 

 

 

 

 

 

Useful links

n/a