Profile
Single-record detail page: hero identity card, stat strip, tabbed facets, and a two-column content grid. Built from live Canvas components.
Identity header
The hero strip is the canonical identity block: who this is, their status, and a few key stats. The same shape on every detail page in the product, so users learn it once.
Anatomy. Breadcrumb -> hero Card: large Avatar + name, role, and status Badges beside the profile actions, with a plain Stats strip under a Divider.
Rachel Chen
Engineering Lead
Active
admin
MFA enabled
Sessions
24
Sign-ins (30d)
142
Joined
Jan 2024
Last active
2 min ago
Record facets
Tabs hold the record's facets so users scroll rather than navigate. The wider left column carries primary content; the narrower right column carries metadata and secondary panes.
Anatomy. Underline Tabs switch the panes in place: Overview is a 2/3 + 1/3 grid of read-only DescriptionList rows, Security is the 2FA Switch plus credential actions, and Sessions is a DataTable with per-row revoke.
Overview
Security
Sessions
4
Traits
Email
rachel.chen@example.com
Name
Rachel Chen
Department
Engineering
Location
San Francisco, CA
Timezone
America/Los_Angeles
Metadata
Identity ID
id_8f3a2b1c
Schema
person_v2
Created
Jan 15, 2024
Updated
May 24, 2026
Layout principles
Anatomy. Four principle Cards on a wrapping row, each pairing a rule of the detail-page shape with its rationale.
Breadcrumb + back action
Detail pages have two ways back. The breadcrumb is the discoverable one; the back button is the fast one. Both land in the same place.
Hero strip is canonical
Avatar, identity, status pills, and stat strip. The same shape on every detail page in the product. Users learn it once.
Tabs over sub-pages
For a single record, tabs scroll faster than navigating between pages. Use real pages only when sub-data needs its own URL.
2/3 + 1/3 is the default
Two columns: the wider one holds primary content (traits, credentials), the narrower one holds metadata and secondary panes.