Overview
Preview reduces context switching by showing key metadata before committing to detail navigation.
It helps teams move quickly through long lists with minimal cognitive overhead.
Inspect work without losing list context
Select records, reveal progressive detail, test the restricted state, and follow the explicit route to the complete object.
Priority work
Selection remains visible while the preview reveals only decision-critical context.
Anatomy
Use each piece in this order to keep interpretation and automation consistent.
- 1Header
Object title, code, and priority marker.
- 2Snapshot fields
Top three to five values people need to act on.
- 3Action affordances
Direct actions without opening full drawer.
- 4State chips
Concise status and owner metadata.
- 5Deep-link anchor
Primary route to full detail context.
The ordering here is not visual-only; it reflects interaction priority and expected user cognition. Keep this order unless policy demands a specific domain exception.
When to use
Use this pattern when the user needs guided consistency, state, and reuse at scale.
Recommended
- Long master lists
Use for quick context on each row or card.
- Read-heavy workflows
Useful when users compare many objects rapidly.
- Navigation heavy flows
When full page loads are expensive or unnecessary.
When not to use
Avoid forcing this pattern where simpler, direct interactions are sufficient.
Avoid
- Sensitive detail fields
Use gated view if data is confidential.
- Deep form review
Open full object only when editing complex fields.
- Low-data cards
Don’t use when summary cannot help.
Variants
A small number of variants helps teams choose correctly without adding complexity.
Popover preview
Contextual peek for hover/focus interactions.
Inline row preview
Expandable row in table or list context.
Side rail preview
Persistent preview panel with synchronized selection.
States
States communicate readiness, risk, and expected user behavior.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Collapsed | Browse mode | Compact summary card | Open for details or select object. |
| Expanded | User requests detail | More fields and action list | Keep route to full detail visible. |
| Unavailable | No read permission | Restricted state indicator | Request access or show alternate object set. |
Behavior
Behavior should remain predictable across devices, permissions, and async edges.
Progressive disclosure
Show only critical fields until expansion is needed.
Stable navigation
Preserve table selection when opening a preview.
Predictable refresh
Preview updates reflect latest object changes.
Accessibility
Keep interaction clarity high and ensure assistive technologies get the same meaning.
| Key | Action |
|---|---|
| Enter | Open object detail from the active preview card. |
| Space | Toggle inline preview state. |
| Esc | Collapse preview and return to list context. |
- Keep preview trigger clearly labeled as preview and not full selection.
- When expanded, manage focus to first new actionable control.
- Avoid overloading previews with too many fields that impact legibility.
Content guidelines
Consistency is achieved by language standards, not by design only.
Useful fields
Only include fields needed for immediate decisions.
Owner, state, last updated, critical metric
Time references
Use relative or absolute time consistently.
Updated 2 hours ago
Action wording
Use destination language for links.
Open object details
Examples
Reference implementation style, payloads, and practical behavior.
Production use
- Keep preview height stable across list rows for easier scanning.
- Lazy-load heavy metadata in expanded preview only.
- Include owner and status in all previews for handoff contexts.
Props / API
Use these API entries as a baseline contract and validate them against your domain layer.
These names are implementation-oriented and should map to your local contracts.
Props