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

In flex layout

Horizontal

item 1
item 1


Vertical

item 1
item 1

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

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-divider--pf-v6-c-divider--Display
flex
.pf-v6-c-divider--pf-v6-c-divider--Color
(In light theme) #c7c7c7
.pf-v6-c-divider--pf-v6-c-divider--Size
1px
.pf-v6-c-divider--pf-v6-c-divider--before--FlexBasis
100%
.pf-v6-c-divider--pf-v6-hidden-visible--visible--Display
flex
.pf-v6-c-divider--pf-v6-hidden-visible--hidden--Display
none
.pf-v6-c-divider--pf-v6-hidden-visible--Display
flex
.pf-v6-c-divider.pf-m-hidden--pf-v6-hidden-visible--Display
none
.pf-v6-c-divider.pf-m-inset-none--pf-v6-c-divider--before--FlexBasis
calc(100% - 0% * 2)
.pf-v6-c-divider.pf-m-inset-xs--pf-v6-c-divider--before--FlexBasis
calc(100% - 0.25rem * 2)
.pf-v6-c-divider.pf-m-inset-sm--pf-v6-c-divider--before--FlexBasis
calc(100% - 0.5rem * 2)
.pf-v6-c-divider.pf-m-inset-md--pf-v6-c-divider--before--FlexBasis
calc(100% - 1rem * 2)
.pf-v6-c-divider.pf-m-inset-lg--pf-v6-c-divider--before--FlexBasis
calc(100% - 1.5rem * 2)
.pf-v6-c-divider.pf-m-inset-xl--pf-v6-c-divider--before--FlexBasis
calc(100% - 2rem * 2)
.pf-v6-c-divider.pf-m-inset-2xl--pf-v6-c-divider--before--FlexBasis
calc(100% - 3rem * 2)
.pf-v6-c-divider.pf-m-inset-3xl--pf-v6-c-divider--before--FlexBasis
calc(100% - 4rem * 2)