# Page layout · MIAN

Containers, section rhythm, display type and grids, the frame every page is built in.

- Id: `layout` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/layout
- Use for: page structure, section spacing, two column split, content width, grid columns, container, display headline, eyebrow label.
- On a page: frame · prominence low · density low.
- Avoid: Do not add your own container, max-width or section padding CSS, mn-section and mn-container already set the rhythm.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-site`: On <body>: a full-height column so the footer sits at the bottom.
- `mn-skip`: A “Skip to content” link, visible on focus. Point it at <main id="main">.
- `mn-container`: Centred content width with side gutters. mn-container-narrow (46rem) · mn-container-wide (88rem). --mn-container sets it.
- `mn-section`: A band of the page with vertical rhythm (--mn-section-space) and a container for queries. mn-section-sm · mn-section-flush (no top padding) · mn-section-muted · mn-section-bordered.
- `mn-section-head`: Eyebrow, title and intro above a section. mn-section-head-center · mn-section-head-split (title left, intro right).
- `mn-eyebrow`: A short label above a title. Use it on a few sections, not all.
- `mn-display · mn-title · mn-subtitle`: Fluid display type for heroes, section titles and sub-titles, in the noodle’s heading font.
- `mn-intro`: Intro paragraph, fluid size, 38em measure.
- `mn-cols mn-cols-2|3|4`: Equal columns that collapse on narrow sections.
- `mn-split`: Two columns (text + media). mn-split-start / mn-split-end make one side wider, mn-split-reverse swaps them, mn-split-top aligns to the top.
- `mn-grid`: Auto-filling grid; --mn-min sets the smallest column (default 16rem).
- `--mn-container · --mn-gutter · --mn-section-space`: Page-level tokens. Override on :root or any noodle.

## Accessibility

- Use one <h1> per page (usually the hero’s mn-display) and keep heading levels in order: mn-title is for <h2>.
- Landmarks: <header>, <main id="main">, <footer>; name repeated <nav>s with aria-label.
- Put mn-skip as the first element of <body>.
- Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview.

## Examples

### Section head and split

```html
<section class="mn-section mn-section-sm">
  <div class="mn-container">
    <div class="mn-section-head mn-section-head-split">
      <div><p class="mn-eyebrow">Close in four days</p><h2 class="mn-title">Month-end without the spreadsheet relay.</h2></div>
      <div><p class="mn-intro">Reconciliations run every night, so the last week of the month is review, not data entry.</p></div>
    </div>
    <div class="mn-split">
      <div class="mn-stack"><h3 class="mn-subtitle">Every account, matched overnight</h3><p class="mn-muted" style="margin:0">Bank feeds, card processors and payroll arrive at 02:00 and are matched against the ledger before anyone logs in.</p></div>
      <div class="mn-media mn-media-placeholder" style="--ratio:4/3" role="img" aria-label="Photo: the reconciliation screen on a laptop, three-quarter angle">Photo: the reconciliation screen on a laptop, three-quarter angle</div>
    </div>
  </div>
</section>
```

### Columns

```html
<section class="mn-section mn-section-sm">
  <div class="mn-container mn-cols mn-cols-3">
    <div><h3 class="mn-subtitle">01: Connect</h3><p class="mn-muted">Link banks, cards and payroll in ten minutes.</p></div>
    <div><h3 class="mn-subtitle">02: Match</h3><p class="mn-muted">Rules learn from every approval you make.</p></div>
    <div><h3 class="mn-subtitle">03: Close</h3><p class="mn-muted">Export an audit trail your accountant signs off.</p></div>
  </div>
</section>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/layout/source