WideList (design)

WideLists represent a set of related WideListItems in a list view, which potentially are actionable. The component has a variety of options that can suit your needs.

The default WideListItem consists out of:

Both the item title and the item description text styles (font-family, font size, font-weight, color) are customizable for specific use cases. Please consult Chameleon's Typographic System for the possibilities and guidelines.

Each WideListItem has the possibilty to add actions:

An Icon or Avatar can be added to convey more meaning.

The Icon is always designed with a 24px x 24px default size. The color of the Icon can be changed with one of Chameleon's Color Palette.

The Avatar can be displayed in a squared or circular appearance.

A WideListItem can be clickable if it has an href or button property. Clickable items visually differences by adding a chevron arrow indicating they can be interacted with.

<WideList>
  <WideListItem
    title="Item title"
    description="Item description"
    clickable
    as="a"
    href="#test"
  />
</WideList>

The default behaviour of the WideList is that it takes the 100% available width. On larger screens the item has a larger surrounding padding size than on mobile. This ensures that the items will be displayed in a more compact and dense manner. Please respect this behaviour when designing with the WideList component.

When the length of the content exceeds the availbale horizontal space, the text wraps to multiple lines.

The component has a built-in loading state that can be enabled to provide the user with useful feedback when data is being loaded.

<WideList>
  <WideListItem loading={true} />
</WideList>

Each WideListItem should be wrapped in a WideList container, where the items are seperated by a Divider. The container can be displayed in a flat or elevated appearance. A WideList with an elevation always has a border-radius of space-2 (4px) and a box-shadow of shadow-2.