List is a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Bootstrap List
Three different types of lists are defined in Bootstrap: Unordered List, Ordered List, and Unstyled List.
- First item
- Second item
- Third item
- Nested First item
- Nested Second item
- Forth item
- Fifth item
- First item
- Second item
- Third item
- Nested First item
- Nested Second item
- Forth item
- Fifth item
- First item
- Second item
- Nested First item
- Nested Second item
- Third item
- forth item
- Fifth item
- Description lists
- A description list is perfect for defining terms.
- Unordered
- A list of items in which the order does not explicitly matter.
- Ordered
- A list of items in which the order does explicitly matter.
- Unstyled
- Remove the default
list-styleand left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. - Horizontal description
- Make terms and descriptions in
<dl>line up side-by-side. Starts off stacked like default<dl>, but when the navbar expands, so do these.
Bootstrap provides Description List which consists of a list of terms with their associated description.
Single line List
In a single-line list, each tile contains a single line of text. The amount of text can vary between tiles within the same list.
Add.pmd-card-list followed by .list-group for the basic formatting of your list.
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
Icon list displays icon before the text lines. Add .pmd-list-icon for list with icons.
Distinguishing elements of list tiles need to be on the left for Left-to-Right interfaces, and vice versa. States and primary actions are placed on the left side of a list tile. Text within a list item should be considered part of the primary action target.
-
Single-line item with avatar -
Single-line item with avatar
-
Single-line item with avatar
Single-line List with avatar. Add .pmd-list-avatar for list with avatar.
-
Single-line item with avatar and iconcheck_box
-
Single-line item with avatar and iconcheck_box_outline_blank
-
Single-line item with avatar and iconcheck_box_outline_blank
Single-line List with avatar and icon. Add .pmd-list-avatar along with .pmd-list-icon for list with avatar.
Two Line List
In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.
-
Two-line item
Secondary text -
Two-line item
Secondary text -
Two-line item
Secondary text
Two-line List
- mood
Two-line item
Secondary text - notifications
Two-line item
Secondary text - share
Two-line item
Secondary text
Two-line List with Icon
-
Two-line item
Secondary text -
Two-line item
Secondary text -
Two-line item
Secondary text
Two-line List with Avatar
Three Line List
If the secondary text is of two lines, it will appear like this.
-
Three-line item
In a three-line list, each tile contains a maximum of three lines of text. -
Three-line item
The amount of text can vary between tiles within the same list. -
Three-line item
If more than three lines of text need to be shown in list tiles, use cards instead.
Three-line List
- mood
Three-line item
In a three-line list, each tile contains a maximum of three lines of text. - notifications
Three-line item
The amount of text can vary between tiles within the same list. - share
Three-line item
If more than three lines of text need to be shown in list tiles, use cards instead.
Three-line List with Icon
-
Three-line item
In a three-line list, each tile contains a maximum of three lines of text. -
Three-line item
The amount of text can vary between tiles within the same list. -
Three-line item
If more than three lines of text need to be shown in list tiles, use cards instead.
Three-line List with Avatar
-
check_box
Three-line item
In a three-line list, each tile contains a maximum of three lines of text. -
check_box_outline_blank
Three-line item
The amount of text can vary between tiles within the same list. -
check_box_outline_blank
Three-line item
If more than three lines of text need to be shown in list tiles, use cards instead.
Three-line List with Avatar and Icon
Linked List
Make list group items clickable by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
Disabled List
Add .disabled to a .list-group-item to gray it out to appear disabled.
List Group with Contextual classes
Use contextual classes to style list items, default or linked. Also includes .active state.
- List group item with
successclass. - List group item with
infoclass. - List group item with
warningclass. - List group item with
dangerclass.
List Group with diffrent contextual classes.
success class.
Linked List group item with info class.
Linked List group item with warning class.
Linked List group item with danger class.
Linked List Group with different contextual classes.
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.
Linked List Group with heading
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the Lists. The table lists the available classes and their effects.
| Propeller Classes | Effect | Remark |
|---|---|---|
.pmd-list |
Add this class for all the list items. | Required |
.pmd-card-list |
Class to be added to the list for formatting purpose. | Required |
.pmd-list-icon |
Add this class when your list contains icons. | Optional |
.pmd-list-avatar |
Add this class when your list contains profile pic. | Optional |