Skip to main content

List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Examples#

Basic example#

An itemA second itemA third itemA fourth itemAnd a fifth one
  <uxf-list-group>    <uxf-list-group-item>An item</uxf-list-group-item>    <uxf-list-group-item>A second item</uxf-list-group-item>    <uxf-list-group-item>A third item</uxf-list-group-item>    <uxf-list-group-item>A fourth item</uxf-list-group-item>    <uxf-list-group-item>And a fifth one</uxf-list-group-item>  </uxf-list-group>

Active items#

Add active to a list-group-item to indicate the current active selection.

An active itemA second itemA third itemA fourth itemAnd a fifth one
  <uxf-list-group>    <uxf-list-group-item active aria-current="true">An active item</uxf-list-group-item>    <uxf-list-group-item>A second item</uxf-list-group-item>    <uxf-list-group-item>A third item</uxf-list-group-item>    <uxf-list-group-item>A fourth item</uxf-list-group-item>    <uxf-list-group-item>And a fith one</uxf-list-group-item>  </uxf-list-group>

Disabled items#

Add disabled to a list-group-item to appear disabled.

An active itemA second itemA third itemA fourth itemAnd a fifth one
  <uxf-list-group>    <uxf-list-group-item disabled aria-current="true">An active item</uxf-list-group-item>    <uxf-list-group-item>A second item</uxf-list-group-item>    <uxf-list-group-item>A third item</uxf-list-group-item>    <uxf-list-group-item>A fourth item</uxf-list-group-item>    <uxf-list-group-item>And a fith one</uxf-list-group-item>  </uxf-list-group>

Flush#

Add flush to a list-group-item to remove some borders and rounded corners to the rendered list group items edge-to-edge in parent container (e.g. cards).

An active itemA second itemA third itemA fourth itemAnd a fifth one
  <uxf-list-group flush>    <uxf-list-group-item>An active item</uxf-list-group-item>    <uxf-list-group-item>A second item</uxf-list-group-item>    <uxf-list-group-item>A third item</uxf-list-group-item>    <uxf-list-group-item>A fourth item</uxf-list-group-item>    <uxf-list-group-item>And a fith one</uxf-list-group-item>  </uxf-list-group>