Application

Snap sections

Full-screen sections that snap on scroll, for presentations and landing stories.

Examples

Snap

One

Two

Three

Anatomy

.snapA viewport-tall scroller (100dvh) with mandatory vertical snapping and no visible scrollbar.
> sectionEach slide: at least the viewport tall, snaps to its top edge, centres its content vertically.

Accessibility

  • The scrollbar is hidden, so nothing shows there is more. Make the scroller keyboard-reachable (a focusable control in each section, or tabindex="0" and an aria-label on the .snap) so arrow keys and Page Down work.
  • Snapping is mandatory: a section with more content than the viewport can be hard to read to the end. Keep each one short enough to fit.
Jump to
ProportionFoundations
MaterialFoundations
PresetsFoundations
ShellLayouts · Application
Container and stacksLayouts · Pages
SplitLayouts · Pages
Grid, bento, masonryLayouts · Pages
Switcher and rowLayouts · Pages
↑↓Move↵OpenescClose