Divider
Use the Divider as a horizontal separator to create space or group items on a page or within a list.
PropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the divider |
| component | 'hr' | 'li' | 'div' | No | DividerVariant.hr | The component type to use |
CSS Variables
| .pf-c-divider | --pf-c-divider--Height | 1px | ||
| .pf-c-divider | --pf-c-divider--BackgroundColor | #d2d2d2 | ||
| .pf-c-divider | --pf-c-divider--after--Height | 1px | ||
| .pf-c-divider | --pf-c-divider--after--BackgroundColor | #d2d2d2 | ||
| .pf-c-divider | --pf-c-divider--after--FlexBasis | 100% | ||
| .pf-c-divider | --pf-c-divider--after--Inset | 0% | ||
| .pf-c-divider | --pf-c-divider--m-vertical--after--FlexBasis | 100% | ||
| .pf-c-divider | --pf-c-divider--m-vertical--after--Width | 1px | ||
| .pf-c-divider.pf-m-inset-none | --pf-c-divider--after--Inset | 0% | ||
| .pf-c-divider.pf-m-inset-sm | --pf-c-divider--after--Inset | 0.5rem | ||
| .pf-c-divider.pf-m-inset-md | --pf-c-divider--after--Inset | 1rem | ||
| .pf-c-divider.pf-m-inset-lg | --pf-c-divider--after--Inset | 1.5rem | ||
| .pf-c-divider.pf-m-inset-xl | --pf-c-divider--after--Inset | 2rem | ||
| .pf-c-divider.pf-m-inset-2xl | --pf-c-divider--after--Inset | 3rem | ||
| .pf-c-divider.pf-m-inset-3xl | --pf-c-divider--after--Inset | 4rem | ||
