Layout

The primitives that place everything else. Layout components have no look of their own, so the demos draw them as dashed ember guide boxes (--ds-primary-50 fill, --ds-primary-200 outline). Spacing props take the theme scale — xs 8px, sm 12px, md 16px, lg 24px, xl 32px — from the --ds-spacing-* tokens.

Container

Centres page content at a readable maximum width.

540px

720px

960px

1140px

1320px

fluid

100%

ContainerContainer size="xs" … "xl" centres content at a max width with px="md" gutters. Real Containers inside a 1440px-wide viewport, scaled to fit. Forms read best at sm; list pages use fluid.

Group

Lays children out in a row: toolbars, page headers, button pairs, inline metadata.

Gapgap="xs" … "xl" — 8 / 12 / 16 / 24 / 32px (--ds-spacing-*). The theme default is sm.

flex-start

center

space-between

flex-end

Justifyjustify="flex-start | center | space-between | flex-end" — space-between is the page-header pattern (title left, actions right).

flex-start

center

flex-end

Alignalign="flex-start | center | flex-end" on mixed-height children.

wrap

grow

Wrap & growwrap="wrap" (default) flows onto new lines; wrap="nowrap" keeps one line; grow stretches children equally.

Stack & Flex

Vertical rhythm with Stack; full flexbox control, with responsive props, with Flex.

gap="xs"

gap="lg"

align="center"

StackStack gap — vertical rhythm. Theme default md (16px); align sets the cross axis.

Header

Footer

Stack justifyjustify="space-between" in a fixed height — pins a footer to the bottom of a card or panel.

direction={{ base: 'column', sm: 'row' }} gap="md"

Filters

Results

Preview

direction="row-reverse" justify="flex-end" align="center"

FlexFlex direction, wrap, gap, justify, align with responsive values: direction={{ base: 'column', sm: 'row' }} stacks on phones and lines up on tablets and up.

Grid

A 12-column grid for asymmetric layouts — spans, offsets and responsive breakpoints.

span 8

span 4

auto

content

SpansA 12-column Grid; Grid.Col span takes 1–12, "auto" or "content". gutter defaults to md.

span 4

span 4, offset 4

span 6, offset 3

Offsetsoffset={n} leaves n empty columns before a column.

Gutter & growgutter="xl"; grow lets the last row fill the width.

Responsive (container breakpoints)span={{ base: 12, xs: 6, sm: 4 }} with type="container" so breakpoints follow the box, not the window. Drag the box's bottom-right corner to resize.

SimpleGrid

Equal-width columns for card and tile grids.

Columns & spacingSimpleGrid cols={3} spacing="md" verticalSpacing="xs" — equal columns without spans. The card-grid workhorse.

Responsivetype="container" with cols={{ base: 1, '320px': 2, '520px': 4 }} — container widths as keys. Drag the corner to see 4 → 2 → 1 columns.

Divider, Space, Center & AspectRatio

Small helpers for separation, one-off spacing, centring and media shapes.

Or continue with

Line items

3 new

DividerHairline --ds-border-color. label with labelPosition, variant="dashed | dotted".

PO-2041

Atlas Packaging

$12,840

Vertical dividerorientation="vertical" inside a Group — separates toolbar groups and inline metadata.

Above

h="xl" · 32px

Below

SpaceSpace h="xl" adds one-off vertical room (prefer Stack gap); w for horizontal.

Centred

Inline · Due 04 Nov

CenterCenter centres on both axes; inline for an icon beside text.

16 / 9

1 / 1

4 / 3

AspectRatioAspectRatio ratio={16 / 9}, 1 and 4 / 3 — media and thumbnails keep their shape at any width. (Placeholders, no images.)

ScrollArea

Scroll regions with the system’s thin overlay scrollbars.

Priya Raman approved PO-2040 · Keystone Logistics

12 min ago

Daniel Osei submitted PO-2041 · Atlas Packaging

1 hour ago

Amelia Hart invited Marco Silva to Procurement

3 hours ago

Hana Kobayashi commented on PO-2038 · Meridian Foods

Yesterday

Priya Raman approved PO-2040 · Keystone Logistics

12 min ago

Daniel Osei submitted PO-2041 · Atlas Packaging

1 hour ago

Amelia Hart invited Marco Silva to Procurement

3 hours ago

Hana Kobayashi commented on PO-2038 · Meridian Foods

Yesterday

VerticalScrollArea h={200} — thin overlay scrollbars that appear on hover (type="hover", the default).

Amelia Hart

Platform

Daniel Osei

Fulfilment

Priya Raman

Finance

Marco Silva

Procurement

Hana Kobayashi

Support

Tom Becker

Fulfilment

AutosizeScrollArea.Autosize mah={200} grows with content and only scrolls past the max — dropdowns and popovers. type="always" shows the bar.

PO-2041

Atlas Packaging

$12,840

Pending approval

PO-2040

Keystone Logistics

$48,200

Approved

PO-2039

Brightline Electrical

$3,150

Draft

PO-2038

Meridian Foods

$7,425

Shipped

PO-2037

Cobalt IT Services

$21,600

Approved

PO-2036

Harbor Office Supply

$980

Cancelled

PO-2035

Atlas Packaging

$15,300

Shipped

HorizontalScrollArea type="auto" with scrollbars="x" — a row of cards wider than its column; also how wide tables scroll inside a card.

Box & Paper surfaces

How surfaces sit on the page background: Paper, Card and the shadow scale.

Paper shadowsOn the page background (--ds-body-bg): Paper shadow="xs" … "xl" (--ds-shadow-*, soft and long) with the theme's 10px radius.

Paper withBorder

Filters bar, table wrapper, inset panels

Card

Record summaries, KPIs, form sections

Paper vs CardPaper withBorder — a plain hairline surface (10px). Card — the content container: --ds-card-bg, card border, --ds-card-shadow, 16px radius.

Nested Box p="sm" on --ds-card-bg

BoxBox is the polymorphic base — style props (p, m, w, bg…) and component="section" without extra markup.

Common page grids

The three layouts most Buildpad screens start from.

Order details

Supplier

This week

Open purchase orders

128

+12

vs. last week

Spend this month

$412,380

+4.1%

of $520k budget

Avg. approval time

6.4 h

-1.2 h

faster than target

Overdue deliveries

needs attention

Dashboard KPI rowSimpleGrid of Cards, the top row of every dashboard: four across from 760px of content width (see the Dashboard template), 2 × 2 in this narrower column (type="container"). The header is Group justify="space-between".