← →

Stack

Stack lays out its slotted children in a single vertical column with even spacing controlled by a space-scale gap. You can align and justify the children, and optionally draw thin divider lines between them. It is the go-to primitive for forms, lists, and any top-to-bottom flow.

Preview

<script type="module" src="/pura/lib/stack.js"></script>

<!-- A simple sign-in form laid out vertically -->
<pura-stack gap="3">
  <label>Email
    <input type="email" placeholder="you@example.com" />
  </label>
  <label>Password
    <input type="password" />
  </label>
  <button>Sign in</button>
</pura-stack>

Attributes

Attribute	Type	Default	Description
`gap`	string	4	Space scale 0-6 that sets the gap between children; maps to --pura-space-N (0 means no gap).
`align`	string	stretch	Cross-axis alignment of children: start, center, end, or stretch.
`justify`	string	start	Main-axis distribution of children: start, center, end, between, or around.
`divide`	boolean	false	When present, draws a 1px border between children, using the gap value as padding around each rule.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/stack.js"></script>

JavaScript

import "./pura/lib/stack.js";

Slots

default — the stacked children