Page headers & sections

The frame around a page’s content: how a screen introduces itself, groups what is on it, and offers actions. These are the pieces every list, record and dashboard in a Buildpad app is assembled from, shown at real size and fully interactive.

Page headers

Breadcrumbs, title and a short description on the left; at most one ink primary action on the right, with the rest in secondary buttons or an overflow menu.

Purchase orders

Track every order from draft to delivery. 128 open, 12 waiting on you.

List page headerBreadcrumbs above a Title order=2 and dimmed description; actions right-aligned — secondary variant="default", one ink primary, then an overflow Menu on a radius="xl" ActionIcon to match the pill buttons.

Atlas Packaging

Pending approval

Daniel Osei

$12,840

Due 04 Nov

Updated 09:42

Record header with status and metaStatus Badge sits on the title line; a meta row of dimmed icon + text pairs carries the facts people scan for. Approve is the single ink CTA.

Atlas Packaging

Preferred

Packaging · London, UK · Supplier since 2021

Header with tabs as sub-navigationTabs directly under the header split a record into sub-pages; the active tab is ink text with the ember underline from globals.css, counts ride in a rightSection Badge.

Overflow menu — openMenu opened withinPortal=false: a Menu.Label, routine items, then the destructive item last after a divider with color="red".

Purchase orders

PO-2039

Draft

Priya Raman

Approver · Finance

Compact header with back linkFor drawers, sub-pages and narrow views: a labelled back ActionIcon, a Title order=3 and a compact size="xs" action.

Section headers in cards

Smaller headers that name a group of content inside a card and hold its one or two local actions.

Billing contact

Receives invoices and payment reminders.

Name

Priya Raman

accounts@northwind.io

Terms

Net 30

Title, description and actionTitle order=4 + dimmed description left, a size="xs" default button right. The most common card header.

Recent orders

View all

Atlas Packaging

PO-2041 · Today, 09:42

Pending approval

Keystone Logistics

PO-2040 · Today, 08:15

Approved

Brightline Electrical

PO-2039 · Yesterday

Draft

Title with count and linkA gray count Badge beside the title and an Anchor (--ds-accent-text) for the full list.

Spend by month

Thousands of USD

12M

318

May

352

Jun

336

Jul

389

Aug

396

Sep

412

Oct

Divided header with a controlCard padding=0, header and body split by a Divider, range picked with a SegmentedControl size="xs". Bars are composed from boxes on --ds-primary-* (no @mantine/charts).

Approvals

2 of 3 approvers have signed off

Priya Raman

Approved

Amelia Hart

Approved

Daniel Osei

Waiting

Icon, title and menuA light ThemeIcon anchors the section; secondary actions live in a subtle ActionIcon menu so the header stays quiet.

Toolbars

Everything that changes what a list shows — search, filters, sort and view — in one row; selecting rows swaps in actions for the selection.

Table view

Grid view

3 selected

Order	Supplier	Owner	Status	Due	Amount
PO-2041	Atlas Packaging	Daniel Osei	Pending approval	04 Nov	$12,840
PO-2040	Keystone Logistics	Priya Raman	Approved	31 Oct	$48,200
PO-2039	Brightline Electrical	Marco Silva	Draft	12 Nov	$3,150
PO-2038	Meridian Foods	Daniel Osei	Shipped	28 Oct	$7,425
PO-2037	Cobalt IT Services	Amelia Hart	Approved	30 Oct	$21,600
PO-2036	Harbor Office Supply	Hana Kobayashi	Cancelled	—	$980
PO-2035	Atlas Packaging	Daniel Osei	Shipped	23 Oct	$15,300

List toolbar with bulk selectionSearch left; filter Button with an orange count Badge, sort Menu and an icon SegmentedControl (labels in VisuallyHidden) right. Selecting rows reveals the bulk bar on --ds-primary-50; selected rows use --mantine-primary-color-light.

Sort menu — openMenu opened withinPortal=false; the active option carries a check in rightSection.

Line items

Corrugated cartons 600×400

× 2,400

$6,480

Pallet wrap 23µm

× 120

$1,560

Tamper-evident tape

× 800

$1,040

Compact card toolbarInside a card: size="xs" search and subtle icon actions, each with an aria-label and a Tooltip (shown open on the first).

Sticky action footers

Keep save and bulk actions reachable while long content scrolls. Scroll inside each frame to see them stick.

Edit supplier

Legal name

Trading name

VAT number

Account manager

Payment terms

Website

Unsaved

