Stack

Stack lays out children along a single axis with a consistent gap from the spacing scale. Vertical by default — the workhorse for card bodies, form sections, and page content flow. Set orientation="horizontal" for a row.

Use it for

• Vertical content flow — card bodies, form sections, stacked list content
• Simple horizontal rows where items don't need to wrap
• Anywhere you'd otherwise write display: flex; flex-direction; gap by hand

Import

import { Stack } from '@brikdesigns/bds';

Variants

Orientation

vertical (default) or horizontal. For a horizontal row that wraps, use Cluster instead.

<Stack gap="sm">…</Stack>
<Stack orientation="horizontal" gap="md">…</Stack>

Gap

The full spacing scale — tiny through huge (default md). Use none to remove the gap without changing the layout.

<Stack gap="lg">…</Stack>

Alignment

align sets cross-axis alignment; justify distributes along the main axis.

<Stack align="center">…</Stack>
<Stack orientation="horizontal" justify="between">…</Stack>

When not to use

• For a two-dimensional grid of peers, use Grid.

Accessibility

• Renders a plain element (<div> by default, override with as) with display: flex. It adds no semantics; children keep their own roles.

API

Plus all standard HTML attributes for the rendered element.

Related

• Cluster — wrapping horizontal row
• Grid — two-axis layout
• Storybook playground