Divider

Use the Divider as a horizontal separator to create space or group items on a page or within a list.

Examples Documentation CSS Variables

Examples

<hr>

<li>

List item one
List item two

<div>

Inset medium

Md inset, no inset on md, 3xl inset on lg, lg inset on xl

Vertical

Vertical, inset medium

Vertical, md inset, no inset on md, lg inset on lg, sm inset on xl

Documentation

Overview

The divider renders as an <hr> by default. It is possible to make the divider render as an li or a div to match the HTML5 specification and context of the divider.

Attribute	Applied to	Outcome
`role="separator"`	`li.pf-c-divider`, `div.pf-c-divider`	Indicates that the separator is a separator.

Usage

Class	Applied to	Outcome
`.pf-c-divider`	`<hr>`, `<li>`, `<div>`	Defines the divider component.
`.pf-m-vertical`	`.pf-c-divider`	Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent.
`.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}`	`.pf-c-divider`	Modifies divider padding/inset to visually match padding of other adjacent components.

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