Page save barScroll the frame: the bar is position: sticky; bottom: 0 on --ds-card-bg with a hairline top border and --ds-shadow-lg. A dot Badge flags unsaved changes.

PO-2041 · Atlas Packaging

$12,840

PO-2040 · Keystone Logistics

$48,200

PO-2039 · Brightline Electrical

$3,150

PO-2038 · Meridian Foods

$7,425

PO-2037 · Cobalt IT Services

$21,600

PO-2036 · Harbor Office Supply

$980

PO-2035 · Atlas Packaging

$15,300

2 selected

Floating selection barA pill bar on --ds-card-bg with --ds-shadow-xl, sticky near the bottom of the list. Tick rows to change the count; it disappears at zero.

Side panel & drawer

Show a record’s details next to the list it came from, so people can work through a queue without losing their place.

Purchase orders

Select an order to see its details.

Order	Status	Amount
Atlas Packaging PO-2041 · Daniel Osei	Pending approval	$12,840
Keystone Logistics PO-2040 · Priya Raman	Approved	$48,200
Brightline Electrical PO-2039 · Marco Silva	Draft	$3,150
Meridian Foods PO-2038 · Daniel Osei	Shipped	$7,425
Cobalt IT Services PO-2037 · Amelia Hart	Approved	$21,600
Harbor Office Supply PO-2036 · Hana Kobayashi	Cancelled	$980
Atlas Packaging PO-2035 · Daniel Osei	Shipped	$15,300

List with side panelClick a row to load it into the 360px panel (header with CloseButton, facts grid, Timeline, action footer). Open as drawer shows the same content in a Drawer position="right" for narrower screens.

Banners

Page-level messages built on Alert. The colour carries the meaning — announcement, warning, info, danger, success, neutral — so keep each one to a sentence and a single action.

New: multi-step approval workflows.

Route large orders through Finance automatically.

See what's new

AnnouncementAlert color="orange" (→ primary) with withCloseButton — dismissible, one line, one link. Use for product news, never for errors.

23 of 25 seats used

Your trial ends in 6 days. Invites stop working when you run out of seats.

Usage limitcolor="yellow" (→ warning) with a Progress of the same colour and an upgrade path. Ink primary, subtle secondary.

Maintenance · Sun 2 Nov, 02:00–04:00 UTC

Northwind Ops will be read-only for about two hours. Approvals queued during the window are processed afterwards.

Scheduled maintenancecolor="blue" (→ info) for planned, time-boxed notices. Say when, how long and what people can still do.

Supplier sync is failing

We couldn't reach the ERP since 09:12. New orders are saved but not sent.

View status page

Incidentcolor="red" (→ danger) with a recovery action — a light red button keeps the alert calm.

Import complete

128 orders added from october-orders.csv. 3 rows were skipped.

Successcolor="green" (→ success) for the result of a long-running job.

This order is archived

It can't be edited or approved.

Read-only noticecolor="gray" for neutral state about the current record, with the action that lifts it.

Onboarding checklist

Guide new workspaces through setup with visible progress and one obvious next step.

Set up Northwind Ops

3 of 5 done · about 5 minutes left

Name your workspace

Shown in the sidebar and in emails.

Invite your team

Add the people who create and approve orders.

Add your first supplier

Import a CSV or add one by hand.

Set an approval rule

Choose who approves orders over a limit.

Raise a purchase order

Try the whole flow end to end.

Checklist cardProgress over a list of steps: done steps get a filled green ThemeIcon and dimmed text, the next step gets the only button. Click a step icon to toggle it.

60%

Getting started

Next: Set an approval rule

You're all set

Every setup step is complete.

Recent activity

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

Compact widgetsFor a dashboard rail: RingProgress with the percentage as its label, the next step and one action — and the finished state, which should be dismissible.

Stats header

The numbers people check first, at the top of a dashboard or report, using the shared KPIS sample data.

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

7

needs attention

KPI cardsSimpleGrid cols=4 of Cards: dimmed label, Title order=3 value (Inter Tight), a delta Badge coloured by meaning, not direction — faster approvals are green even though the number went down.

Procurement overview

Spend, approvals and deliveries across every team.

30D

QTD

YTD

Open purchase orders

128

+12

Spend this month

$412,380

+4.1%

Avg. approval time

6.4 h

-1.2 h

Overdue deliveries

7

Header with stats stripA dashboard page header: title, period SegmentedControl and export, then one Card holding four stats split by --ds-divider rules — denser than KPI cards for secondary pages.