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

Stack

Vertical layout where items default to their natural content height. The vertical twin of Split — set pf-m-fill on one item to make it absorb remaining vertical space.

Examples

Basic

Three items stacked vertically — natural heights, no gap.

Header

Body

Footer

With fill

Apply <code class="ws-code">pf-m-fill</code> to the body item — it expands to consume remaining height. Requires the parent to have a fixed height.

Header (fixed)

Body — fills remaining height

Footer (fixed)

With gutter

<code class="ws-code">gutter=true</code> adds 1rem row-gap.

One

Two

Three

Documentation

Stack props

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

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`gutter`	boolean	Adds `pf-m-gutter` — 1rem row-gap.
slot `items`	Qute block	Stack children — wrap each in `pf-v6-l-stack__item`; add `pf-m-fill` to the one that should grow.

Usage

Fill needs a height ceiling. pf-m-fill only does something useful if the Stack container has a defined height (explicit, percentage of a sized ancestor, or stretched by another flex/grid). Without one the fill item just collapses to natural height.

Common pairing. Stack-with-fill is the standard "fixed header / fluid body / fixed footer" page layout. Pair with a 100vh root container.

Edit stack.html on GitHub