Examples
Props
Divider
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the divider | |
| component | 'hr' | 'li' | 'div' | 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'; } | Insets at various breakpoints. | |
| Deprecated: isVertical | boolean | false | Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout) |
| orientation | { default?: 'vertical' | 'horizontal'; sm?: 'vertical' | 'horizontal'; md?: 'vertical' | 'horizontal'; lg?: 'vertical' | 'horizontal'; xl?: 'vertical' | 'horizontal'; '2xl'?: 'vertical' | 'horizontal'; } | Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. |
CSS variables
| .pf-c-divider | --pf-hidden-visible--visible--Visibility | visible | ||
| .pf-c-divider | --pf-hidden-visible--hidden--Display | none | ||
| .pf-c-divider | --pf-hidden-visible--hidden--Visibility | hidden | ||
| .pf-c-divider | --pf-hidden-visible--Display | flex | ||
| .pf-c-divider | --pf-hidden-visible--Visibility | visible | ||
| .pf-c-divider | --pf-c-divider--BorderWidth--base | 1px | ||
| .pf-c-divider | --pf-c-divider--BorderColor--base | #d2d2d2 | ||
| .pf-c-divider | --pf-c-divider--Height | 1px | ||
| .pf-c-divider | --pf-c-divider--BackgroundColor | #d2d2d2 | ||
| .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-horizontal--Display | flex | ||
| .pf-c-divider | --pf-c-divider--m-horizontal--FlexDirection | row | ||
| .pf-c-divider | --pf-c-divider--m-horizontal--after--Height | 1px | ||
| .pf-c-divider | --pf-c-divider--m-horizontal--after--Width | auto | ||
| .pf-c-divider | --pf-c-divider--m-vertical--Display | inline-flex | ||
| .pf-c-divider | --pf-c-divider--m-vertical--FlexDirection | column | ||
| .pf-c-divider | --pf-c-divider--m-vertical--after--Height | auto | ||
| .pf-c-divider | --pf-c-divider--m-vertical--after--Width | 1px | ||
| .pf-c-divider | --pf-hidden-visible--visible--Display | flex | ||
| .pf-c-divider | --pf-c-divider--Display | flex | ||
| .pf-c-divider | --pf-c-divider--FlexDirection | row | ||
| .pf-c-divider | --pf-c-divider--after--Width | auto | ||
| .pf-c-divider | --pf-c-divider--after--Height | 1px | ||
| .pf-m-hidden.pf-c-divider | --pf-hidden-visible--Display | none | ||
| .pf-m-hidden.pf-c-divider | --pf-hidden-visible--Visibility | hidden | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--Display | inline-flex | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--FlexDirection | column | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--after--Width | 1px | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--after--Height | auto | ||
| .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
