Page heading
Back navigation, identity, context, metadata, and a clear primary action.
Tableau de Bord
Step 6-008 · Components combined into repeatable solutions
Core UI Patterns
Patterns establish the preferred composition for recurring BrixFax situations. The examples
below use the Step 6-007 components and opt-in global .bf-* classes; production
pages remain unchanged until a later rollout step adopts them explicitly.
Pattern register
Overview list
Scannable groups and rows with identity, status, metadata, and a predictable opening action.
Editable list row
Primary content first, visible completion state, compact metadata, and secondary actions.
Search and filters
Search stays visible while optional filters expand without overwhelming narrow screens.
Form section
One subject per section with help, validation space, and an explicit save boundary.
Empty state
Explain what is absent, why it matters, and the single best next action.
Danger zone
Separate destructive actions, state consequences plainly, and require deliberate confirmation.
Mobile action bar
Keep the completion action reachable when a long mobile workflow needs a persistent boundary.
Operational workspace
Dense tools use navigation, panels, tables, and shared controls without becoming visually unrelated.
1. Page heading
Use one stable hierarchy for back navigation, page identity, context, metadata, and actions.
.bf-page-heading · __top · __copy · __actions · __meta 2. Overview list
Group related records, make identity dominant, and keep status and opening direction predictable.
.bf-overview-list · .bf-overview-row · __body · __aside 3. Editable list row
Keep the state control, item identity, quantity, and secondary actions readable at a glance.
Hafermilch
2 × 1 l · any brand
Bread
1 item · collected
.bf-editable-list · .bf-editable-row · __check · __body · __actions 4. Search and filters
Search remains immediately available; secondary filters may open only when they are useful.
.bf-search-pattern · __bar · .bf-filter-panel · .bf-filter-grid 5. Form section
Separate one subject from another and make the save boundary explicit.
.bf-form-stack · .bf-form-section · __header · __body · __footer 6–7. Empty state and danger zone
Empty state
Use a single explanation and the best next action instead of a blank panel.
No open Shopping Lists
Create a personal list or choose a Household before adding items.
Danger zone
Keep destructive actions visually and structurally separate from routine editing.
Delete this list
The list and its items will be removed. This action cannot be undone.
8. Mobile action bar
The action boundary stays reachable inside a long mobile workflow without covering the content permanently.
Review Shopping Trip
Confirm the retailer, date, receipt lines, matches, and proposed prices.
2 items still need review
Resolve them before approving the trip.
Receipt item 1 Hafermilch · €1.45 · matched
Receipt item 2 Bread · €2.29 · needs review
Receipt item 3 Apples · €3.18 · needs review
.bf-mobile-action-bar · __summary 9. Operational workspace
Dense owner tools can remain efficient while using the same control, state, spacing, and focus language.
| Trip | Retailer | Date | Items | Status | Action |
|---|---|---|---|---|---|
| #184 | ALDI Süd | 5 Aug 2026 | 17 | Needs review | |
| #183 | REWE | 4 Aug 2026 | 9 | Processing | |
| #181 | Netto | 2 Aug 2026 | 12 | Failed |
.bf-workspace · __sidebar · __main · .bf-data-table Narrow and coarse-input check
This constrained example verifies stacking, target size, metadata wrapping, and action reachability.
Personal list
Next time
Olive oil
1 × 750 ml