Beam
Patterns
Page-level recipes built from compositions, utilities and Cantina controls. Each one renders in every brand kit, with its HTML and the rules an agent follows to build it.
Patterns are a starting point, not a component: copy the structure, swap the stand-in controls for Cantina components, and keep the compositions. A pattern is published only when it renders correctly in every brand kit, in light and dark, at all three densities.
- App shell — Contained
The ABL application frame: a collapsible sidebar on a tinted page, with the page in a raised panel whose header carries title, search, branch and the global menu.
- App shell — Standalone
The ABL frame for standalone (customer-facing) apps: a branded app bar, a navigation + search row, page content and a legal footer.
- Responsive grid system
Page structure on the 12-column .b-layout-grid: full width on phones, explicit spans from md, refinements at lg.
- Form layout
A single-column form in grouped sections, with paired short fields side by side on wider screens and actions at the end.
- Data-table page
A list page: title and primary action, a filter toolbar, the table, and pagination.
- Dashboard
Key numbers first, then the main chart with a supporting list. Tiles reflow on their own; the chart row uses page columns.
- Settings
A section list beside grouped settings. Each row pairs a label and description with its control; the list stacks above the content on narrow screens.
- Empty, error and loading states
What a region shows when there is nothing yet, when something failed, and while it loads.
- Detail page
One record: title, status and actions up top; the main content on the left and a metadata rail on the right.
- Wizard / stepper
A task split into ordered steps, with progress shown above and Back / Next below.