Skip to content

Divider

Examples

Using hr

Using li

  • List item one
  • List item two

Using div

Inset medium

Inset at various breakpoints

Vertical in flex layout

first item
second item

Vertical in flex layout, inset small

first item
second item

Vertical in flex layout, inset at various breakpoints

first item
second item

Switch orientation at various breakpoints

first item
second item

Props

Divider

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the divider
component'hr' | 'li' | 'div'DividerVariant.hrThe 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.
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

Expand or collapse columnSelectorVariableValue
.pf-v6-c-divider--pf-v6-c-divider--Display
flex
.pf-v6-c-divider--pf-v6-c-divider--Color
(In light theme) #c7c7c7
.pf-v6-c-divider--pf-v6-c-divider--Size
1px
.pf-v6-c-divider--pf-v6-c-divider--before--FlexBasis
100%
.pf-v6-c-divider--pf-v6-hidden-visible--visible--Display
flex
.pf-v6-c-divider--pf-v6-hidden-visible--hidden--Display
none
.pf-v6-c-divider--pf-v6-hidden-visible--Display
flex
.pf-v6-c-divider.pf-m-hidden--pf-v6-hidden-visible--Display
none
.pf-v6-c-divider.pf-m-inset-none--pf-v6-c-divider--before--FlexBasis
calc(100% - 0% * 2)
.pf-v6-c-divider.pf-m-inset-xs--pf-v6-c-divider--before--FlexBasis
calc(100% - 0.25rem * 2)
.pf-v6-c-divider.pf-m-inset-sm--pf-v6-c-divider--before--FlexBasis
calc(100% - 0.5rem * 2)
.pf-v6-c-divider.pf-m-inset-md--pf-v6-c-divider--before--FlexBasis
calc(100% - 1rem * 2)
.pf-v6-c-divider.pf-m-inset-lg--pf-v6-c-divider--before--FlexBasis
calc(100% - 1.5rem * 2)
.pf-v6-c-divider.pf-m-inset-xl--pf-v6-c-divider--before--FlexBasis
calc(100% - 2rem * 2)
.pf-v6-c-divider.pf-m-inset-2xl--pf-v6-c-divider--before--FlexBasis
calc(100% - 3rem * 2)
.pf-v6-c-divider.pf-m-inset-3xl--pf-v6-c-divider--before--FlexBasis
calc(100% - 4rem * 2)

View source on GitHub