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

Web Component

  <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>

React

  <UxfListGroup>    <UxfListGroupItem>An item</UxfListGroupItem>    <UxfListGroupItem>A second item</UxfListGroupItem>    <UxfListGroupItem>A third item</UxfListGroupItem>    <UxfListGroupItem>A fourth item</UxfListGroupItem>    <UxfListGroupItem>And a fifth one</UxfListGroupItem>  </UxfListGroup>

Angular

  <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

Web Component

  <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>

React

  <UxfListGroup>    <UxfListGroupItem active aria-current="true">An active item</UxfListGroupItem>    <UxfListGroupItem>A second item</UxfListGroupItem>    <UxfListGroupItem>A third item</UxfListGroupItem>    <UxfListGroupItem disabled>A fourth item</UxfListGroupItem>    <UxfListGroupItem>And a fifth one</UxfListGroupItem></UxfListGroup>

Angular

  <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

Web Component

  <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>

React

  <UxfListGroup>    <UxfListGroupItem disabled aria-current="true">An active item</UxfListGroupItem>    <UxfListGroupItem>A second item</UxfListGroupItem>    <UxfListGroupItem>A third item</UxfListGroupItem>    <UxfListGroupItem>A fourth item</UxfListGroupItem>    <UxfListGroupItem>And a fifth one</UxfListGroupItem></UxfListGroup>

Angular

  <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

Web Component

  <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>

React

  <UxfListGroup flush>    <UxfListGroupItem>An active item</UxfListGroupItem>    <UxfListGroupItem>A second item</UxfListGroupItem>    <UxfListGroupItem>A third item</UxfListGroupItem>    <UxfListGroupItem disabled>A fourth item</UxfListGroupItem>    <UxfListGroupItem>And a fifth one</UxfListGroupItem></UxfListGroup>

Angular

  <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>