Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.

installyarn add @clayui/list
versionNPM Version
useimport List from '@clayui/list';
Check the Lexicon List Pattern for a more in-depth look at the motivations and proper usage of this component.

List sections help separate content by a specific category or type.

Example

Align content inside a .list-group-item element with a flexbox with .list-group-item-flex.

Use a combination of .flex-col and .flex-col.flex-col-expand to control the size of each cell.

Add the class show-dropdown-action-on-active to display dropdown-menus when active in List Groups.

Direct descendants of flex-col become block level elements by default. See https://www.w3.org/TR/css-flexbox-1/#flex-items. If you want to display content using floats, inline , or inline-block, wrap the content with a block level element such as a div.

Snippet

Variations

Bordered

Use .list-group-bordered on .list-group to style .list-group-item-flex like a table.

Snippet

Default

Snippet

Notification

Snippet

Group Elements

Use the .list-group-header and .list-group-header-title class.

Snippet

Items

Colors

  • List Item Normal
  • List Item Success
  • List Item Info
  • List Item Warning
  • List Item Danger
  • List Item Light
  • List Item Dark

Snippet

Active Colors

Snippet

Snippet

Actions on Hover

Anchors

Snippet

Buttons

Snippet

Active

Use the .active class on the same element that you putted .list-group-item.

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM