Skip to main content

WideList

WideLists represent a set of items displayed in a way to organize related information.

Usage

  • WideLists represent a set of related WideList items in a list view, which potentially are actionable. The component has a variety of options that can suit your needs.
  • When you’re looking to create a list of tabular data, use the Table component. When you’re looking to create a static ordered/unordered list to make content more readable, use the List component.

Anatomy

A. Title

The title associated with the WideList item.

B. Description

Give additional information to the user.

C. Action

Mostly a link that can refer more information on the subject.

D. Clickable

A WideList item 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.

Icon

An Icon can be added to convey more meaning. The Icon is always designed with a 24px default size. The color of the Icon can be changed with one of Chameleon's Color Palette.

Avatar

As an Icon, an Avatar can bed added to convey more meaning.