Record Detail Drawer
drawer-ui tabs-ui description-list-ui timeline-ui
Side drawer that shows the details of a selected row without navigating away from the list. Header carries the subject (avatar + name + status); body uses tabs to switch between Properties, Activity, and Comments.
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
Emailolivia.martin@acme.com
Phone+1 (555) 234-5678
LocationSan Francisco, CA
JoinedMarch 12, 2024
Last active2 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
AssigneeSarah Miller
ReporterAlex Chen
PriorityHigh
ComponentAuth UI
BrowserSafari 17.2
Labelsregression, 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.