Skip to main content
xoji

Stack
Info:Layout html svelte astro Success: coverage 9/9

A vertical flex column with a token-driven gap, the primitive for stacking content.

Live demo

live · @xoji/astro

Stack

Gap on the space scale

gap is a step (0–8) on the shared --space scale, so vertical rhythm stays consistent with everything else.

gap=1

gap=3

gap=5

Cross-axis alignment

align maps to align-items — how children sit on the horizontal axis of the column.

align=start

align=center

align=end

align=stretch

Main-axis distribution

justify distributes children along the column when it has a fixed height — here, between.

Stack lays its children out in a flex column with a consistent gap drawn from the --space scale. The gap prop (0–8) selects the spacing step, while align and justify control the cross- and main-axis distribution.

It carries no visual chrome of its own (no background, border, or color), so it composes cleanly inside cards, panels, and page shells. An inline flag switches it to an inline-flex column for embedding in running text or alongside other inline boxes.

When to use

How this component composes with the rest of the set.

Pair with Cluster (horizontal) and Grid (two-dimensional); the three layout primitives cover most page scaffolding.
Nest Stacks for sections-within-sections; each level picks its own gap.
Drop any component inside; Stack adds spacing without imposing color or chrome.

Props

4 props, straight from the manifest.

PropTypeDefaultBindingsDescription
gap number
0 1 2 3 4 5 6 7 8
4
html svelte astro
Spacing between children, as a step on the `--space` scale (0–8).
align StackAlign
start center end stretch baseline
—
html svelte astro
Cross-axis alignment (`align-items`). Omitted leaves the browser default (stretch).
justify StackJustify
start center end between around evenly
—
html svelte astro
Main-axis distribution (`justify-content`).
inline boolean false
html svelte astro
Renders as an inline-flex column instead of a block-level one.

Anatomy

The named parts that make up the component, with their selectors.

root

 .xoji-stack

The flex-column container carrying the gap, align, and justify classes.
--space-4

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 9/9 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--space-0 --space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-7 --space-8

Slots
default
html svelte astro

The children to stack vertically.

Accessibility
A generic presentational container with no implicit semantics; it adds no roles and announces nothing.
Wrap in a landmark element (<section>, <nav>) or pass a semantic tag where document structure matters.

Code

Vertical stacking

Children flow top to bottom with a uniform, token-driven gap.

 
<xoji-stack gap="4">
	<xoji-card>First</xoji-card>
	<xoji-card>Second</xoji-card>
	<xoji-card>Third</xoji-card>
</xoji-stack>

<xoji-stack gap="2" align="center">
	<h2>Centered column</h2>
	<p>Children stack vertically, centered on the cross axis.</p>
</xoji-stack>
 
<script lang="ts">
	import { Stack, Card } from "@xoji/svelte";
</script>

<Stack gap={4}>
	<Card>First</Card>
	<Card>Second</Card>
	<Card>Third</Card>
</Stack>

<Stack gap={2} align="center">
	<h2>Centered column</h2>
	<p>Children stack vertically, centered on the cross axis.</p>
</Stack>
 
---
import { Stack, Card } from "@xoji/astro";
---

<Stack gap={4}>
	<Card>First</Card>
	<Card>Second</Card>
	<Card>Third</Card>
</Stack>

<Stack gap={2} align="center">
	<h2>Centered column</h2>
	<p>Children stack vertically, centered on the cross axis.</p>
</Stack>