# Layout and page composition

> Containers, grids and page structure for arranging website content.

- Category ID: `layout`
- Part of a page: Website sections
- Published components: 7
- Page: https://pagesugar.com/categories/layout

## Components

- [Page container](https://pagesugar.com/components/page-container-01.md): One element that centres content at a named width (prose, narrow, default, wide or full) and keeps a 16, 24 or 32 px gutter from the screen edge. No vertical space, no background.
- [Site shell](https://pagesugar.com/components/site-shell-01.md): The outer frame of every page: a skip link, optional announcement bar, header, main landmark and footer, with the footer held at the bottom of short pages and anchors kept clear of a sticky header.
- [Split layout](https://pagesugar.com/components/split-layout-01.md): Two content regions side by side on proportional columns, stacking to one column in a chosen order below a breakpoint measured on the component's own width. The DOM order is always primary then secondary.
- [Section heading](https://pagesugar.com/components/section-heading-01.md): A section introduction: optional eyebrow, a heading whose level is set apart from its size, a description held to about 70 characters a line and an optional action that sits on the text's last line.
- [Card shell](https://pagesugar.com/components/card-shell-01.md): A card container with optional media, header, body and footer. Outline, elevated or muted surface, three padding presets, and an optional whole-card link that stays one tab stop. Footers line up across a row.
- [Section wrapper](https://pagesugar.com/components/section-wrapper-01.md): A page section with four tones, four spacing presets and four container widths. Same-tone neighbours merge into one band, anchor jumps clear a sticky header, and a heading id makes it a named region.
- [Responsive grid](https://pagesugar.com/components/responsive-grid-01.md): A CSS grid that fits as many columns as a minimum item width allows, or takes explicit counts per breakpoint. Works in sidebars through container queries and lines card parts up with subgrid.