## When to use

List-detail workflows where the user bounces between records quickly: CRM contacts, issues in a tracker, orders in an e-commerce admin. A drawer preserves the list's scroll position and filters, unlike navigating to a detail route.

## Simple record detail

Identity in the header, key/value properties in the body, primary action in the footer.

Olivia Martin Acme Corp · Engineering
Email
  olivia.martin@acme.com
Phone
  +1 (555) 234-5678
Location
  San Francisco, CA
Joined
  March 12, 2024
Last active
  2 hours ago

## Tabbed detail (Properties · Activity · Comments)

Tabs sit directly under the header so switching views doesn't require scrolling. Each tab's panel scrolls independently inside the body.

Login button misaligned on Safari Opened by Alex Chen · 2 days ago
Assignee
  Sarah Miller
Reporter
  Alex Chen
Priority
  High
Component
  Auth UI
Browser
  Safari 17.2
Labels
  regression, ui, safari-only

#### Recent activity

## Anatomy

<drawer-ui side="right" size="lg"> <!-- identity --> <header slot="header"> <row-ui gap="2" align="center" grow> <avatar-ui text="Olivia Martin"></avatar-ui> <col-ui grow> <text-ui weight="semibold">Olivia Martin</text-ui> <text-ui color="subtle">Acme Corp</text-ui> </col-ui> <badge-ui text="Active" variant="success"></badge-ui> </row-ui> </header> <!-- tabs + content --> <section slot="body"> <tabs-ui value="properties"> ...tabs... </tabs-ui> <description-list-ui> ...props... </description-list-ui> <timeline-ui> ...events... </timeline-ui> </section> <!-- actions — archive on the leading edge, primary on the trailing --> <footer slot="footer"> <span slot="action-leading"> <button-ui text="Archive" variant="ghost"></button-ui> </span> <span slot="action"> <button-ui text="Edit" variant="primary"></button-ui> </span> </footer> </drawer-ui>

## Rules

- Header shows who/what this record is — avatar, name, status. Don't repeat it in the body.
- Use `<description-list-ui>` for structured properties, not ad-hoc row/col pairs. Semantic `dt/dd` pairs read better for screen readers.
- If the record has meaningful history, include a `<timeline-ui>`. One timeline per drawer is enough — collapse older events.
- Footer actions: destructive left, primary right. Same convention as form drawer.
- When the drawer is triggered from a table row, pass the row's id as `data-record-id` on the drawer so consumers can fetch fresh data on open.