Pages & cards

In one line. Purpose-built screens without code: compose pages from cards in the experience designer, bundle them into packs, and let structured data render itself. You’ll be able to. Pick the right card for a job, compose and publish a page, bundle pages into a pack, and know what still has to happen before users see it. Where this lives. Studio ▸ Experience ▸ Pages (designer), Studio ▸ Experience ▸ Packs, and Studio ▸ Experience ▸ Cards (the card library); published pages open at addresses beginning /x.

Why pages exist

The workspace, chat and dashboards cover most operations out of the box. Pages are for the screens that are yours: a lending review workbench, a vendor scorecard, a landing page for one team’s slice of the work. Instead of waiting for custom UI development, you compose them.

Pages, Packs and Cards are on by default. An administrator can switch page design off for a workspace, in which case all three disappear together; Packs has its own switch on top of that and needs Pages to be on.

Cards — the unit of composition

A page is a layout of cards. Each card binds to platform data and renders it appropriately:

Document cards — the document workbench family: cards that surface a document’s fields, summary, and actions on the document page itself, so a reviewer’s working view carries exactly the panels their process needs. The summary-pane card carries the full review loop — inline edit, comments, formula fields — and takes a skin, so the same pane can be restyled per solution.
Structured cards — point one at a Structured collection and it reads the schema and infers the right presentation: a few records with images become tiles, records with a dominant text field become rows, wide records become a table. You choose the collection; the card works out the shape.
Chart and metric cards — counts and breakdowns over collections, the same data dashboards draw from.

The rule across all of them: a card reads your live data, never a copy of it. A card shows the same records, fields and lifecycle stages the rest of the platform sees, as they are right now.

The card library

Studio ▸ Experience ▸ Cards is the browsable catalog of every card — searchable, each with when-to-use guidance, a placement wireframe, where its data comes from, and a Use this card button that jumps straight into the Pages designer. It lists exactly the cards the designer offers, so what you read here is what you can place; start here when you’re not sure which card fits.

The designer

Studio ▸ Experience ▸ Pages is a no-code editor, and the flow is short:

Add a page — name it, and start from a template or an empty layout.
Drag cards in from the card library. Each one renders immediately with sample data, so you see the shape of the page as you build it.
Select a card to configure it — which collection or view it reads, and its own options. Cards that take a skin get a skin gallery: click a skin for a live preview.
Preview with sample data, or switch the preview to your live data.
Publish. A page stays a draft until you publish it; publishing again updates the live page, and earlier published versions stay restorable.

Published pages open for consumers at addresses beginning /x, themed to your project’s branding (Studio ▸ Experience ▸ Appearance). On pages with side-by-side panes, the gap between panes is a draggable resizer: each person’s widths persist across visits, and a double-click resets to the authored layout.

Phones and tablets

What you lay out in the designer is how the page looks on a computer. A page can also say how it looks on a phone (a window up to 767 pixels wide) or a tablet (768 to 1023 pixels):

See it first. The designer’s preview bar switches between Desktop · Tablet · Phone. Tablet and Phone show the page in a window exactly that wide, so what you see is what a phone or tablet shows. A width nobody has designed for says so, and shows how the page looks there today.
Design for a width. In the page’s settings, set Phone or Tablet to Designed. Then open the preview at that width: the page’s cards are listed beside it, and you can hide a card, move it up or down, or switch a card to its Compact form where it offers one. A card that cannot work that narrow is marked Not on this screen. Or ask Piper to make the page work on a phone or a tablet — it can hide a card there, move it, or ask for a card’s compact form. Your computer layout never changes.
What the platform does for a width you design for. On a phone the columns become one — the top row first, then the rest in reading order — and each card takes the full width. On a tablet the side columns stay beside the main one, and within each column cards sit two to a row: each takes half the column, or all of it if it was wider than half on a computer. An area set to stacked keeps one card per row, except the main area of a Board page. On both, the page scrolls instead of squeezing cards to fit the screen.
A width nobody has designed for keeps working exactly as it does today.

Packs — pages that know each other

A single page is a screen; a pack is a journey. Studio ▸ Experience ▸ Packs bundles a curated set of pages and connects them — a click on a record in one page opens the detail page for it — then lets you walk the whole journey in a Try it preview before you hand it to users.

Use a pack when a team’s workflow spans screens: a queue page, a detail workbench, a summary dashboard, connected in the order the work actually flows.

When to use what

You need	Reach for
Browse and act on documents	The workspace — it’s already built
Numbers over everything	Dashboards
A screen shaped like one team’s process	A page of cards
A connected multi-screen journey	A pack
The same thing outside the app shell	Embed & share

Built a page or pack and can’t find it in the app? Publishing makes it live at its own address; it still has to be placed before people meet it in the normal flow — surfaced as the project’s live experience, or mounted as a tab alongside the classic ones. That step is E7 · Shaping the experience.

Where to go next

Branding and layout for what you build: E7 · Shaping the experience.
The structured collections cards love: D2 · Collection types.
Shipping an experience to another workspace: V4 · Hubs & distribution.