Design System
List groups
Lists are a collection of small amounts of information that the user should see in a single page. Lists are a good alternative to tables/grids, as the most important information is clearly emphasized using different visual approaches. Read more about lists in the UX Guidelines.
Use when
- To display small amounts of data in a structured way and the need for filtering and sorting is low
- To give the user an overview of a set of alternatives
Design
Default list group
The most basic list group is simply an unordered list with items.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Primary list group
There is a alternative background color, it just need .list-group-primary class along with the default class of the list group main wrapper .list-group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Group list with interactions
Linkify list group items by using anchor tags - <a> - instead of list items, that also means using a parent <div> instead of an <ul>. No need for individual parents around each element.
Default
Primary
Options
Badges
Add badges to any list group item and it will automatically be positioned on the right.
By adding .badge-nopill class to the badge element will remove the pill efect for alternative/blue list group.
- 21Cras justo odio
- 9Cras justo odio
- 4Disabled list item
- Morbi leo risus1
- 7Selected list item
- Vestibulum at eros3
Custom content
Adding footer to your list:
Alternative header for basic list group, add .list-group-header class to the .list-group-title element.
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.