Skip to content

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-v6-c-list
<ul>, <ol>
Initiates a list. Required
.pf-m-inline
.pf-v6-c-list
Displays list items inline.
.pf-m-plain
.pf-v6-c-list
Removes the list marker and base indentation.
.pf-m-bordered
.pf-v6-c-list
Add horizontal divider between items in a list.
.pf-m-icon-lg
.pf-v6-c-list
Show all the icons or logos in the list large.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-list--pf-v6-c-list--PaddingInlineStart
1.5rem
.pf-v6-c-list--pf-v6-c-list--ul--ListStyle
disc outside
.pf-v6-c-list--pf-v6-c-list--Gap
0.5rem
.pf-v6-c-list--pf-v6-c-list--nested--PaddingBlockStart
0.5rem
.pf-v6-c-list--pf-v6-c-list--m-plain--PaddingInlineStart
0
.pf-v6-c-list--pf-v6-c-list--m-inline--PaddingInlineStart
0
.pf-v6-c-list--pf-v6-c-list--m-inline--ColumnGap
1.5rem
.pf-v6-c-list--pf-v6-c-list--m-inline--RowGap
0.25rem
.pf-v6-c-list--pf-v6-c-list--m-bordered--li--PaddingBlockStart
0.5rem
.pf-v6-c-list--pf-v6-c-list--m-bordered--li--BorderBlockStartColor
(In light theme) #c7c7c7
.pf-v6-c-list--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth
1px
.pf-v6-c-list--pf-v6-c-list__item-icon--MinWidth
0.75rem
.pf-v6-c-list--pf-v6-c-list__item-icon--MarginBlockStart
0.25rem
.pf-v6-c-list--pf-v6-c-list__item-icon--MarginInlineEnd
0.5rem
.pf-v6-c-list--pf-v6-c-list__item-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-list--pf-v6-c-list__item-icon--FontSize
0.75rem
.pf-v6-c-list--pf-v6-c-list--m-icon-lg__item-icon--MinWidth
1rem
.pf-v6-c-list--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd
1rem
.pf-v6-c-list--pf-v6-c-list--m-icon-lg__item-icon--FontSize
1rem
.pf-v6-c-list.pf-m-icon-lg--pf-v6-c-list__item-icon--MinWidth
1rem
.pf-v6-c-list.pf-m-icon-lg--pf-v6-c-list__item-icon--MarginBlockStart
0
.pf-v6-c-list.pf-m-icon-lg--pf-v6-c-list__item-icon--MarginInlineEnd
1rem
.pf-v6-c-list.pf-m-icon-lg--pf-v6-c-list__item-icon--FontSize
1rem
.pf-v6-c-list.pf-m-plain--pf-v6-c-list--PaddingInlineStart
0
.pf-v6-c-list.pf-m-inline--pf-v6-c-list--PaddingInlineStart
0
.pf-v6-c-list.pf-m-inline--pf-v6-c-list--Gap
0.25rem 1.5rem

View source on GitHub