Live demo — this example is server-driven; run the showcase locally for the interactive version.

Level

Distributes children horizontally with justify-content: space-between. Common for section headers — title on the left, action button on the right.

Examples

Basic

Title and primary action pinned to opposite edges — the canonical section-header pattern.

Users

With gutter

<code class="ws-code">gutter=true</code> adds 1rem gap — useful with 3+ items that don't pin to edges.

Three items

Level with a middle item — start, center, end distribution.

content

content
content
content

content

Documentation

Level props

Parameters accepted by {#include layouts/primitives/level ... /}.

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`gutter`	boolean	Adds `pf-m-gutter` for 1rem gap between items.
slot `items`	Qute block	Level children — wrap each in `pf-v6-l-level__item`.

Usage

Level vs. Split vs. Flex. Reach for Level when you want children to span the full container width with equal gaps. Split is similar but defaults to natural content widths plus one fill-the-rest item. Flex is the most general — use it when neither matches.

Edit level.html on GitHub