USER INTERFACE

Offcanvas

Panels that slide in from an edge — details, filters, carts, comments and settings — without leaving the page.

THEME

DENSITY

Playground

Side, size, mode — open it inside the frame or for real

Projects

NTSpring 27 campaignNordic ThreadOct 27

KCWebsite v2Kaya CeramicsOct 30

FOParka lookbookFjord OutdoorNov 3

LCOctober retainerLumen CoffeeSep 30

MOFrames campaignMira OpticsNov 11

NTHoliday socialNordic ThreadOct 31

FOAW26 e-comFjord OutdoorOct 20

LCStore opening filmLumen CoffeeOct 18

KCGlaze studiesKaya CeramicsSep 8

MOPackagingMira OpticsDec 10

Closed — press Open panel

Settings

SIDE

SIZE

MODE

Floats above the page with a scrim. Default for focused tasks.

OPTIONS

Anatomy

Scrim, header, body, footer, resize handle

① SCRIM · .55 + blur 3

Filter projects24 results② HEADER · sticky

③ BODY · scrolls

CancelShow 24④ FOOTER · sticky

⑤ RESIZE

WidthS 320 · M 420 · L 560 · Full

Height (top/bottom)32 / 50 / 75 % · sheet 48 → 90 vh

Radius24 on the inner corners · 0 when full

Scrimrgba(6,7,11,.55) + blur 3 · fade 200 ms

Enterslide 320 ms cubic-bezier(.2,.8,.2,1)

Headerpadding 16/20 · title 17/700 · ✕ 36

Bodyflex 1 · min-height 0 · overflow-y auto

Footerborder-top w07 · padding 12/20/18 · primary right

Resize handle14 px hit area · 4 × 48 grip · 320–900

Nestedfirst panel −56 px, scale .97, brightness .6

Ready panels

Six panels used across Avava — each opens for real

RECORDright · 480

Record detailsLook at a client next to the list — tabs, history, quick actions.

Data List · Clients · Calendar

FILTERSright · 400

FiltersMany filters with a live result count; apply or reset.

Projects · Invoices · Files

COMMERCEright · 420

CartQuantities, free-shipping progress and checkout.

E-commerce shop

REVIEWright · 440

CommentsThread about a file with a reply box pinned at the bottom.

File Manager · Post

SETTINGSright · 520

SettingsToggles and choices with Unsaved changes in the footer.

Project · Workspace

NAVIGATIONleft · 320

Mobile menuMain navigation from the left on small screens.

Mobile · Client portal

Behaviour

Unsaved changes, stacking, resizing, bottom sheet

GUARDconfirm on close

Unsaved changesEdit the title, then press ✕, Esc or the backdrop — you’re asked first.

Every editable panel

STACKmax 2 levels

Panel on panelOpen a line: the second panel slides over, the first steps back and dims.

Invoices · Orders

RESIZE320–900 · saved

ResizableDrag the edge between 320 and 900 px; the width is remembered.

Details · Comments

MOBILE48 / 90 vh snap

Bottom sheetDrag the handle up to expand, down to dismiss.

Share · Actions on mobile

Rules & a11y

Markup and a checklist

Markup

<button aria-controls="filters" aria-expanded="false">Filters</button>

<!-- overlay / push -->
<aside id="filters" role="dialog" aria-modal="true"
       aria-labelledby="filters-title">
  <header>
    <h2 id="filters-title">Filter projects</h2>
    <button aria-label="Close filters">✕</button>
  </header>
  <div class="body">…</div>
  <footer>…</footer>
</aside>

<!-- inline: part of the layout -->
<aside role="complementary" aria-label="Details">…</aside>

Checklist7 of 8 checkedOpen any panel and close it — this line tells you where focus went.

OFFCANVASSide task that keeps the page as context: details, filters, comments.Data List → client

MODALShort task that must be finished or cancelled before going on.Delete, invite, confirm

POPOVERTwo or three quick choices tied to one control.Row ⋯ menu

PAGELong or deep work people will link to and come back to.Invoice edit, wizard

DO✓Keep the page visible behind — that’s the point✓Pin header and footer; scroll only the body✓Show the result count on the primary button✓Ask before discarding edits✓Use a bottom sheet instead on phones

DON’T✕Stack more than two panels✕Put a full multi-step wizard in a drawer✕Open on hover✕Use Push and Overlay in the same product area✕Make it wider than ~60 % of the screen