Page container

Wrap content and pick a size; the container centres it and holds the gutter. It adds no vertical padding or margin, paints no background and sets no type, so vertical rhythm, backgrounds and full-bleed bands belong to the section around it. Other HTML attributes (id, aria-labelledby, style) pass through to the element.

Suggested location

src/lib/components/page-container-01

Required props

children

Limitations

• The maximum width is the content width: once the maximum is reached, a default container measures 72rem plus two gutters. To cap the outer box instead, change box-content to box-border and the width class to w-full together; changing only one of them insets the content twice.
• The gutter follows viewport breakpoints (sm, lg), not the width of the parent. Inside a narrow column, set --page-container-gutter or nest the container so its gutter drops to zero.
• A container anywhere inside another .page-container has no gutter of its own, and --page-container-gutter on it cannot restore one. A band that breaks out of a container to the viewport edge should close the outer container instead of nesting in it. A section of your own with side padding does not clear the gutter; set --page-container-gutter: 0px on the inner container there.
• Give --page-container-gutter a length or percentage with a unit: 0px, not 0. A unitless zero makes the width calculation invalid, and inside a flex or grid parent the container can then shrink to its content.
• Borders on the root are not subtracted from its width and overflow the parent by their thickness; put a border on an element inside, or use a ring or outline.
• No safe-area insets. If your page sets viewport-fit=cover, wrap the gutter in max() with env(safe-area-inset-left) and env(safe-area-inset-right).
• The class prop is appended after the container's classes; a conflicting width or padding utility is not guaranteed to win.

Example

<script lang="ts">
	import Container from '$lib/components/page-container-01/Container.svelte';
</script>

<Container as="section" size="prose" aria-labelledby="returns-title" class="py-16 sm:py-24">
	<h2 id="returns-title" class="text-3xl font-semibold tracking-tight">Returns</h2>
	<p class="mt-4 text-zinc-600">Send anything back within 30 days of delivery for a full refund.</p>
</Container>

<div class="bg-zinc-950 py-24 text-zinc-50">
	<Container>
		<h2 class="text-3xl font-semibold tracking-tight">Plan the next quarter in one afternoon</h2>
	</Container>
</div>

<Container as="main" size="wide">
	<Container as="article" size="prose">
		<!-- 65ch, centred, no second gutter -->
	</Container>
</Container>

.docs-page {
	--page-container-gutter: clamp(1.5rem, 6vw, 5rem);
}

Pick a size per use, set one CSS variable to change the gutter, and edit the widths lookup in the source to change what each size means.

• Gutter: set --page-container-gutter on the container or any ancestor to one length with a unit, such as 0px, 1.25rem or clamp(1.5rem, 6vw, 5rem). It replaces all three steps (16, 24 and 32 px).
• Widths: the widths object at the top of the script maps each size to a complete Tailwind class. Change max-w-6xl to max-w-5xl to make default 64rem; keep whole class names so Tailwind finds them.
• Vertical space and backgrounds: add them on a section around the container, or pass padding through class (class="py-16 sm:py-24"). The container never adds its own.
• Full-bleed bands: put the background on an outer element that spans the page and the container inside it; the content still lines up with every other container of the same size.
• Nesting: a prose container inside a default one keeps its 65ch measure and takes no second gutter, so an article can sit inside a page layout.
• Container queries: add @container through class when children should respond to the container's width rather than the viewport's.

Public CSS variables

• Renders the element named by as and adds no role or ARIA; the element's own semantics apply.
• A section is a region landmark only when it has an accessible name; pass aria-labelledby pointing at its heading.
• Render main once per page. header and footer are banner and contentinfo landmarks only when they are not inside an article, aside, main, nav or section, or an element with the matching role (article, complementary, main, navigation, region).
• The gutter uses padding-inline and centring uses margin-inline, so the layout mirrors under dir="rtl" without changes.

Known limitations

• The container does not break long words or wrap wide children; content wider than the measure (a long URL, a wide table) needs its own overflow-wrap or scrolling.

Integration

• Presentational
• Works without client-side JavaScript
• Server-side rendering supported

Dependencies

No additional runtime packages beyond Svelte and Tailwind CSS

License

MIT. Default license approval is pending; see the license status before adopting the source.

Version history

• 1.0.0 (Published) Current release · 30 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.