Examples
Props
Divider
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 |
inset | { default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; } | No | Insets at various breakpoints. | |
isVertical | boolean | No | false | Flag to indicate the divider is vertical (must be in a flex layout) |
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-xs | --pf-c-divider--after--Inset | 0.25rem | |
.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 | |
View source on GitHub