Examples
Props
List
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered inside of the list |
| className | string | '' | Additional classes added to the list |
| component | 'ol' | 'ul' | ListComponent.ul | |
| iconSize | 'default' | 'large' | 'default' | Modifies the size of the icons in the list |
| isBordered | boolean | false | Modifies the list to add borders between items |
| isPlain | boolean | false | Modifies the list to include plain styling |
| ref | No type info | null | |
| type | OrderType | OrderType.number | Sets the way items are numbered if variant is set to ordered |
| variant | ListVariant.inline | null | Adds list variant styles |
ListItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered inside of list item |
| icon | React.ReactNode | null | null | Icon for the 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
