Drawer
A drawer is a panel that slides in from the side of the screen.
When to use
- Detail about something selected in a list, where keeping the list visible is the point.
- A side task that belongs to what is on screen, such as filters or a history of changes.
- Content that would lose its meaning on a page of its own.
When not to use
- A decision that blocks everything else. That is a modal, which takes the centre for a reason.
- A short confirmation, where a drawer is far more than is needed.
- Primary content. If it is the main thing, it deserves the page.
- Anything a reader will want to link to, since a drawer has no address of its own.
Guidance
Do
Refund request
Opened by Ava Mensah, 12 Oct. Waiting on billing.
Title the drawer with the thing it is showing, so the reader can tell which row they opened.
Don't
Details
Opened by Ava Mensah, 12 Oct. Waiting on billing.
Do not title it Details. Every drawer holds details, so the word does not say which one is open.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| drawer | surface | 0.000Substrate | 0.000Substrate |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Title the drawer with the subject, not the word Details.
- Keep the body to what belongs with the selection. Anything else wants a page.