Cover and centre
Full-height pages: a cover with header and footer and a centred middle, or one centred thing.
Examples
Cover
Centred, whatever the height.
Centre
Sign in
Anatomy
.cover | Full-height flex column (at least 100dvh) with gutter padding and a step between children. |
> header | Optional, first: sits flush with the top. |
> [data-center] | The middle. Auto margins push it to the vertical centre of the space left over. |
> footer | Optional, last: sits flush with the bottom. |
.center | Full-height grid with gutter padding that centres its one child both ways. |
.center > * | The single child, as wide as the space allows up to φ⁷ ≈ 29rem. |
API
| Attribute | Values | Description |
|---|---|---|
data-center | boolean | On one child of .cover: centres it vertically between whatever comes before and after. |
Accessibility
- When a cover or centre is the whole page, the centred part is the content: make it (or the
.centeritself) the<main>landmark, with<header>and<footer>around it.