Holo Stack

The <holo-stack> component is a semantics-free layout primitive for arranging children with consistent gap spacing, reusing the same gap-token scale as holo-grid.

When to use

Use it for:

• Laying out children in a single row or column with a consistent gap (direction, gap).
• Aligning and distributing items (align, justify) and wrapping them (wrap).

Don’t use it for:

• Multi-column layouts of equal cells. Use Grid.
• Constraining width or centring page content. Use Container.
• A visible surface. Use Card.

Live Previews

Column stack (default)

OneTwoThree

<holo-stack direction="column" gap="md">
  <holo-badge>One</holo-badge>
  <holo-badge>Two</holo-badge>
  <holo-badge>Three</holo-badge>
</holo-stack>

Row stack with wrap

AlphaBetaGamma

<holo-stack direction="row" gap="sm" wrap justify="start" align="center">
  <holo-tag>Alpha</holo-tag>
  <holo-tag>Beta</holo-tag>
  <holo-tag>Gamma</holo-tag>
</holo-stack>

Accessibility

The stack is a presentational flexbox layout. It renders a slot with no role, no landmark and no focus behaviour. It does not reorder the DOM, so reading and tab order are the order of the children.

You provide:

• A DOM order that matches the visual order. Avoid reversing a row visually, since keyboard and screen reader order would no longer match.
• Real structure for what you stack: use lists, headings and landmarks inside it.
• Wrapping (wrap) for rows that might overflow at narrow widths or 400% zoom.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-stack';

Properties

Property	Attribute	Type	Default	Description
align	align	"center" | "end" | "start" | "stretch"	—	The cross-axis alignment (align-items).
direction	direction	"column" | "row"	'column'	The flex direction of the stack.
gap	gap	"lg" | "md" | "sm"	'md'	The gap size between stacked items: "sm" (--s-space-xs), "md" (--s-space-md), or "lg" (--s-space-xl).
justify	justify	"around" | "between" | "center" | "end" | "start"	—	The main-axis alignment (justify-content).
wrap	wrap	boolean	false	If true, items wrap onto multiple lines.

Slots

Slot	Description
(default)	The elements to stack.