A right-edge panel at a fixed 480px, capped at 90vw.
That fixed width is what separates it from a sheet, which is always a
viewport fraction — and the two do not share a shadow or a header either. This is the only surface in the
product with a horizontal shadow.
Drawer
Used to read one piece of correspondence. The header carries an eyebrow, the reference and date, a PRINT action and a close button; the body is the only scrolling region.
Text of Email
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Specs
| Property | Value |
|---|---|
| Panel | width 480px · max-width 90vw · pinned top 0 / right 0 / bottom 0 · z-index 50 |
| Edge | border-left 1px #E5E7EB · no radius — it meets the viewport edge |
| Shadow | -8px 0 30px rgba(0,0,0,0.12) — the only horizontal shadow in the system |
| Scrim | fixed inset-0 at z-index 40 · rgba(0,0,0,0.35) · click to close |
| Header | padding 24px 24px 20px · border-bottom 1px · flex-shrink 0 |
| Eyebrow | 11px / 600 uppercase · letter-spacing .08em · #6B7280 |
| Reference | 13px / 600 · #A614C3 · margin-top 4px, gap 12px to the date |
| Date | 12px · #6B7280 |
12px / 600 · #A614C3 · letter-spacing .06em · 16px icon · gap 6px · hover opacity .7 | |
| Close | padding 4px · radius 6px · 16px icon · #6B7280 · hover #F9FAFB |
| Body | padding 32px 24px 24px · 14px · line-height 1.625 · the only scrolling region |
Drawer vs sheet: a drawer is 480px fixed with a horizontal shadow and an eyebrow header; a sheet is 50/58/70vw with shadow-2xl and either a breadcrumb or an inline card header. Both pin to the right edge, so width is the reliable tell. |
Its scrim is a separate full-screen layer at 0.35, the same as an expand-in-place sheet — not the 0.25 strip a record viewer uses. |
| The same content is reachable inline as an accordion row. The drawer is the “open it properly” route, which is why it carries PRINT and the accordion does too. |