Divider

A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.

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
Name	Type	Default	Description
className	string		Additional classes added to the divider
component	'hr' \| 'li' \| 'div'	DividerVariant.hr	The 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 column	Selector	Variable	Value
	.pf-v5-c-divider	--pf-v5-hidden-visible--hidden--Display	none
	.pf-v5-c-divider	--pf-v5-hidden-visible--Display	flex
--pf-v5-hidden-visible--Display --pf-v5-hidden-visible--visible--Display --pf-v5-c-divider--Display --pf-v5-c-divider--m-horizontal--Display flex
	.pf-v5-c-divider	--pf-v5-c-divider--BorderWidth--base	1px
--pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-divider	--pf-v5-c-divider--BorderColor--base	#d2d2d2
--pf-v5-c-divider--BorderColor--base --pf-v5-c-divider--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-divider	--pf-v5-c-divider--Height	1px
--pf-v5-c-divider--Height --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-divider	--pf-v5-c-divider--BackgroundColor	#d2d2d2
--pf-v5-c-divider--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-divider	--pf-v5-c-divider--after--BackgroundColor	#d2d2d2
--pf-v5-c-divider--after--BackgroundColor --pf-v5-c-divider--BorderColor--base --pf-v5-c-divider--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-divider	--pf-v5-c-divider--after--FlexBasis	100%
	.pf-v5-c-divider	--pf-v5-c-divider--after--Inset	0%
	.pf-v5-c-divider	--pf-v5-c-divider--m-vertical--after--FlexBasis	100%
	.pf-v5-c-divider	--pf-v5-c-divider--m-horizontal--Display	flex
	.pf-v5-c-divider	--pf-v5-c-divider--m-horizontal--FlexDirection	row
	.pf-v5-c-divider	--pf-v5-c-divider--m-horizontal--after--Height	1px
--pf-v5-c-divider--m-horizontal--after--Height --pf-v5-c-divider--Height --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-divider	--pf-v5-c-divider--m-horizontal--after--Width	auto
	.pf-v5-c-divider	--pf-v5-c-divider--m-vertical--Display	inline-flex
	.pf-v5-c-divider	--pf-v5-c-divider--m-vertical--FlexDirection	column
	.pf-v5-c-divider	--pf-v5-c-divider--m-vertical--after--Height	auto
	.pf-v5-c-divider	--pf-v5-c-divider--m-vertical--after--Width	1px
--pf-v5-c-divider--m-vertical--after--Width --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-divider	--pf-v5-hidden-visible--visible--Display	flex
--pf-v5-hidden-visible--visible--Display --pf-v5-c-divider--Display --pf-v5-c-divider--m-horizontal--Display flex
	.pf-v5-c-divider	--pf-v5-c-divider--Display	flex
--pf-v5-c-divider--Display --pf-v5-c-divider--m-horizontal--Display flex
	.pf-v5-c-divider	--pf-v5-c-divider--FlexDirection	row
--pf-v5-c-divider--FlexDirection --pf-v5-c-divider--m-horizontal--FlexDirection row
	.pf-v5-c-divider	--pf-v5-c-divider--after--Width	auto
--pf-v5-c-divider--after--Width --pf-v5-c-divider--m-horizontal--after--Width auto
	.pf-v5-c-divider	--pf-v5-c-divider--after--Height	1px
--pf-v5-c-divider--after--Height --pf-v5-c-divider--m-horizontal--after--Height --pf-v5-c-divider--Height --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-m-hidden.pf-v5-c-divider	--pf-v5-hidden-visible--Display	none
--pf-v5-hidden-visible--Display --pf-v5-hidden-visible--hidden--Display none
	.pf-v5-c-divider.pf-m-vertical	--pf-v5-c-divider--Display	inline-flex
--pf-v5-c-divider--Display --pf-v5-c-divider--m-vertical--Display inline-flex
	.pf-v5-c-divider.pf-m-vertical	--pf-v5-c-divider--FlexDirection	column
--pf-v5-c-divider--FlexDirection --pf-v5-c-divider--m-vertical--FlexDirection column
	.pf-v5-c-divider.pf-m-vertical	--pf-v5-c-divider--after--Width	1px
--pf-v5-c-divider--after--Width --pf-v5-c-divider--m-vertical--after--Width --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-divider.pf-m-vertical	--pf-v5-c-divider--after--Height	auto
--pf-v5-c-divider--after--Height --pf-v5-c-divider--m-vertical--after--Height auto
	.pf-v5-c-divider.pf-m-inset-none	--pf-v5-c-divider--after--Inset	0%
	.pf-v5-c-divider.pf-m-inset-xs	--pf-v5-c-divider--after--Inset	0.25rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-divider.pf-m-inset-sm	--pf-v5-c-divider--after--Inset	0.5rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-divider.pf-m-inset-md	--pf-v5-c-divider--after--Inset	1rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-divider.pf-m-inset-lg	--pf-v5-c-divider--after--Inset	1.5rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-divider.pf-m-inset-xl	--pf-v5-c-divider--after--Inset	2rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-divider.pf-m-inset-2xl	--pf-v5-c-divider--after--Inset	3rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-v5-c-divider.pf-m-inset-3xl	--pf-v5-c-divider--after--Inset	4rem
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem

View source on GitHub