HTML

List

ExamplesDocumentationCSS Variables

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

Documentation

Overiew

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

Usage

ClassApplied toOutcome
.pf-c-list<ul>, <ol>Initiates a list. Required
.pf-m-inline.pf-c-listModifies for inline list style.

CSS Variables

--pf-c-list--li--MarginTopc_list_li_MarginTop
0
--pf-c-list--m-inline--li--MarginRightc_list_m_inline_li_MarginRight
1.5rem
--pf-c-list--nested--MarginLeftc_list_nested_MarginLeft
0.5rem
--pf-c-list--nested--MarginTopc_list_nested_MarginTop
0.5rem
--pf-c-list--PaddingLeftc_list_PaddingLeft
0
--pf-c-list--ul--ListStylec_list_ul_ListStyle
disc outside