List Group

Basic List Group

Simple list of items

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Active & Disabled

Items with different states

  • Active item
  • A second item
  • A third item
  • Disabled item
  • And a fifth one
Links & Buttons
Actionable Items (Links)

Clickable list items as links

Active link item A second link item A third link item A fourth link item Disabled link item
Actionable Items (Buttons)

Clickable list items as buttons

Flush & Numbered
Flush List Group

Remove outer borders and rounded corners

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Numbered List Group

Auto-numbered list items

  1. First item in the list
  2. Second item in the list
  3. Third item in the list
  4. Fourth item in the list
  5. Fifth item in the list
Horizontal List Group
Horizontal Layouts

Display items horizontally at different breakpoints

Always Horizontal
  • An item
  • A second item
  • A third item
Horizontal from SM
  • An item
  • A second item
  • A third item
Horizontal from MD
  • An item
  • A second item
  • A third item
Horizontal from LG
  • An item
  • A second item
  • A third item
Contextual Colors
Background Colors

Contextual background variants

  • Primary list item
  • Secondary list item
  • Success list item
  • Danger list item
  • Warning list item
  • Info list item
  • Light list item
  • Dark list item
Actionable Colored Items

Clickable colored list items

Primary action item Secondary action item Success action item Danger action item Warning action item Info action item
With Badges & Icons
With Badges

List items with badge counters

  • Inbox 14
  • Drafts 2
  • Sent 1
  • Spam 99+
  • Trash 5
With Icons

List items with leading icons

Dashboard Profile Messages 3 Settings Logout
Custom Content
Rich Content

List items with headings and text

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
With Checkboxes

Selectable list items

Real-World Examples
Team Members
5 members
User
Sarah Johnson
Product Designer
Online
User
Michael Chen
Frontend Developer
Online
User
Emily Davis
Backend Developer
Away
User
James Wilson
DevOps Engineer
Offline
User
Lisa Thompson
Project Manager
Busy
Recent Activity

New project created

Website Redesign project was created
2 minutes ago

Task completed

Design mockups completed by Sarah
1 hour ago

New comment

Michael commented on the design file
3 hours ago

File uploaded

assets.zip was uploaded to the project
5 hours ago