# List

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

1. First item
2. Second item
3. Third item
   1. Nested First item
   2. Nested Second item
4. Forth item
5. 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-style` and 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

- mood Single-line item with icon
- notifications
  Single-line item with icon
- person_add
  Single-line item with icon
- share
  Single-line item with icon
- drive_eta
  Single-line item with icon

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 icon
  check_box
- Single-line item with avatar and icon
  check_box_outline_blank
- Single-line item with avatar and icon
  check_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

- ### Three-line item

  In a three-line list, each tile contains a maximum of three lines of text.
  check_box

- ### 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.
  check_box_outline_blank

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.

Single-line item Single-line item Single-line item Single-line item Single-line item

## Disabled List

Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.

Disabled List item List item List item List item List item

## List Group with Contextual classes

Use contextual classes to style list items, default or linked. Also includes `.active` state.

- List group item with `success` class.
- List group item with `info` class.
- List group item with `warning` class.
- List group item with `danger` class.

List Group with diffrent contextual classes.

Linked List group item with `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