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-c-divider, div.pf-c-divider | Indicates that the separator is a separator. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-divider | <hr>, <li>, <div> | Defines the divider component. |
.pf-m-vertical | .pf-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-c-divider | Modifies divider padding/inset to visually match padding of other adjacent components. |
.pf-m-hidden{-on-[breakpoint]} | .pf-c-divider | Modifies a divider to be hidden, at optional breakpoint. |
.pf-m-visible{-on-[breakpoint]} | .pf-c-divider | Modifies a divider to be shown, at optional breakpoint. |
CSS variables
| .pf-c-divider | --pf-hidden-visible--visible--Visibility | visible | ||
| .pf-c-divider | --pf-hidden-visible--hidden--Display | none | ||
| .pf-c-divider | --pf-hidden-visible--hidden--Visibility | hidden | ||
| .pf-c-divider | --pf-hidden-visible--Display | flex | ||
| .pf-c-divider | --pf-hidden-visible--Visibility | visible | ||
| .pf-c-divider | --pf-c-divider--BorderWidth--base | 1px | ||
| .pf-c-divider | --pf-c-divider--BorderColor--base | #d2d2d2 | ||
| .pf-c-divider | --pf-c-divider--Height | 1px | ||
| .pf-c-divider | --pf-c-divider--BackgroundColor | #d2d2d2 | ||
| .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-horizontal--Display | flex | ||
| .pf-c-divider | --pf-c-divider--m-horizontal--FlexDirection | row | ||
| .pf-c-divider | --pf-c-divider--m-horizontal--after--Height | 1px | ||
| .pf-c-divider | --pf-c-divider--m-horizontal--after--Width | auto | ||
| .pf-c-divider | --pf-c-divider--m-vertical--Display | inline-flex | ||
| .pf-c-divider | --pf-c-divider--m-vertical--FlexDirection | column | ||
| .pf-c-divider | --pf-c-divider--m-vertical--after--Height | auto | ||
| .pf-c-divider | --pf-c-divider--m-vertical--after--Width | 1px | ||
| .pf-c-divider | --pf-hidden-visible--visible--Display | flex | ||
| .pf-c-divider | --pf-c-divider--Display | flex | ||
| .pf-c-divider | --pf-c-divider--FlexDirection | row | ||
| .pf-c-divider | --pf-c-divider--after--Width | auto | ||
| .pf-c-divider | --pf-c-divider--after--Height | 1px | ||
| .pf-m-hidden.pf-c-divider | --pf-hidden-visible--Display | none | ||
| .pf-m-hidden.pf-c-divider | --pf-hidden-visible--Visibility | hidden | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--Display | inline-flex | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--FlexDirection | column | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--after--Width | 1px | ||
| .pf-c-divider.pf-m-vertical | --pf-c-divider--after--Height | auto | ||
| .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