Overlays

Side sheet and bottom sheet

Quick edit without leaving the list. A side sheet slides in from the right on desktop (404 / 532 / 856px); on the phone it becomes a bottom sheet or a full-screen sheet. Header, scrolling body, sticky footer with the one primary.

Live specimen

Lifted from the approved family page at build time; interact with it.

Side sheet · quick edit

The approved board 3 sheet. Try it: open any row, change the price, then press Esc.

ProductClothStatusRecommended priceVersion
Stone linen jacketIrish Linen
HS 30612Draft£690v1
Charcoal herringbone jacketPerennial
VBC 218.1003Available£780v2
Navy birdseye two-piece suitCrystal Springs
HS 81045Available£1,150v4
Midnight mohair dinner suitCeremony
VBC 150.2201Available£1,480v2
Navy chalk-stripe three-pieceRevenge
VBC 403.0118Available£1,390v3
Mid-grey flannel trousersSherry Flannel
HS 64033Draft£340v1
Brown glen check waistcoatMoorland Tweed
HS 92201Retired£260v5
Showing 1–7 of 214

Discard your changes?

You changed Stone linen jacket. Closing now loses those edits.

Changes savedStone linen jacket, version 2
UsesSheet.k-stage.k-scrim.k-sheet.ov-sh-h.ov-sh-b.ov-sh-f--sheet-w--e-sheet--motion-sheet-in--motion-sheet-out

from families/overlays/#side-sheet

Sheet sizes, sticky footer, nested scroll

Three widths only. Header and footer stay put; the body scrolls on its own and never scrolls the page behind.

Small · 404Quick edit: one product, a few fields
Medium · 532Detail: key detail, Global Store product detail
Large · 856Create and edit: API key, section editor
ProductClothStatusRecommended priceVersion
Stone linen jacketIrish Linen
HS 30612Draft£690v1
Charcoal herringbone jacketPerennial
VBC 218.1003Available£780v2
Navy birdseye two-piece suitCrystal Springs
HS 81045Available£1,150v4
Midnight mohair dinner suitCeremony
VBC 150.2201Available£1,480v2
Navy chalk-stripe three-pieceRevenge
VBC 403.0118Available£1,390v3
Mid-grey flannel trousersSherry Flannel
HS 64033Draft£340v1
Brown glen check waistcoatMoorland Tweed
HS 92201Retired£260v5
Showing 1–7 of 214
Uses.k-sheet.md.k-sheet.lgoverscroll-behavior:contain.ov-sum--sheet-w

from families/overlays/#sheet-sizes

Sheet states

Loading, failed save, saving. The failure names the cause and keeps the edits.

Quick edit

Stone linen jacket

HS 30612 · Irish Linen
Loading the latest version from the Global Store…
Quick edit

Stone linen jacket

HS 30612 · Irish Linen
Couldn't save. The Laravel price service did not answer. Your edits are still here; try again.
Recommended price
£GBP
Unsaved changes
Quick edit

Stone linen jacket

HS 30612 · Irish Linen
Recommended price
£GBP

Writing to Laravel and the three brand stores.

Uses.ov-skel.ov-note.err.spinaria-busy

from families/overlays/#sheet-states

Motion and reduced motion

Every move answers a click and nothing loops. With reduced motion on, layers appear and leave at once.

Open and close
OverlayMoveOpenCloseReduced motion
Side sheetSlides in from the right edge--motion-sheet-in · 260ms--motion-sheet-out · 180msInstant, no travel
Phone bottom sheetRises from the bottom edge--motion-sheet-in--motion-sheet-outInstant, no travel
ScrimFades with its layer--motion-sheet-in--motion-sheet-outInstant, no travel
Dialog, confirmFades and settles 2% up--motion-sheet-in--motion-pop-out · 110msInstant, no travel
Menu, popoverDrops 4px and fades--motion-pop-in · 160ms--motion-pop-outInstant, no travel
TooltipFades after a 400 ms hover wait--motion-pop-in--motion-pop-outInstant, no travel
Hover cardDrops 4px after a 500 ms wait--motion-pop-in--motion-pop-outInstant, no travel
Save toastRises 8px, stays 2.6 s--motion-toast-in · 200ms--motion-toast-out · 140msInstant, no travel
Usesprefers-reduced-motion.ov-rm--ease-in--ease-out--pop-shift--toast-shift

from families/overlays/#motion