Skip to Content
Patternfly Logo

Divider

Use the Divider as a horizontal separator to create space or group items on a page or within a list.

PropsCSS Variables

Using hr (default)

Untitled example


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 properties
NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the divider
component'hr' | 'li' | 'div'NoDividerVariant.hrThe component type to use
isVerticalbooleanNofalseFlag to indicate the divider is vertical (must be in a flex layout)
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'; }NoInsets at various breakpoints.

CSS Variables

.pf-c-divider--pf-c-divider--Heightc_divider_Height
1px
.pf-c-divider--pf-c-divider--BackgroundColorc_divider_BackgroundColor
#d2d2d2
.pf-c-divider--pf-c-divider--after--Heightc_divider_after_Height
1px
.pf-c-divider--pf-c-divider--after--BackgroundColorc_divider_after_BackgroundColor
#d2d2d2
.pf-c-divider--pf-c-divider--after--FlexBasisc_divider_after_FlexBasis
100%
.pf-c-divider--pf-c-divider--after--Insetc_divider_after_Inset
0%
.pf-c-divider--pf-c-divider--m-vertical--after--FlexBasisc_divider_m_vertical_after_FlexBasis
100%
.pf-c-divider--pf-c-divider--m-vertical--after--Widthc_divider_m_vertical_after_Width
1px
.pf-c-divider.pf-m-inset-none--pf-c-divider--after--Insetc_divider_after_Inset
0%
.pf-c-divider.pf-m-inset-xs--pf-c-divider--after--Insetc_divider_after_Inset
0.25rem
.pf-c-divider.pf-m-inset-sm--pf-c-divider--after--Insetc_divider_after_Inset
0.5rem
.pf-c-divider.pf-m-inset-md--pf-c-divider--after--Insetc_divider_after_Inset
1rem
.pf-c-divider.pf-m-inset-lg--pf-c-divider--after--Insetc_divider_after_Inset
1.5rem
.pf-c-divider.pf-m-inset-xl--pf-c-divider--after--Insetc_divider_after_Inset
2rem
.pf-c-divider.pf-m-inset-2xl--pf-c-divider--after--Insetc_divider_after_Inset
3rem
.pf-c-divider.pf-m-inset-3xl--pf-c-divider--after--Insetc_divider_after_Inset
4rem