List

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

install	yarn add @clayui/list
version
use	`import List from '@clayui/list';`

Table of Contents

Example
Variations
Bordered
Default
Notification
Group Elements
Header
Items
Colors
Active Colors
Items as Links and Buttons
Actions on Hover
Anchors
Buttons
Active

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.

List Section
Account Example One
Second Level Text
Third Level Text
Approved
Account Example One
Second Level Text
Third Level Text
Approved

Snippet

<ul className="list-group show-quick-actions-on-hover">
  <li className="list-group-header">
    <h3 className="list-group-header-title">List Section</h3>
  </li>
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <p className="list-group-title text-truncate">
        <a href="#1">Account Example One</a>
      </p>
      <p className="list-group-text text-truncate">Second Level Text</p>
      <p className="list-group-subtext">Third Level Text</p>
      <div className="list-group-detail">
        <span className="label label-success">
          <span className="label-item label-item-expand">Approved</span>
        </span>
      </div>
    </div>
    <div className="autofit-col">
      <div className="quick-action-menu">
        <a
          aria-label="Delete"
          title="Delete"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
        <a
          aria-label="Download"
          title="Download"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
        <a
          aria-label="Info"
          title="Info"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
      </div>
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
  <li className="list-group-item list-group-item-flex active">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input checked className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <p className="list-group-title">
        <a href="#1">Account Example One</a>
      </p>
      <p className="list-group-text">Second Level Text</p>
      <p className="list-group-subtext">Third Level Text</p>
      <div className="list-group-detail">
        <span className="label label-success">
          <span className="label-item label-item-expand">Approved</span>
        </span>
      </div>
    </div>
    <div className="autofit-col">
      <div className="quick-action-menu">
        <a
          aria-label="Delete"
          title="Delete"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
        <a
          aria-label="Download"
          title="Download"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
        <a
          aria-label="Info"
          title="Info"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
      </div>
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
</ul>

Variations

Bordered

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

Text Truncate Example
.list-group-subtitle
.list-group-subtitle a
This is an example of .list-group-text and a link.
a.list-group-text-link
Truncated a.list-group-text-linkand another link
This is .list-group-subtext and a link.
Regular a.list-group-subtext-link
Truncated a.list-group-subtext-linkand another link
Pending
Account Example Two
List Group Subtext
Info

Snippet

<ul className="list-group list-group-bordered">
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <span className="text-truncate-inline">
            <a className="text-truncate" href="#1">Text Truncate Example</a>
          </span>
        </div>
        <p className="list-group-subtitle">.list-group-subtitle</p>
        <p className="list-group-subtitle">
          <a href="#1">.list-group-subtitle a</a>
        </p>
        <p className="list-group-text">
          This is an example of .list-group-text and a
          <a href="#1">link</a>.
        </p>
        <p className="list-group-text">
          <a className="list-group-text-link" href="#1"
            >a.list-group-text-link</a
          >
        </p>
        <p className="list-group-text">
          <span className="text-truncate-inline">
            <a className="list-group-text-link text-truncate" href="#1"
              >Truncated a.list-group-text-link</a
            >
            and another <a href="#1">link</a>
          </span>
        </p>
        <p className="list-group-subtext">
          This is .list-group-subtext and a <a href="#1">link</a>.
        </p>
        <p className="list-group-subtext">
          <a className="list-group-subtext-link" href="#1"
            >Regular a.list-group-subtext-link</a
          >
        </p>
        <p className="list-group-subtext">
          <span className="text-truncate-inline">
            <a className="list-group-subtext-link text-truncate" href="#1"
              >Truncated a.list-group-subtext-link</a
            >
            and another <a href="#1">link</a>
          </span>
        </p>
        <div className="list-group-detail">
          <span className="label label-warning">
            <span className="label-item label-item-expand">Pending</span>
          </span>
        </div>
      </section>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <a href="#1">Account Example Two</a>
        </div>
        <p className="list-group-subtext">List Group Subtext</p>
        <div className="list-group-detail">
          <span className="label label-info">
            <span className="label-item label-item-expand">Info</span>
          </span>
        </div>
      </section>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
</ul>

Default

Account Example One
Second Level Text

Snippet

<ul className="list-group">
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-indicator"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">...</div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <p className="list-group-title text-truncate">
        <a href="#1">Account Example One</a>
      </p>
      <p className="list-group-subtitle text-truncate">Second Level Text</p>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
</ul>

Notification

Account Example One
Second Level Text
Account Example Two
Second Level Text

Snippet

<ul className="list-group list-group-notification">
  <li className="list-group-item list-group-item-flex list-group-item-primary">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">...</div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <a href="#1">Account Example One</a>
        </div>
        <p className="list-group-text">Second Level Text</p>
      </section>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <a href="#1">Account Example Two</a>
        </div>
        <p className="list-group-text">Second Level Text</p>
      </section>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
</ul>

Group Elements

Header

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

List Group Header
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Second Level Text
Approved

Snippet

<ul className="list-group">
  <li className="list-group-header">
    <h3 className="list-group-header-title">List Group Header</h3>
  </li>
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <span className="text-truncate-inline">
            <a className="text-truncate" href="#1"
              >ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</a
            >
          </span>
        </div>
        <p className="list-group-text">
          <span className="text-truncate-inline">
            <span className="text-truncate">Second Level Text</span>
          </span>
        </p>
        <div className="list-group-detail">
          <span className="label label-success">
            <span className="label-item label-item-expand">Approved</span>
          </span>
        </div>
      </section>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
</ul>

Items

Colors

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

Snippet

