PatternFly

Divider

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

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

Vertical on lg

Horizontal on lg

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-v5-c-divider, div.pf-v5-c-divider
Indicates that the separator is a separator.

Usage

Class
Applied to
Outcome
.pf-v5-c-divider
<hr>, <li>, <div>
Defines the divider component.
.pf-m-vertical
.pf-v5-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-v5-c-divider
Modifies divider padding/inset to visually match padding of other adjacent components.
.pf-m-hidden{-on-[breakpoint]}
.pf-v5-c-divider
Modifies a divider to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}
.pf-v5-c-divider
Modifies a divider to be shown, at optional breakpoint.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-divider--pf-v5-hidden-visible--hidden--Display
none
.pf-v5-c-divider--pf-v5-hidden-visible--Display
flex
.pf-v5-c-divider--pf-v5-c-divider--BorderWidth--base
1px
.pf-v5-c-divider--pf-v5-c-divider--BorderColor--base
#d2d2d2
.pf-v5-c-divider--pf-v5-c-divider--Height
1px
.pf-v5-c-divider--pf-v5-c-divider--BackgroundColor
#d2d2d2
.pf-v5-c-divider--pf-v5-c-divider--after--BackgroundColor
#d2d2d2
.pf-v5-c-divider--pf-v5-c-divider--after--FlexBasis
100%
.pf-v5-c-divider--pf-v5-c-divider--after--Inset
0%
.pf-v5-c-divider--pf-v5-c-divider--m-vertical--after--FlexBasis
100%
.pf-v5-c-divider--pf-v5-c-divider--m-horizontal--Display
flex
.pf-v5-c-divider--pf-v5-c-divider--m-horizontal--FlexDirection
row
.pf-v5-c-divider--pf-v5-c-divider--m-horizontal--after--Height
1px
.pf-v5-c-divider--pf-v5-c-divider--m-horizontal--after--Width
auto
.pf-v5-c-divider--pf-v5-c-divider--m-vertical--Display
inline-flex
.pf-v5-c-divider--pf-v5-c-divider--m-vertical--FlexDirection
column
.pf-v5-c-divider--pf-v5-c-divider--m-vertical--after--Height
auto
.pf-v5-c-divider--pf-v5-c-divider--m-vertical--after--Width
1px
.pf-v5-c-divider--pf-v5-hidden-visible--visible--Display
flex
.pf-v5-c-divider--pf-v5-c-divider--Display
flex
.pf-v5-c-divider--pf-v5-c-divider--FlexDirection
row
.pf-v5-c-divider--pf-v5-c-divider--after--Width
auto
.pf-v5-c-divider--pf-v5-c-divider--after--Height
1px
.pf-m-hidden.pf-v5-c-divider--pf-v5-hidden-visible--Display
none
.pf-v5-c-divider.pf-m-vertical--pf-v5-c-divider--Display
inline-flex
.pf-v5-c-divider.pf-m-vertical--pf-v5-c-divider--FlexDirection
column
.pf-v5-c-divider.pf-m-vertical--pf-v5-c-divider--after--Width
1px
.pf-v5-c-divider.pf-m-vertical--pf-v5-c-divider--after--Height
auto
.pf-v5-c-divider.pf-m-inset-none--pf-v5-c-divider--after--Inset
0%
.pf-v5-c-divider.pf-m-inset-xs--pf-v5-c-divider--after--Inset
0.25rem
.pf-v5-c-divider.pf-m-inset-sm--pf-v5-c-divider--after--Inset
0.5rem
.pf-v5-c-divider.pf-m-inset-md--pf-v5-c-divider--after--Inset
1rem
.pf-v5-c-divider.pf-m-inset-lg--pf-v5-c-divider--after--Inset
1.5rem
.pf-v5-c-divider.pf-m-inset-xl--pf-v5-c-divider--after--Inset
2rem
.pf-v5-c-divider.pf-m-inset-2xl--pf-v5-c-divider--after--Inset
3rem
.pf-v5-c-divider.pf-m-inset-3xl--pf-v5-c-divider--after--Inset
4rem

View source on GitHub