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. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-divider) | --pf-v6-c-divider--Display | flex | ||
| :where(:root, .pf-v6-c-divider) | --pf-v6-c-divider--Color | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-divider) | --pf-v6-c-divider--Size | 1px | ||
| ||||
| :where(:root, .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) | ||
| ||||