<ul className="list-group">
  <li className="list-group-item">List Item Normal</li>
  <li className="list-group-item list-group-item-success">List Item Success</li>
  <li className="list-group-item list-group-item-info">List Item Info</li>
  <li className="list-group-item list-group-item-warning">List Item Warning</li>
  <li className="list-group-item list-group-item-danger">List Item Danger</li>
  <li className="list-group-item list-group-item-light">List Item Light</li>
  <li className="list-group-item list-group-item-dark">List Item Dark</li>
</ul>

Active Colors

List Item Action Normal Active List Item Action Success Active List Item Action Info Active List Item Action Warning Active List Item Action Danger Active List Item Action Light Active List Item Action Dark Active

Snippet

<div className="list-group">
  <a className="active list-group-item list-group-item-action" href="#1"
    >List Item Action Normal Active</a
  >
  <a
    className="active list-group-item list-group-item-action list-group-item-success"
    href="#1"
    >List Item Action Success Active</a
  >
  <a
    className="active list-group-item list-group-item-action list-group-item-info"
    href="#1"
    >List Item Action Info Active</a
  >
  <a
    className="active list-group-item list-group-item-action list-group-item-warning"
    href="#1"
    >List Item Action Warning Active</a
  >
  <a
    className="active list-group-item list-group-item-action list-group-item-danger"
    href="#1"
    >List Item Action Danger Active</a
  >
  <a
    className="active list-group-item list-group-item-action list-group-item-light"
    href="#1"
    >List Item Action Light Active</a
  >
  <a
    className="active list-group-item list-group-item-action list-group-item-dark"
    href="#1"
    >List Item Action Dark Active</a
  >
</div>

Items as Links and Buttons

List Item 1 List Item 2List Item 4

Snippet

<div className="list-group">
  <a className="list-group-item list-group-item-action" href="#1"
    >List Item 1</a
  >
  <a className="list-group-item list-group-item-action" href="#1"
    >List Item 2</a
  >
  <button className="list-group-item list-group-item-action" type="button">
    List Item 3
  </button>
  <a className="list-group-item list-group-item-action" href="#1"
    >List Item 4</a
  >
</div>

Actions on Hover

Anchors

Anchors

Snippet

<ul className="list-group show-quick-actions-on-hover">
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <a href="#1">Anchors</a>
        </div>
      </section>
    </div>
    <div className="autofit-col">
      <div className="quick-action-menu">
        <a
          aria-label="Delete"
          title="Delete"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
        <a
          aria-label="Download"
          title="Download"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
        <a
          aria-label="Expand"
          title="Expand"
          className="component-action quick-action-item"
          href="#1"
          role="button"
        >
          ...
        </a>
      </div>
      <div className="dropdown dropdown-action">
        <a
          aria-label="More Actions"
          title="More Actions"
          aria-expanded="false"
          aria-haspopup="true"
          className="component-action dropdown-toggle"
          data-toggle="dropdown"
          href="#1"
          id="dropdownAction1"
          role="button"
        >
          ...
        </a>
        <ul aria-labelledby="" className="dropdown-menu dropdown-menu-right">
          <li>
            <a className="dropdown-item" href="#1" role="button">Remove</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1" role="button">Download</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1" role="button">Checkout</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Buttons

Account Example One
Second Level Text

Snippet

<ul className="list-group show-quick-actions-on-hover">
  <li className="list-group-item list-group-item-flex">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <section className="autofit-section">
        <div className="list-group-title">
          <span className="text-truncate-inline">
            <a className="text-truncate" href="#1">Account Example One</a>
          </span>
        </div>
        <p className="list-group-text">
          <span className="text-truncate-inline">
            <span className="text-truncate">Second Level Text</span>
          </span>
        </p>
      </section>
    </div>
    <div className="autofit-col">
      <div className="quick-action-menu">
        <button
          aria-label="Delete"
          title="Delete"
          className="component-action quick-action-item"
          type="button"
        >
          ...
        </button>
        <button
          aria-label="Download"
          title="Download"
          className="component-action quick-action-item"
          type="button"
        >
          ...
        </button>
        <button
          aria-label="Expand"
          title="Expand"
          className="component-action quick-action-item"
          type="button"
        >
          ...
        </button>
      </div>
      <div className="dropdown dropdown-action">
        <button
          aria-label="More Actions"
          title="More Actions"
          aria-expanded="false"
          aria-haspopup="true"
          className="component-action dropdown-toggle"
          data-toggle="dropdown"
          id="dropdownAction1"
          type="button"
        >
          ...
        </button>
        <ul aria-labelledby="" className="dropdown-menu dropdown-menu-right">
          <li>
            <button className="dropdown-item" type="button">Remove</button>
          </li>
          <li>
            <button className="dropdown-item" type="button">Download</button>
          </li>
          <li>
            <button className="dropdown-item" type="button">Checkout</button>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Active

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

Account Example One
Second Level Text

Snippet

<ul className="list-group">
  <li className="list-group-item list-group-item-flex active">
    <div className="autofit-col">
      <div className="custom-control custom-checkbox">
        <label>
          <input checked className="custom-control-input" type="checkbox" />
          <span className="custom-control-label"></span>
        </label>
      </div>
    </div>
    <div className="autofit-col">
      <div className="sticker sticker-secondary">
        <span className="inline-item"> ... </span>
      </div>
    </div>
    <div className="autofit-col autofit-col-expand">
      <p className="list-group-title text-truncate">
        <a href="#1">Account Example One</a>
      </p>
      <p className="list-group-text text-truncate">Second Level Text</p>
    </div>
    <div className="autofit-col">
      <div className="dropdown dropdown-action">...</div>
    </div>
  </li>
</ul>

Edit this page on GitHub

Contributors

Matuzalém Teles

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

Table of Contents

Example
Variations
Bordered
Default
Notification
Group Elements
Header
Items
Colors
Active Colors
Items as Links and Buttons
Actions on Hover
Anchors
Buttons
Active