Examples
Props
List
| 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 |
| component | 'ol' | 'ul' | No | ListComponent.ul | |
| ref | No type info | No | null | |
| type | OrderType | No | OrderType.number | Sets the way items are numbered if variant is set to ordered |
| variant | ListVariant.inline | No | null | Adds list variant styles |
ListItem
| 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-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
