Components

Stacks

HStack, VStack and Spacer — flexbox rows and columns for toolbars, side-by-side panels and page scaffolds.

HStack lays its children out left to right, VStack top to bottom. alignment sets the cross axis, distribution shares the free space along the main axis, and spacing is the gap between children. A Spacer between children absorbs the leftover space: logo · Spacer · actions pins the logo left and the actions right.

HStack

Screenshot of the Horizontal stack block — Horizontal stack`HStack`

src/pages/overview.ts

import { HStack, Spacer } from "@antelopejs/interface-dms/base/stack";
import { LiveToggle } from "@antelopejs/interface-dms/base/live-toggle";
import { PeriodSelector } from "@antelopejs/interface-dms/base/period-selector";

static toolbar = HStack({ alignment: "center" })
  .child("live", LiveToggle())
  .child("spacer", Spacer())
  .child("period", PeriodSelector({ id: "sales" }));

Options of the Horizontal stack block
Option	Type	Default	Description
`alignment`Layout	`"start" \| "center" \| "end" \| "stretch"`	`"center"`	Alignment of children across the stack.
`distribution`Layout	`"start" \| "center" \| "end" \| "space-between" \| "space-around" \| "space-evenly"`	`"start"`	Distribution of children along the stack.
`spacing`Layout	`string`	`"8px"`	Space between children, as a CSS length.
`wrap`Layout	`boolean`	`false`	Wrap children onto a new line when the row runs out of space.
`grow`Layout	`number`	–	Share of the parent stack's free space the stack takes.

VStack

Screenshot of the Vertical stack block — Vertical stack`VStack`

src/pages/overview.ts

import { VStack } from "@antelopejs/interface-dms/base/stack";

static column = VStack({ alignment: "stretch", spacing: "12px" })
  .child("notice", Banner({ tone: "info", size: "sm", title: "Numbers refresh every 15 minutes." }))
  .child("body", Placeholder({ label: "Content" }));

Options of the Vertical stack block
Option	Type	Default	Description
`alignment`Layout	`"start" \| "center" \| "end" \| "stretch"`	`"center"`	Alignment of children across the stack.
`distribution`Layout	`"start" \| "center" \| "end" \| "space-between" \| "space-around" \| "space-evenly"`	`"start"`	Distribution of children along the stack.
`spacing`Layout	`string`	`"8px"`	Space between children, as a CSS length.
`grow`Layout	`number`	–	Share of the parent stack's free space the stack takes.

Spacer

A Spacer is a flexible gap that works in either stack direction, and holds an empty cell in a GridRow.

Options of the Spacer block
Option	Type	Default	Description
`minSize`Layout	`string`	–	Smallest size the spacer shrinks to.
`maxSize`Layout	`string`	–	Largest size the spacer grows to.
`grow`Layout	`number`	`1`	Share of the leftover space the spacer takes.

Recipes

A stack fills the width of what holds it, except inside an HStack: there sibling stacks share the row equally, or by their grow. A sidebar at grow: 1 beside a content column at grow: 3 takes a quarter of the row. In a row holding a Spacer, sibling stacks keep their content width so the spacer can push them aside.

Equal-height cards

alignment: "stretch" makes children fill the cross axis, which gives a row of cards one height.

Pitfalls

wrap exists on HStack only.
A Spacer respects its minSize / maxSize bounds: a maxSize that is too small leaves the remaining space unused.

Next steps

Grid

Responsive rows and columns.

Card

Frame a stack under a titled head.

Grid

A responsive grid of rows and columns that drops columns on narrow screens — the layout of every dashboard.

Card

A titled card that frames several blocks, with a count, head actions, a footer band and two slots.