VendHub Design System

Layout, Grid &
Breakpoints

12-column desktop grid, 5 breakpoints, 2 container types, and 4 layout patterns — the structural foundation of every VendHub page.

Three-Tier Grid — Toggle to Compare

The grid shifts across breakpoints — 12 columns on desktop, 8 on tablet, 4 on mobile. Click to switch.

Desktop · 12 columns
Tablet · 8 columns
Mobile · 4 columns

5 Breakpoints — Click for Details

Each breakpoint defines columns, gutter, sidebar state, and padding. Click any segment to see the full spec.

4 Layout Patterns

Every VendHub page maps to one of these patterns. No mixing on the same page.