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.
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Integer in volutpat libero.
- Ut non enim metus.
Ordered
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Integer in volutpat libero.
- Donec a diam tellus.
-
Etiam auctor nisl et.
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
-
Integer in volutpat libero.
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Aenean nec tortor orci.
- Quisque aliquam cursus urna, non bibendum massa viverra eget.
- Vivamus maximus ultricies pulvinar.
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.
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
