Responsive Layout
Responsive layout patterns ensure your interface works across all screen sizes — from 320px mobile to 2560px ultrawide. The approach is mobile-first: start with the smallest layout and progressively enhance as viewport width increases.
Components used
Anatomy
Best practices
Breakpoints
Use four breakpoints: 640px (sm — large phones), 768px (md — tablets), 1024px (lg — small desktops), 1280px (xl — standard desktops). Design mobile-first and add complexity at larger breakpoints.
Grid behaviour
12 columns on desktop (lg+), collapsing to 8 on tablet (md), 4 on mobile (sm), and full-width stacking below 640px. Use the Grid System component with responsive column classes.
Stack direction
Horizontal Stacks become vertical on mobile. A row of 3 cards becomes a single column. Metric Row wraps to 2×2 on tablet and stacks vertically on mobile.
Data Tables
On mobile, Data Tables use horizontal scroll with a sticky first column. The header row remains fixed. Avoid hiding columns — users need the data. Alternatively, switch to a card-based layout for each row.
Typography scaling
Heading sizes scale down on mobile. Display 2XL (48px) becomes XL (32px). Body text remains 14–16px across all sizes. Line length should stay between 45–75 characters for readability.
Cards
Card grids follow the breakpoint pattern: 3-up on desktop (lg+), 2-up on tablet (md), 1-up on mobile (sm). Cards should have consistent heights within a row — use min-height or stretch alignment.