Patternfly Logo

Divider

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--Height
1px
.pf-c-divider--pf-c-divider--BackgroundColor
#d2d2d2
.pf-c-divider--pf-c-divider--after--Height
1px
.pf-c-divider--pf-c-divider--after--BackgroundColor
#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.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.pf-m-inset-sm--pf-c-divider--after--Inset
0.5rem
.pf-c-divider.pf-m-inset-md--pf-c-divider--after--Inset
1rem
.pf-c-divider.pf-m-inset-lg--pf-c-divider--after--Inset
1.5rem
.pf-c-divider.pf-m-inset-xl--pf-c-divider--after--Inset
2rem
.pf-c-divider.pf-m-inset-2xl--pf-c-divider--after--Inset
3rem
.pf-c-divider.pf-m-inset-3xl--pf-c-divider--after--Inset
4rem

View source on Github