Resource detail
Show the canonical state of one resource, read-first, with section-at-a-time editing in place.
A resource detail page is where a user inspects everything about a single resource. It opens read-first — calm and scannable — and each section can be edited in place, one at a time, without turning the whole page into a form.
Sir Reginald Fluffington III
Basics
Mind & fuel
Personality
When to use this pattern
How to use the pattern
Easily scan resources
The page opens read-only: values are plain text, grouped into labelled sections, with the resource's name as the title. What this resource is should be clear above the fold — nothing competes with reading. Each section carries its own always-visible Edit, and the page stays calm until the user chooses to act.† Reduce cognitive load † Think in states
How a value reads
Configuration is grouped into the same sections as the create flow,
and each field reads as a label/value pair: the key is the field's label, the value a read-only
rendering of the very control used to create it. Where a plain read-only control scans poorly, a
custom representation stands in instead — a resource ID, for example, reads as a copyable, disabled
input. An unset optional field reads as an em-dash (—) rather than vanishing, so the section's
shape stays stable.† Think in states
Sir Reginald Fluffington III
Basics
Mind & fuel
Personality
Edit one section at a time
Each section's Edit is always visible. Opening one turns just that section into a form with its own save and cancel; other sections stay independently editable, so there's no global edit mode to enter. Only the opened card becomes a form; everything else stays readable, so the change stays in context. The full edit behaviour — live validation, in-card save errors, the unsaved guard — is the Editing a resource pattern.† Keep actions near what they affect † Think in states
Basics
Loading the resource
A view backed by a request is never blank. Show a skeleton while it loads, the data once it arrives, a labelled empty state when there's nothing yet, and a recoverable error with a retry when the request fails — so the user always knows which situation they're in.† Think in states † Make errors recoverable
Operate from the header
Optional Applies when a resource has lifecycle actions (start, stop, rotate).
Lifecycle actions live in the static page header, not in a section. A status toggle sits beside the title so the resource can be started or stopped from anywhere on the page, independent of any section's edit state. A read-only health badge can sit next to the title to surface a degraded dependency without offering an action there.† Keep actions near what they affect † Communicate side effects
Sir Reginald Fluffington III
Referencing other resources
Optional Applies when a resource points at other resources.
Resources this one references read as a compact list — one row per referenced resource. Each row links to that resource's own detail page, so the reader can follow a reference without losing their place; the list itself stays read-only until the section is edited.† Keep actions near what they affect † Think in states
Tricks
Delete a resource
Optional Applies when a resource can be deleted.
Destructive actions live in their own Danger zone tab, separate from the editable sections, so delete is never a slip away from editing. Delete is gated by typing the resource's name to confirm.† Make errors recoverable † Reduce cognitive load
Sir Reginald Fluffington III
Behavior
This pattern delivers one goal: inspect the full, canonical state of one resource — and change any part of it in place, without losing the read-first calm. The checks below are how you verify an implementation delivers it.
- Read —
Every section's fields show read-only, including blank optional ones (
—). No inline errors, no banners, no toasts — any of those means an edit form is wrongly active. - Field shape —
Scalars read as a 2-column label/value row; long text and sliders read full-width as a disabled control; secrets read masked.
- Header —
A static header carries the resource name, a back button to the list, and non-submit actions — never a page-level submit.
- Edit in place —
Each section's always-visible Edit turns just that card into a form with its own save and cancel; other sections stay readable and independently editable. There is no global edit mode.
- Load failure —
A resource that fails to load shows an error page; a missing one shows not-found — never empty or half-loaded cards.
- OperateOptional —
A lifecycle toggle in the header starts/stops the resource; success and failure both toast. It sits apart from the per-section Edit affordances.
- HealthOptional —
A read-only badge surfaces worst-of(resource, dependency) health — warning when degraded, error when broken, hidden when healthy. It links to the failing dependency; it never offers an action.
- Reference fieldsOptional —
A field that points at another resource reads as a link to that resource's detail page — clickable, and middle/Cmd-click opens it in a new tab.
- Nested listsOptional —
A section holding a list of sub-resources reads as a summary in read mode; opening it reveals add/edit/remove, and its Save commits the whole list at once.
- TabsOptional —
Adjacent views are tabs under the same header, not separate routes. Reserved names: Overview (the sections), Setup (how to connect/use), Inspect (test/health), Danger zone (last).
- Danger zoneOptional —
Delete lives in its own tab (last), behind a type-the-name confirm so it can't be fat-fingered.
- Accessibility —
The page leads with a single top-level heading (the resource name) over a clear section structure; entering and leaving a section edit moves focus sensibly and never strands the keyboard user. Read-only values are real text (not empty disabled controls), and each section's Edit button is reachable and labelled by keyboard.
Content & copy
The page title is the resource's own name; sections and values read plainly. (See the UX text style guide.)
- Title is the resource name; section headings are sentence case.
- Scalars read as plain label/value text; only lists, long text, and sliders use a shaped read control.
- Unset optional fields read as an em-dash, not hidden.
- The per-section affordance is a plain "Edit".
- Generic page titles like "Details" with the name buried below.
- Greyed-out text inputs standing in for a scalar read value.
- Hiding empty optional fields so the section shape shifts.
- Possessive titles ("My pet") or Title Case headings.
Accessibility
- The page leads with a single top-level heading (the resource name) and a clear section structure.
- Entering and leaving a section edit moves focus sensibly and never strands the keyboard user.
- Read-only values are real text, so screen readers announce content, not empty disabled controls.
- Each section's Edit button is reachable and labelled by keyboard.
Related patterns
- Editing a resource — the section edit flow in depth.
- Creating a resource — provisioning a new one.
- Listing resources — the index this page is reached from.