List
Use a list component to embed a formatted list (bulleted or numbered list) into page content.
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Anything that can be rendered inside of the list |
| className | string | No | '' | Additional classes added to the list |
| variant | ListVariant.inline | No | null | Adds list variant styles |
| type | OrderType | No | OrderType.number | Sets the way items are numbered if variant is set to ordered |
| component | 'ol' | 'ul' | No | ListComponent.ul | |
| ref | No | null |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Anything that can be rendered inside of list item |
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 | ||
