Blocks overview
Reusable page-level patterns composed from the same component rules.
Design thinking
Blocks are reusable application patterns rather than another primitive sizing category. PageHeader is a layout, ResourceList is a content surface and DeleteResource is an overlay composition; each inherits its underlying design rules.
Size and spacing
Natural composition; no independent density scale. Compose the existing categories: control content uses .125rem to .5rem spacing, while card and layout boundaries use .75rem, 1rem, 1.5rem or 2rem. Keep page headings on the island and related content in natural-height surfaces. Do not add another scale for a preassembled pattern.
Interaction and motion
The pattern coordinates existing control behavior; it must not reimplement hover, focus or opening motion. Application callbacks own navigation, persistence and destructive effects, including async success and failure.
Best practices
- Start with the supported composition before building a custom page pattern. Avoid copying library internals into an example.
- Keep the primary create action last in the page heading and filters near the content they affect.
- For destructive operations, name the affected resource and preserve retry/cancel behavior when the operation fails.
- Treat catalog data as mock data. Connect business services in the ViewModel rather than turning the reusable block into a domain service.