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, inset medium in flex layout

first item

second item

Vertical, inset at various breakpoints

first item

first 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.
isVerticalbooleanfalseFlag to indicate the divider is vertical (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--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--Display
flex
.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-hidden-visible--visible--Display
flex
.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-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