Patternfly Logo

Examples

Using hr (default)


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
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.
isVerticalbooleanNofalseFlag to indicate the divider is vertical (must be in a flex layout)

CSS variables

.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--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-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