Divider

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

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) #e0e0e0
--pf-v6-c-divider--Color --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.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)