List
Use a list component to embed a formatted list (bulleted or numbered list) into page content.
ExamplesDocumentationCSS VariablesExamples
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.
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 | --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-m-inline | --pf-c-list--PaddingLeft | 0 | ||
| .pf-c-list.pf-m-inline li | --pf-c-list--li--MarginTop | 0 | ||
