--- title: "HTML Layout" subtitle: "Page layout and structure primitives" description: "How to structure pages using sections, containers, blocks, and grids." author: "Studio" section: "Docs" layer: "foundation" subsection: "Code Standards" order: 3 status: "published" access: "team" client: "internal" --- This system provides a **predictable layout structure** that keeps spacing, alignment, and width consistent across all pages. --- ## Page Structure All pages follow the same hierarchy: ``` body └─ page-wrapper └─ page-content └─ section └─ padding-global └─ container / max-width └─ block ``` ### Why this matters - Clear separation of concerns - Consistent spacing and widths - Easy to scan and reason about layouts ```html
``` --- ## Sections Sections group **major content areas** and control **vertical spacing**. ### When to use * Every major page section * Any time you need vertical rhythm between content groups ### Rules * Sections own vertical spacing * Use `.top-*` and `.bottom-*` classes * Do not apply margins inside sections ```html
``` --- ## Padding Global `.padding-global` provides **consistent horizontal padding**. ### When to use * Inside every section * Whenever content needs safe spacing from screen edges ```html
``` Padding comes from `.padding-global`, **never from containers**. --- ## Containers Containers constrain width and centre content in the viewport. ### When to use * Most page content * Any readable text or structured layout ### Key rules * Containers centre content * Containers do **not** add padding * Use one container per section (in most cases) ```html

Heading

Content

``` ### Variants
.container-small
.container-medium
.container-large
| Class | Use | | ------------------ | ---------------------- | | `.container-small` | Narrow layouts | | `.container-medium` | Default readable width | | `.container-large` | Wider layouts | --- ## Max-Width Max-width utilities apply **width limits only**. ### When to use * Special cases * Content that should not be centred * Breaking out of container behaviour | Class | Use | | ------------------ | ----------------- | | `.max-width-small` | Narrow constraint | | `.max-width-medium` | Default readable | | `.max-width-large` | Wide constraint | | `.max-width-full` | No constraint | **Rule of thumb** * Centre content → use a container * Only limit width → use max-width (exception, not default) --- ## Blocks Blocks group **related content** and manage internal spacing. ### When to use * Heading + text * Text + buttons * Image + caption * Any content that belongs together ### Default behaviour * Vertical flex layout * Uses `gap` for spacing * No margins on children ```html

Heading

Body text

``` ### Gap modifiers
.gap-xs
Item
Item
.gap-s
Item
Item
.gap-m
Item
Item
.gap-l
Item
Item
.gap-xl
Item
Item
| Class | Effect | | -------- | ----------- | | `.gap-xs` | Very tight | | `.gap-s` | Small | | `.gap-m` | Default | | `.gap-l` | Large | | `.gap-xl` | Extra large | ```html

Heading

More space between elements

``` --- ## Block Layout Modifiers Blocks can change layout or alignment. | Class | Effect | | -------------- | ------------------- | | `.row` | Horizontal layout | | `.row-reverse` | Reversed horizontal | | `.align-start` | Align items start | | `.align-center` | Centre items | | `.align-end` | Align items end | ```html

Text

``` --- ## Grid Grids create **column-based layouts**. They are not spacing utilities. ### Base grid * Two equal columns * Default gap applied
Column 1
Column 2
```html
Item
Item
``` ### Column modifiers
1
2
3
1
2
3
4
| Class | Columns | | ----------- | ------------- | | `.cols-3` | Three columns | | `.cols-4` | Four columns | ```html
Item 1
Item 2
Item 3
``` ### Item width | Class | Effect | | ------------- | --------------------- | | `.fit-content` | Item sizes to content | ```html
Flexible column
Fixed
``` ### Rules * Use grids for layout, not spacing * Use `gap-*` to adjust spacing * Combine column + gap modifiers as needed