Skip to content
PatternFly logo

List

Examples

Unordered

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • Ut venenatis, nisl scelerisque.
      1. Donec blandit a lorem id convallis.
      2. Cras gravida arcu at diam gravida gravida.
      3. Integer in volutpat libero.
  • Ut non enim metus.

Ordered

  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Donec a diam tellus.
  5. Etiam auctor nisl et.
    • Donec blandit a lorem id convallis.
    • Cras gravida arcu at diam gravida gravida.
    • Integer in volutpat libero.
      1. Donec blandit a lorem id convallis.
      2. Cras gravida arcu at diam gravida gravida.
  6. Aenean nec tortor orci.
  7. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  8. Vivamus maximus ultricies pulvinar.

Inline

  • Inline list item 1
  • Inline list item 2
  • Inline list item 3

Plain

  • Donec blandit a lorem id convallis.
  • Integer in volutpat libero.
  • Donec a diam tellus.
    • Donec blandit a lorem id convallis.
    • Cras gravida arcu at diam gravida gravida.
    • Integer in volutpat libero.
  • Aenean nec tortor orci.
  • Vivamus maximus ultricies pulvinar.

With horizontal rules

  • Donec blandit a lorem id convallis.
  • Integer in volutpat libero.
  • Donec a diam tellus.
  • Aenean nec tortor orci.
  • Vivamus maximus ultricies pulvinar.

With small icons

  • List item one
  • List item two
  • List item three

With large icons

  • List item one
  • List item two
  • List item three

Documentation

Overview

Non-inline lists can be nested up to any level.

Usage

Class
Applied to
Outcome
.pf-c-list
<ul>, <ol>
Initiates a list. Required
.pf-m-inline
.pf-c-list
Displays list items inline.
.pf-m-plain
.pf-c-list
Removes the list marker and base indentation.
.pf-m-bordered
.pf-c-list
Add horizontal divider between items in a list.
.pf-m-icon-lg
.pf-c-list
Show all the icons or logos in the list large.

CSS variables

.pf-c-list--pf-c-list--PaddingLeft
1.5rem
.pf-c-list--pf-c-list--nested--MarginTop
0.5rem
.pf-c-list--pf-c-list--nested--MarginLeft
0.5rem
.pf-c-list--pf-c-list--ul--ListStyle
disc outside
.pf-c-list--pf-c-list--li--MarginTop
0.5rem
.pf-c-list--pf-c-list--m-inline--li--MarginRight
1.5rem
.pf-c-list--pf-c-list--m-bordered--li--PaddingBottom
0.5rem
.pf-c-list--pf-c-list--m-bordered--li--BorderBottomColor
#d2d2d2
.pf-c-list--pf-c-list--m-bordered--li--BorderBottomWidth
1px
.pf-c-list--pf-c-list__item-icon--MinWidth
0.625rem
.pf-c-list--pf-c-list__item-icon--MarginTop
0.375rem
.pf-c-list--pf-c-list__item-icon--MarginRight
0.5rem
.pf-c-list--pf-c-list__item-icon--Color
#6a6e73
.pf-c-list--pf-c-list__item-icon--FontSize
0.625rem
.pf-c-list--pf-c-list--m-icon-lg__item-icon--MinWidth
1.5rem
.pf-c-list--pf-c-list--m-icon-lg__item-icon--MarginRight
1rem
.pf-c-list--pf-c-list--m-icon-lg__item-icon--FontSize
1.5rem
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--MinWidth
1.5rem
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--MarginTop
0
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--MarginRight
1rem
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--FontSize
1.5rem
.pf-c-list.pf-m-plain--pf-c-list--PaddingLeft
0
.pf-c-list.pf-m-inline--pf-c-list--PaddingLeft
0
.pf-c-list.pf-m-inline li--pf-c-list--li--MarginTop
0
.pf-c-list.pf-m-bordered > :last-child--pf-c-list--m-bordered--li--PaddingBottom
0
.pf-c-list.pf-m-bordered > :last-child--pf-c-list--m-bordered--li--BorderBottomWidth
0

View source on GitHub