Overview
Page templates are full-page layout blueprints that assemble Chords components into the screens products build over and over — list views, detail views, dashboards, and more. Start from a template to keep structure, spacing, and behavior consistent across WMG products, and to skip re-solving the same layout problems.
Templates
Page shell
The scaffold: breadcrumb, page title, internal side navigation, and an empty content area to fill with your own components and labels.
List / index view
A collection screen: page header with a primary action, a search + filter toolbar, a data table, and pagination.
Detail / record view
A single record: header, primary content area, and a contextual side panel.
Dashboard / overview
At-a-glance metrics, charts, and widgets arranged on a responsive grid.
Settings / form page
Grouped form fields with labels, help text, and a sticky save action.
How to use
- Start from the closest template — copy the structure, then swap in your real data and product-specific actions.
- Reach for the page shell when your feature spans several screens — it frames the others, so a list or detail view can sit inside its content area.
- Keep the anatomy intact — templates encode consistent spacing, hierarchy, and placement (e.g. primary action top-right, pagination bottom).
- Compose with documented components only — every region is built from existing Chords components; don't introduce bespoke layout primitives.
- Adapt responsively — templates collapse to a single column on small screens; verify behavior against the Responsive foundations.