Skip to content
Patternfly Logo

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 medium

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.
Deprecated: isVerticalbooleanfalseUse `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