Layout
Layout guidelines ensure consistency across Kaharagian government websites. Use these patterns for page structure, containers, and responsive behaviour.
Container Widths
Containers centre content and provide maximum widths to maintain readability. Choose the appropriate container based on your content type.
| Container | Max Width | CSS Variable | Use Case |
|---|---|---|---|
| Narrow | 720px | --container-narrow | Long-form reading content, articles |
| Default | 1200px | --container-max | Standard page layouts, most content |
| Wide | 1400px | --container-wide | Dashboards, data-heavy pages |
Content Width
For optimal reading, limit text content to 42rem (~672px). This maintains a comfortable line length of 50-75 characters per line.
This paragraph is constrained to the content width (42rem). Long form content should always use this constraint for optimal readability. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Responsive Breakpoints
The design system uses mobile-first responsive breakpoints:
| Breakpoint | Width | Usage |
|---|---|---|
xs | 0px | Mobile (default) |
sm | 640px | Large phones |
md | 768px | Tablets |
lg | 1024px | Small desktops |
xl | 1280px | Large desktops |
Grid Layouts
Use CSS Grid for multi-column layouts. Common patterns include:
Two columns
Three columns
Sidebar layout (1:3 ratio)
CSS Variables
/* Container widths */
--container-max: 1200px;
--container-narrow: 720px;
--container-wide: 1400px;
/* Content width */
--content-width: 42rem; /* ~672px - optimal reading */
--content-wide: 62rem; /* ~992px - documentation, code examples */
/* Container padding */
--container-padding: var(--space-4); /* 16px */
/* Grid gaps */
--grid-gap: var(--space-4);