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 small

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-v6-c-divider	--pf-v6-c-divider--Display	flex
	.pf-v6-c-divider	--pf-v6-c-divider--Color	(In light theme) #c7c7c7
--pf-v6-c-divider--Color --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-divider	--pf-v6-c-divider--Size	1px
--pf-v6-c-divider--Size --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-divider	--pf-v6-c-divider--before--FlexBasis	100%
	.pf-v6-c-divider	--pf-v6-hidden-visible--visible--Display	flex
--pf-v6-hidden-visible--visible--Display --pf-v6-c-divider--Display flex
	.pf-v6-c-divider	--pf-v6-hidden-visible--hidden--Display	none
	.pf-v6-c-divider	--pf-v6-hidden-visible--Display	flex
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--visible--Display --pf-v6-c-data-list__item-action--Display flex
	.pf-v6-c-divider.pf-m-hidden	--pf-v6-hidden-visible--Display	none
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--hidden--Display none
	.pf-v6-c-divider.pf-m-inset-none	--pf-v6-c-divider--before--FlexBasis	calc(100% - 0% * 2)
	.pf-v6-c-divider.pf-m-inset-xs	--pf-v6-c-divider--before--FlexBasis	calc(100% - 0.25rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--xs * 2) calc(100% - --pf-t--global--spacer--100 * 2) calc(100% - 0.25rem * 2)
	.pf-v6-c-divider.pf-m-inset-sm	--pf-v6-c-divider--before--FlexBasis	calc(100% - 0.5rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--sm * 2) calc(100% - --pf-t--global--spacer--200 * 2) calc(100% - 0.5rem * 2)
	.pf-v6-c-divider.pf-m-inset-md	--pf-v6-c-divider--before--FlexBasis	calc(100% - 1rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--md * 2) calc(100% - --pf-t--global--spacer--300 * 2) calc(100% - 1rem * 2)
	.pf-v6-c-divider.pf-m-inset-lg	--pf-v6-c-divider--before--FlexBasis	calc(100% - 1.5rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--lg * 2) calc(100% - --pf-t--global--spacer--400 * 2) calc(100% - 1.5rem * 2)
	.pf-v6-c-divider.pf-m-inset-xl	--pf-v6-c-divider--before--FlexBasis	calc(100% - 2rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--xl * 2) calc(100% - --pf-t--global--spacer--500 * 2) calc(100% - 2rem * 2)
	.pf-v6-c-divider.pf-m-inset-2xl	--pf-v6-c-divider--before--FlexBasis	calc(100% - 3rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--2xl * 2) calc(100% - --pf-t--global--spacer--600 * 2) calc(100% - 3rem * 2)
	.pf-v6-c-divider.pf-m-inset-3xl	--pf-v6-c-divider--before--FlexBasis	calc(100% - 4rem * 2)
--pf-v6-c-divider--before--FlexBasis calc(100% - --pf-t--global--spacer--3xl * 2) calc(100% - --pf-t--global--spacer--700 * 2) calc(100% - 4rem * 2)

View source on GitHub