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