Layout Patterns

A comprehensive guide to the Senastra Design System layout patterns. Each pattern includes visual demonstrations and detailed specifications for spacing, sizing, and responsive behavior.

1. Sidebar + Content

Desktop App Pattern

Expanded Sidebar:

width: 220px

padding: 16px

gap: 12px (vertical)

Collapsed Sidebar:

width: 56px (icon-only)

padding: 16px

Main Content:

flex: 1

padding: 24px

overflow-y: scroll

Collapsed Sidebar Variant

Collapsed Width: 56px

Icon size: 24px × 24px

Padding: 16px

Used for: minimized desktop view

2. Header + Content

Web App Navigation Pattern

Header Height: 56px

Padding: 16px (top) 24px (horizontal)

Background: surface

Border-bottom: 1px solid border

position: sticky

top: 0

z-index: 100

Content Below:

Full-width: 100vw or 100%

Padding: 24px

Scroll behavior: independent

3. Grid System

12-Column Layout

12 col

6-Column (Half)

6 col

4-Column (Third)

4 col

3-Column (Quarter)

3 col

2-Column (Sixth)

2 col

Grid System:

Columns: 12

Gutter (gap): 16px

Max-width: 1280px

Responsive Behavior:

lg (1024px+): full 12-column grid

md (768px+): 8-column grid

sm (640px+): 4-column grid

xs (<640px): single column

4. Card Grid

Auto-Fill Responsive Card Layout

CSS:

display: grid

grid-template-columns:

repeat(auto-fill, minmax(280px, 1fr))

gap: 16px

Responsive Columns:

xl (1280px+): 4 columns

lg (1024px+): 3 columns

md (768px+): 2 columns

sm (640px+): 1 column

5. Form Layouts

Single Column Form

Label

Layout:

max-width: 480px

margin: 0 auto

flex-direction: column

gap: 24px (form groups)

Form Group:

gap: 12px (label → input)

Label height: 20px

Input height: 36px

Two-Column Form (Label Left)

Label

Layout:

display: grid

grid-template-columns: 120px 1fr

gap: 24px

Use Case:

Forms with many fields (compact)

Desktop/tablet only (responsive to single column)

Inline Form

Search

Layout:

display: flex

gap: 16px

align-items: flex-end

Use Case:

Search bars, filter bars

Compact actions

6. Split View (Master-Detail)

Resizable Two-Pane Layout

Layout:

display: flex

gap: 16px

Primary pane: list/navigation

Secondary pane: detail view

Divider:

width: 2px

background: accent color

cursor: col-resize

Hint indicator: 20px circle (centered)

7. Content Width Constraints

Narrow (Reading/Articles)

640px

max-width: 640px (narrow)

Width: 640px

Use Case: Articles, blog posts, reading

Breakpoint: --bp-sm

Default (Dashboards)

960px

max-width: 960px (default)

Width: 960px

Use Case: Dashboard, applications, content

Breakpoint: --bp-lg

Wide (Data-Heavy)

1280px

max-width: 1280px (wide)

Width: 1280px

Use Case: Data tables, complex dashboards

Breakpoint: --bp-xl

Full-Width (Hero)

100% (full-width)

width: 100vw

Width: 100% / 100vw

Use Case: Hero sections, landing pages

Note: Use 100% for overflow handling

8. Responsive Behavior

Sidebar Transformation

Desktop (lg, ≥1024px):

Sidebar: expanded (220px)

Layout: sidebar + content side-by-side

Tablet (md, 768–1023px):

Sidebar: collapsed to icons (56px)

Toggle: on-click to expand overlay

Mobile (sm, <768px):

Sidebar: hidden, hamburger menu

Toggle: slide-in from left on click

Overlay: semi-transparent backdrop

Grid Reflow

Extra Large (≥1280px):

12 columns visible

Large (1024–1279px):

12 columns visible

Medium (768–1023px):

8 columns (4 cols span 2 → full row)

Small (<768px):

Single column (all cols span full width)

Card Grid Reflow

xl (≥1280px): 4 columns

lg (1024–1279px): 3 columns

md (768–1023px): 2 columns

sm (<768px): 1 column

CSS:

grid-template-columns:

repeat(auto-fill, minmax(280px, 1fr))

Form Layout Reflow

Desktop (lg+):

Two-column: label (120px) + input (1fr)

Tablet/Mobile (<lg):

Single column: label above input

Inline forms: stack vertically

Breakpoints Reference

Breakpoint	Variable	Min Width	Context
`sm`	`--bp-sm`	640px	Small tablets, landscape phones
`md`	`--bp-md`	768px	Tablets, small laptops
`lg`	`--bp-lg`	1024px	Desktops, large tablets
`xl`	`--bp-xl`	1280px	Large desktops

Spacing Scale

Name	Variable	Value	Use Case
`xs`	`--spacing-xs`	8px (2 × 4px)	Tight spacing, badge padding
`sm`	`--spacing-sm`	12px (3 × 4px)	Small gaps, internal padding
`md`	`--spacing-md`	16px (4 × 4px)	Standard padding, card spacing
`lg`	`--spacing-lg`	24px (6 × 4px)	Section spacing, header padding
`xl`	`--spacing-xl`	32px (8 × 4px)	Large sections, page padding
`2xl`	`--spacing-2xl`	40px (10 × 4px)	Major section breaks

Senastra Design System • Layout Patterns • 2026