Divider

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, inset medium in flex layout

first item

second item

Vertical, inset at various breakpoints

first item

Props

Divider

Name	Type	Required	Default	Description
className	string	No		Additional classes added to the divider
component	'hr' \| 'li' \| 'div'	No	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'; }	No		Insets at various breakpoints.
isVertical	boolean	No	false	Flag 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--Height --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-divider	--pf-c-divider--BackgroundColor	#d2d2d2
--pf-c-divider--BackgroundColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-divider	--pf-c-divider--after--Height	1px
--pf-c-divider--after--Height --pf-c-divider--Height --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-divider	--pf-c-divider--after--BackgroundColor	#d2d2d2
--pf-c-divider--after--BackgroundColor --pf-c-divider--BackgroundColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #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--m-vertical--after--Width --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 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--after--Inset --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-divider.pf-m-inset-sm	--pf-c-divider--after--Inset	0.5rem
--pf-c-divider--after--Inset --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-divider.pf-m-inset-md	--pf-c-divider--after--Inset	1rem
--pf-c-divider--after--Inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-divider.pf-m-inset-lg	--pf-c-divider--after--Inset	1.5rem
--pf-c-divider--after--Inset --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-divider.pf-m-inset-xl	--pf-c-divider--after--Inset	2rem
--pf-c-divider--after--Inset --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-divider.pf-m-inset-2xl	--pf-c-divider--after--Inset	3rem
--pf-c-divider--after--Inset --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-divider.pf-m-inset-3xl	--pf-c-divider--after--Inset	4rem
--pf-c-divider--after--Inset --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines