List

  1. Dashboard
  2. 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
    • Neted Second iteom
  • Third item
  • forth item
  • Fifth item

Three different types of lists are defined in Bootstrap: Unordered List, Ordered List, and Unstyled List.

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.

  • 40x40
    Single-line item with avatar
  • 40x40
    Single-line item with avatar
  • 40x40
    Single-line item with avatar

Example of a single-line item with avatar.

  • 40x40
    Single-line item with avatar and icon
    check_box
  • 40x40
    Single-line item with avatar and icon
    check_box_outline_blank
  • 40x40
    Single-line item with avatar and icon
    check_box_outline_blank

Example of a single-line item with avatar and icon.

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

  • 40x40

    Two-line item

    Secondary text
  • 40x40

    Two-line item

    Secondary text
  • 40x40

    Two-line item

    Secondary text

Avatar with Two-line List

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

  • 40x40

    Three-line item

    In a three-line list, each tile contains a maximum of three lines of text.
  • 40x40

    Three-line item

    The amount of text can vary between tiles within the same list.
  • 40x40

    Three-line item

    If more than three lines of text need to be shown in list tiles, use cards instead.

Avatar with Three-line List

  • 40x40

    Three-line item

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

    Three-line item

    The amount of text can vary between tiles within the same list.
    check_box_outline_blank
  • 40x40

    Three-line item

    If more than three lines of text need to be shown in list tiles, use cards instead.
    check_box_outline_blank

Avatar with Three-line List and Icon

Linked Items

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 Items

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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Group Items

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

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Group Items with diffrent types

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

Group Items with Linking

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 items with heading and Linking