Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Page Properties

Component type

List

Document status

Status
colourRed
titleDRAFT

Design source (in Figma)

Multiple. But list Layouts is a starting point.

Author

nathan.mckean@reckitt.com (Unlicensed)

Responsible

Julia Boyarshchikova (Deactivated)

Milestone

3

Lists are an aggregation of many items into a logical group with a common theme.

...

Lists in and of themselves don’t have a specific visual style. But within lists, there are common layout patterns.

...

Discuss grid vs flexbox and how to deliver a centred option (e.g. 3 + 2).

Behaviour 

  • Lists themselves are often guided by the content that exists within them, so don’t specifically have a behaviour though there are some behavioural ‘extensions’ to be mindful of.

  • Lists are always structural, but can also be semantic. Semantic lists allow for ordered and unordered lists (and potentially definition lists).

  • Any individual list can be considered critical or optional. A critical list always displays its entire contents and is generally used with the list of the core content of the page (e.g. the main product list on a product listing page. An optional list can display a portion of the list, with the remained revealed through user interaction of list controls.

  • List controls include carousels, ‘batch loading' and pagination, which are defined separately within this section.

  • Filtering and sorting are also list controls that fall outside of the MVP.

...