Examples
Using hr
The default — render a semantic <hr> with PF v6 styling. Use anywhere
<hr> is valid HTML.
Section above the divider.
Section below the divider. With no params, the include renders a semantic <hr>.
Using li
Pass component="li" to render as a list separator. Use inside
<ul> / <ol> /
<menu> where an <hr> would be invalid HTML.
List with dividers between items:
- Account settings
- Notifications
- Billing
- Sign out
Using div
Pass component="div" for hosts where <hr> is awkward
(button groups, custom flex layouts). Same visual treatment, valid in any block context.
When the host element disallows <hr> (e.g. inside a button group or a flex
layout), use component="div".
Inset medium
Pass inset="md" to pull the divider line in from the edges by the medium spacer token.
Available tokens: none, xs, sm,
md, lg, xl,
2xl, 3xl.
Section above the inset divider.
The inset("md") call applies pf-m-inset-md, which pulls
the line in by the medium spacer token on both sides.
Inset at various breakpoints
Stack the per-breakpoint params (insetOnSm, insetOnMd,
insetOnLg, insetOnXl,
insetOn2xl) to make the inset scale with the viewport — denser on small screens,
breathier on large ones.
This divider's inset scales with the viewport. Resize the window: none on small
screens, sm at md+, md at lg+,
lg at xl+, xl at 2xl+.
PF v6 emits one class per breakpoint: pf-m-inset-sm-on-md,
pf-m-inset-md-on-lg, etc.
Vertical in flex layout
Set vertical=true inside a flex container. The divider switches to a vertical line and
stretches to the row height. Implies component="div" when component is omitted.
Vertical dividers live inside a flex container so they can stretch to the row height.
Vertical, inset small
Combine vertical=true with inset="sm" to shorten the line so
it doesn't span the full container height — useful inside toolbars.
Combine vertical() with inset("sm") to shorten the
divider line.
Vertical, inset at breakpoints
Vertical divider whose inset grows with the viewport. Compose
vertical=true with the per-breakpoint inset params.
Vertical divider whose inset grows with the viewport — useful for keeping dense toolbars compact on small screens and breathy on large screens.
Switch orientation at breakpoints
Use verticalOnMd / verticalOnLg etc. to flip from horizontal
to vertical at a breakpoint. Pair with horizontalOnXX to flip back. Requires a flex
parent.
Stack vertically on small screens, switch to horizontal layout at md and above. Resize the window to watch the divider flip orientation.
Card middle
Card bottom
The verticalOn("md") call emits pf-m-vertical-on-md;
pair with horizontalOn("xl") to flip again at the xl breakpoint.
Documentation
Divider props
Parameters accepted by
{#include components/data-display/divider ... /}. Model mode: pass
divider=<Divider> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Default | Description |
|---|---|---|---|
component
|
"hr" | "li" | "div"
|
"hr"
|
Host element to render. "hr" emits a semantic
<hr> (no role attribute); the other two emit the named element with
role. Setting vertical=true implies
"div" when component is omitted (since
<hr> can't be vertical).
|
vertical
|
boolean |
false
|
Applies pf-m-vertical. The divider stretches to the row height of its flex
parent. Requires the parent to be a flex container.
|
inset
|
"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
|
— |
Base inset. Applies pf-m-inset-{inset}, pulling the divider line in from
the parent's edges by the named spacer token.
|
insetOnSm / insetOnMd /
insetOnLg / insetOnXl /
insetOn2xl
|
Same union as inset
|
— |
Per-breakpoint inset overrides. Each emits pf-m-inset-{size}-on-{bp}.
Stack them to grow / shrink the inset as the viewport changes.
|
verticalOnMd / verticalOnLg /
verticalOnXl / verticalOn2xl
|
boolean |
false
|
Switch to vertical orientation at the named breakpoint and above. Requires a flex parent. Useful for cards that stack on small screens and lay out horizontally on large screens. |
horizontalOnMd / horizontalOnLg /
horizontalOnXl / horizontalOn2xl
|
boolean |
false
|
Switch back to horizontal orientation at the named breakpoint. Pair with
vertical (or a lower verticalOnXX) to
alternate orientations across breakpoints.
|
role
|
"separator" | "presentation"
|
"separator"
|
ARIA role on "li" / "div" modes. Use
"presentation" when the divider is purely decorative and shouldn't appear in
the accessibility tree. Ignored for "hr" mode (the tag itself conveys the
semantic).
|
Divergence from PF React. PF accepts inset and
orientation as object-with-breakpoint-keys (e.g.
inset={ md: 'sm', lg: 'md' }). Qute includes can't easily destructure objects, so
we expose one named param per breakpoint instead (insetOnMd,
insetOnLg, …). className is React-specific; skipped.
Usage
Pick the right host element. Default to "hr". Switch to
"li" inside lists / menus (HTML forbids <hr> there).
Switch to "div" inside flex layouts where you need vertical orientation or specific
role overrides.
Inset vs. parent padding. Inset modifiers shrink the visible divider line — they don't change the divider element's bounding box. Use inset when you want the divider to be visually contained within a content block (e.g. a card whose body has its own padding) and still maintain horizontal alignment with siblings.
Vertical dividers need a flex parent. PF v6's pf-m-vertical (and the
responsive pf-m-vertical-on-bp) variants use
align-self: stretch on the divider. Without a flex container, the divider collapses to
zero height.
Accessibility. <hr> mode is implicit (the tag itself is
announced as a "horizontal rule" by screen readers). For "li" /
"div" modes, we emit role="separator" by default; pass
role="presentation" when the divider is purely decorative.