HTML

List

ExamplesDocumentationCSS Variables

Examples

Unordered list

  • 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.
Copied to clipboard

Ordered list

  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.
Copied to clipboard

List inline

  • Inline List item 1
  • Inline List item 2
  • Inline List item 3
Copied to clipboard

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 Modifies for inline list style.

CSS Variables

--pf-c-list--PaddingLeftc_list_PaddingLeft0
--pf-c-list--li--MarginTopc_list_li_MarginTop0
--pf-c-list--m-inline--li--MarginRightc_list_m_inline_li_MarginRight1.5rem
--pf-c-list--nested--MarginLeftc_list_nested_MarginLeft0.5rem
--pf-c-list--nested--MarginTopc_list_nested_MarginTop0.5rem
--pf-c-list--ul--ListStylec_list_ul_ListStyledisc outside