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.

Named width scale

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

04

Props

Props for container
Name Type Default Required Bindable Description
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''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 snippet req Required content rendered inside the container.