Appearance
Build a Card Layout
For Editors and Admins.
A layout defines the visual structure of inspection cards: how many rows they have, what kind of cell occupies each position, and the font sizes used for field labels and values. Layouts are versioned — you can update a layout and templates can pin to any version.
Open the Layout Builder
- Tap the Layouts tab (ruler icon, visible to Editors and Admins).
- Tap + New to create a layout, or tap the Edit button on an existing one.
The Layout Builder has two tabs: Build and Preview.
Build tab
📸 Screenshot — Layout Builder (Build tab)
The Layout Builder in the Build tab, showing the canvas on the left with at least 3 rows of cells, and the inspector panel on the right with a Text Field cell selected. The "Layout preferences" toggle, row count label, and the green "All rows valid" dot should all be visible.
Layout preferences
Tap Layout preferences to expand the settings panel:
| Setting | Default | Description |
|---|---|---|
| Layout name | (empty) | Required before saving. e.g. Vestas V164 Standard |
| Field label (px) | 8 | Font size for cell labels (the small text above the value) |
| Field value (px) | 12 | Font size for the entered value |
Rows
The card layout is made up of rows. Each row fills the full width of the card and is divided into cells.
Tap + Add row to append a new row. New rows contain a single full-width Spacer cell.
Drag the ⠿ handle on the left of a row group to reorder rows.
Delete a row by selecting any cell in it and tapping Delete in the inspector, or by deleting all cells in the row.
Cells
Tap any cell in the canvas to select it. The right-hand inspector panel appears with options for that cell.
Choose a cell type
For a new Spacer cell, the inspector shows the full type picker. For a typed cell, the current type is shown with a Change type button.
📸 Screenshot — Cell type picker
The inspector panel showing the full cell type picker grid (a new Spacer cell is selected). All seven types should be visible: Text Field, Text Area, Date Field, Time Field, Static Label, Logo / Image, and Empty / Spacer.
See Cell types reference for the full list of types and their properties.
Field label
Text Field, Text Area, Date Field, and Time Field cells all require a Field label. This is the small caption that appears above the field value on the printed card. Example: Turbine ID, Date, Description of Work.
Inline text (prefix and suffix)
Text Field, Date Field, and Time Field cells optionally support:
- Before value — text that appears immediately before the entered value (e.g.
R:for a radius field) - After value — text that appears after the value (e.g.
mm,km)
A live preview shows how the combined value will look.
Row span
A cell can span multiple rows vertically. Use the Row span stepper (+ / −) in the inspector to increase or decrease how many rows the cell occupies. This is useful for large text areas or logo cells.
Split and Merge
- Split — divides a cell horizontally into two equal cells. Available when a cell occupies 2 or more column units.
- Merge — combines a cell with its neighbour into a single wider cell.
The layout uses a 6-column grid. Every row must use exactly 6 column units in total — the validator dot and error banner will flag rows that don't add up.
Validation
The status dot (top-right of the row list) shows:
- Green: All rows valid — ready to save
- Red: N issue(s) — column spans don't add up, or cells are missing labels
- Yellow: Add a Text Field — the layout has no data fields yet
A layout cannot be saved unless:
- It has a name
- It has at least one row
- All rows have column spans that add up to 6
- All data cells have labels
- At least one Text Field, Text Area, Date, or Time cell exists
Preview tab
The Preview tab renders the layout as it will appear during an inspection, with sample values shown in [brackets]. Use this to check field positioning and sizing before saving.
📸 Screenshot — Layout Builder (Preview tab)
The Preview tab showing a completed card layout rendered at full size. Sample values appear in [brackets] in each field. The "Sample values shown in [brackets]. Switch to Build to edit." hint should be visible above the card.
Save (new) or Publish (update)
- Save — for a new layout, creates the layout with version 1.
- Publish — for an existing layout, creates a new version. Templates that use this layout continue using their pinned version until manually updated.
A toast confirms the save: "Layout created" or "New layout version published (vN)".
Updating a layout version in a template
When editing a template, tap Change next to the current layout to open the Change Layout sheet. You can:
- Switch to a newer version of the same layout (field configurations are preserved where cell IDs match)
- Switch to a completely different layout (field configurations reset)