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-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 column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-divider | --pf-v5-hidden-visible--hidden--Display | none | ||
| .pf-v5-c-divider | --pf-v5-hidden-visible--Display | flex | ||
--pf-v5-hidden-visible--Display --pf-v5-hidden-visible--visible--Display --pf-v5-c-divider--Display --pf-v5-c-divider--m-horizontal--Display flex | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--BorderWidth--base | 1px | ||
--pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--BorderColor--base | #d2d2d2 | ||
--pf-v5-c-divider--BorderColor--base --pf-v5-c-divider--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--Height | 1px | ||
--pf-v5-c-divider--Height --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-divider--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--after--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-divider--after--BackgroundColor --pf-v5-c-divider--BorderColor--base --pf-v5-c-divider--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #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--m-horizontal--after--Height --pf-v5-c-divider--Height --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 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--m-vertical--after--Width --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-divider | --pf-v5-hidden-visible--visible--Display | flex | ||
--pf-v5-hidden-visible--visible--Display --pf-v5-c-divider--Display --pf-v5-c-divider--m-horizontal--Display flex | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--Display | flex | ||
--pf-v5-c-divider--Display --pf-v5-c-divider--m-horizontal--Display flex | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--FlexDirection | row | ||
--pf-v5-c-divider--FlexDirection --pf-v5-c-divider--m-horizontal--FlexDirection row | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--after--Width | auto | ||
--pf-v5-c-divider--after--Width --pf-v5-c-divider--m-horizontal--after--Width auto | ||||
| .pf-v5-c-divider | --pf-v5-c-divider--after--Height | 1px | ||
--pf-v5-c-divider--after--Height --pf-v5-c-divider--m-horizontal--after--Height --pf-v5-c-divider--Height --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-m-hidden.pf-v5-c-divider | --pf-v5-hidden-visible--Display | none | ||
--pf-v5-hidden-visible--Display --pf-v5-hidden-visible--hidden--Display none | ||||
| .pf-v5-c-divider.pf-m-vertical | --pf-v5-c-divider--Display | inline-flex | ||
--pf-v5-c-divider--Display --pf-v5-c-divider--m-vertical--Display inline-flex | ||||
| .pf-v5-c-divider.pf-m-vertical | --pf-v5-c-divider--FlexDirection | column | ||
--pf-v5-c-divider--FlexDirection --pf-v5-c-divider--m-vertical--FlexDirection column | ||||
| .pf-v5-c-divider.pf-m-vertical | --pf-v5-c-divider--after--Width | 1px | ||
--pf-v5-c-divider--after--Width --pf-v5-c-divider--m-vertical--after--Width --pf-v5-c-divider--BorderWidth--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-divider.pf-m-vertical | --pf-v5-c-divider--after--Height | auto | ||
--pf-v5-c-divider--after--Height --pf-v5-c-divider--m-vertical--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--after--Inset --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-divider.pf-m-inset-sm | --pf-v5-c-divider--after--Inset | 0.5rem | ||
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-divider.pf-m-inset-md | --pf-v5-c-divider--after--Inset | 1rem | ||
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-divider.pf-m-inset-lg | --pf-v5-c-divider--after--Inset | 1.5rem | ||
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-divider.pf-m-inset-xl | --pf-v5-c-divider--after--Inset | 2rem | ||
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-divider.pf-m-inset-2xl | --pf-v5-c-divider--after--Inset | 3rem | ||
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-divider.pf-m-inset-3xl | --pf-v5-c-divider--after--Inset | 4rem | ||
--pf-v5-c-divider--after--Inset --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
View source on GitHub
