Lists

Unordered Lists  Code

Default

  • In ut libero eget metus elementum eleifend.
  • Nullam sit amet sem in est placerat luctus.
    • In ut libero eget metus elementum eleifend.
    • Nullam sit amet sem in est placerat luctus.
  • In ut libero eget metus elementum eleifend.
  • Nullam sit amet sem in est placerat luctus.

Unstyled

  • In ut libero eget metus elementum eleifend.
  • Nullam sit amet sem in est placerat luctus.
    • In ut libero eget metus elementum eleifend.
    • Nullam sit amet sem in est placerat luctus.
  • In ut libero eget metus elementum eleifend.
  • Nullam sit amet sem in est placerat luctus.

Inline with Comma

Inline with Separator

Ordered Lists  Code

Use these classes instead of the "type" attribute when specific number or letter types are needed (e.g. in legal or technical documents).

Default

  1. In ut libero eget metus elementum eleifend.
    1. In ut libero eget metus elementum eleifend.
    2. Nullam sit amet sem in est placerat luctus.
  2. In ut libero eget metus elementum eleifend.

Decimal

  1. In ut libero eget metus elementum eleifend.
  2. Nullam sit amet sem in est placerat luctus.
  3. In ut libero eget metus elementum eleifend.
  4. Nullam sit amet sem in est placerat luctus.

Upper Latin

  1. In ut libero eget metus elementum eleifend.
  2. Nullam sit amet sem in est placerat luctus.
  3. In ut libero eget metus elementum eleifend.
  4. Nullam sit amet sem in est placerat luctus.

Lower Latin

  1. In ut libero eget metus elementum eleifend.
  2. Nullam sit amet sem in est placerat luctus.
  3. In ut libero eget metus elementum eleifend.
  4. Nullam sit amet sem in est placerat luctus.

Upper Roman

  1. In ut libero eget metus elementum eleifend.
  2. Nullam sit amet sem in est placerat luctus.
  3. In ut libero eget metus elementum eleifend.
  4. Nullam sit amet sem in est placerat luctus.

Lower Roman

  1. In ut libero eget metus elementum eleifend.
  2. Nullam sit amet sem in est placerat luctus.
  3. In ut libero eget metus elementum eleifend.
  4. Nullam sit amet sem in est placerat luctus.

Checklists  Code

The following examples show a simple checklist. Checklists can include any kind of content and checklist items can be used with click-regions as well.

Default Checklist

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.

Grid Checklist

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus viverra tortor, eget tristique ante condimentum quis. Etiam tempor diam ac velit lacinia gravida. Quisque condimentum justo sapien, sed dapibus metus scelerisque id.

Definition Lists

Default Definition Lists  Code

Definition Term One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae bibendum turpis, non aliquet sem. Donec non lacus velit. Nullam id fringilla lorem. Integer aliquam mollis nulla vitae suscipit.
Definition Term Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae bibendum turpis, non aliquet sem. Donec non lacus velit. Nullam id fringilla lorem. Integer aliquam mollis nulla vitae suscipit.

Inline Definition Lists  Code

When using inline lists, do not use block-level elements inside the <dd> tag. This will break the list layout.

Definition Term One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae bibendum turpis, non aliquet sem. Donec non lacus velit. Nullam id fringilla lorem. Integer aliquam mollis nulla vitae suscipit.
Definition Term Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae bibendum turpis, non aliquet sem. Donec non lacus velit. Nullam id fringilla lorem. Integer aliquam mollis nulla vitae suscipit.

List Groups

List groups are a flexible component for displaying simple styled lists of elements and complex ones with custom content.

Basic  Code

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

With Linked Items  Code

With Linked Items and Badges  Code

With Click Regions and Custom Content  Code

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.