Centrim Design System — a token-first, accessible React component system.
Details / record view
Demonstrates how to structure a detailed record page using existing Design System components: understand a record and take the appropriate action.
What it demonstrates
- Hierarchy: context → identity → status and actions → key information → main content → activity → related information
- Breadcrumb and status stay secondary; the record title and its primary action carry the page
- A record summary read as one quiet band of facts (DescriptionList) instead of a card per fact
- Two-column composition — roughly two thirds main content, one third quiet supporting information
- Progress as an overall figure plus a phase breakdown, with room around it and no heavy container
- Activity as one continuous feed with avatar, actor, action and timestamp — never a card per event
- Action hierarchy: Edit project primary, the rest in a DropdownMenu, Delete behind an AlertDialog
- Populated, loading (Skeleton), empty-activity and error states from the existing state components
- Single-column recomposition on mobile with the supporting column stacked below the content
How to adapt it
- Composition: Breadcrumb → PageHeader → record summary → main content (Overview, Progress, Details, Activity) with supporting information beside it.
- Establish the record identity immediately and keep the one primary action visible at every viewport.
- One primary action per record; everything else is tertiary or in a menu, and destructive actions always confirm.
- Keep the supporting column compact and quiet — it holds facts and links, never decisions.
- Use typography and whitespace for separation; do not wrap each section in a card or repeat the same fact twice.
- Use timelines for phases and a continuous feed for activity — never a card per event.
- Never reorder the aside above the main content on mobile.
- Use it for a single record. For a collection see List & management; for an overview see Dashboard.
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.