Skip to Content
Patternfly Logo

Divider

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

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

AttributeApplied toOutcome
role="separator"li.pf-c-divider, div.pf-c-dividerIndicates that the separator is a separator.

Usage

ClassApplied toOutcome
.pf-c-divider<hr>, <li>, <div>Defines the divider component.
.pf-m-vertical.pf-c-dividerModifies 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-dividerModifies divider padding/inset to visually match padding of other adjacent components.

CSS Variables

.pf-c-divider--pf-c-divider--Heightc_divider_Height
1px
.pf-c-divider--pf-c-divider--BackgroundColorc_divider_BackgroundColor
#d2d2d2
.pf-c-divider--pf-c-divider--after--Heightc_divider_after_Height
1px
.pf-c-divider--pf-c-divider--after--BackgroundColorc_divider_after_BackgroundColor
#d2d2d2
.pf-c-divider--pf-c-divider--after--FlexBasisc_divider_after_FlexBasis
100%
.pf-c-divider--pf-c-divider--after--Insetc_divider_after_Inset
0%
.pf-c-divider--pf-c-divider--m-vertical--after--FlexBasisc_divider_m_vertical_after_FlexBasis
100%
.pf-c-divider--pf-c-divider--m-vertical--after--Widthc_divider_m_vertical_after_Width
1px
.pf-c-divider.pf-m-inset-none--pf-c-divider--after--Insetc_divider_after_Inset
0%
.pf-c-divider.pf-m-inset-xs--pf-c-divider--after--Insetc_divider_after_Inset
0.25rem
.pf-c-divider.pf-m-inset-sm--pf-c-divider--after--Insetc_divider_after_Inset
0.5rem
.pf-c-divider.pf-m-inset-md--pf-c-divider--after--Insetc_divider_after_Inset
1rem
.pf-c-divider.pf-m-inset-lg--pf-c-divider--after--Insetc_divider_after_Inset
1.5rem
.pf-c-divider.pf-m-inset-xl--pf-c-divider--after--Insetc_divider_after_Inset
2rem
.pf-c-divider.pf-m-inset-2xl--pf-c-divider--after--Insetc_divider_after_Inset
3rem
.pf-c-divider.pf-m-inset-3xl--pf-c-divider--after--Insetc_divider_after_Inset
4rem