Layout Components

These are the fundamental layout building blocks in the LOKE Design System. Use them to structure pages, compose sections, and maintain consistent spacing and alignment across your UI.

---

Primitives

• Box — The core layout primitive. Provides responsive spacing, display (flex/grid), positioning, borders, backgrounds, and shadows.
• Inline — Horizontal flow of children with a consistent, responsive gap. Built on top of Box.
• Stack — Vertical flow of children with a consistent, responsive gap. Built on top of Box.
• Columns — Grid layout for responsive column counts and per‑item spans, with a simple API for common grid patterns.
• VisuallyHidden — Hide content visually while keeping it accessible to assistive technologies.

Page containers

• MaxWidthWrapper — Responsive, centered container with consistent horizontal padding for readable content width.
• PageLayout — Full‑bleed application shell with a page header, optional sidebar trigger/aside, right‑side actions, and a main content area.

---

Where to start

• If you need flexible spacing, alignment, or display control: start with Box.
• For simple vertical stacks (forms, settings panels, sections): use Stack.
• For horizontal groups (button rows, chip sets): use Inline.
• For grids and card layouts: use Columns.
• For page containers: wrap content in MaxWidthWrapper and consider PageLayout for full pages.