Layout

Container

Centered content-width wrapper for the narrow-column reading pattern, capping inline size at a configurable width token.

import { Container } from '@lostgradient/cinder/container';
layout
01

Overview

Centered, max-width-capped wrapper for the narrow-column reading pattern. Container composes no app shell chrome; it just constrains and centers content.

Usage

svelte 
<script lang="ts">
  import Container from '@lostgradient/cinder/container';
</script>

<Container maxWidth="prose">
  <h1>Article title</h1>
  <p>Long-form content stays at a readable measure.</p>
</Container>

maxWidth selects a named width token (prose / narrow / wide / full); omitting it falls back to --cinder-content-width. The full keyword removes the cap entirely.

The v1 inline gutter is a single non-responsive value (--cinder-space-5). Disable it with padded={false}, or override .cinder-container (or the --cinder-content-width-* tokens) per scope if you need different padding or widths.

For an app shell with header and action regions, write the shell directly from Container, SectionHeading, navigation, and action primitives.

Live preview
02

When to use

Use when
  • Centering article or long-form content in a readable, max-width-capped column.
  • Constraining a section of a page to a named content width without app-shell chrome.
Avoid when
  • Building an app shell with header, breadcrumbs, or action regions — write a hand-rolled page scaffold directly.
03

Examples

Prose reading column

The prose width caps line length at a readable measure and centers the column.

Call to action

A conversion band recipe: Container wraps an accent-tinted panel with a short headline, supporting copy, and primary/secondary action buttons.

Hero section

A landing-page hero recipe: Container centers an eyebrow, headline, supporting copy, and CTA row beside an AspectRatio media panel.

Named width scale

narrow, wide, and full bracket the default content width for different layouts.

04

Props

Props for container
NameTypeDefaultDescription
maxWidth 'prose' | 'narrow' | 'wide' | 'full' Named max-width token. Omitted falls back to the default content-width token.
centered boolean true Center the box with auto inline margins.
padded boolean true Apply the default inline gutter so content never touches the edges.
as 'object''a''abbr''address''article''aside''audio''b'
91 more members 'bdi''bdo''blockquote''body''button''canvas''caption''cite''code''colgroup''data''datalist''dd''del''details''dfn''dialog''div''dl''dt''em''fieldset''figcaption''figure''footer''form''h1''h2''h3''h4''h5''h6''head''header''hgroup''html''i''iframe''ins''kbd''label''legend''li''main''map''mark''menu''meter''nav''noscript''ol''optgroup''option''output''p''picture''pre''progress''q''rp''rt''ruby''s''samp''script''search''section''select''slot''small''span''strong''style''sub''summary''sup''table''tbody''td''template''textarea''tfoot''th''thead''time''title''tr''u''ul''var''video'
 'div' Element tag to render.
children required snippet Required content rendered inside the container.