Container

Ein Container zentriert seinen Inhalt, deckelt die Breite, damit Textzeilen lesbar bleiben, und hält einen Rand frei, damit auf einem Telefon nichts den Bildschirmrand berührt. Meist ist er das Erste innerhalb von body().

Einfacher Container

Alles darin bleibt zentriert und hört an der Größengrenze auf zu wachsen.

container(
  text({ variant: 'lead' }, 'Alles darin bleibt zentriert und hört an der Größengrenze auf zu wachsen.'),
)

Größen

Fünf Stufen, von einer einzelnen lesbaren Spalte bis zu gar keiner Grenze. sm liegt bei etwa 40rem — ungefähr die Breite, die Fließtext will.

sm — 40rem

md — 56rem

lg — 72rem (Standard)

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem (Standard)'),
  ),
)

Eine eigene Breite

width nimmt jede CSS-Länge und übergeht size — für die eine Seite, die etwas braucht, das die Skala nicht hergibt.

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

Randabstand

Der Randabstand ist der Innenabstand, der zwischen Inhalt und Viewport-Rand gehalten wird. Er nimmt ein Abstands-Token, eine Anzahl von Abstandseinheiten oder eine rohe Länge.

Ein breiterer Rand, für eine Seite, deren Inhalt auf einem Tablet nicht bis an die Kante laufen soll.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Ein breiterer Rand, für eine Seite, deren Inhalt auf einem Tablet nicht bis an die Kante laufen soll.'),
)

Als anderes Element

as wechselt das Tag, ohne sonst etwas zu ändern — praktisch, wenn der Container zugleich das <main> der Seite oder eine <section> ist.

Ein main-Element

Gleiches Layout, richtiger Landmark.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Ein main-Element'),
  text({ tone: 'muted' }, 'Gleiches Layout, richtiger Landmark.'),
)

Props

Prop	Typ	Standard	Beschreibung
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Welche Breitengrenze gilt.
`width`	`string`	—	Eine rohe max-width, die size übergeht.
`gutter`	`Space`	`'md'`	Innenabstand, der gegen den Viewport-Rand gehalten wird.
`as`	`string`	`'div'`	Element, das gerendert wird, z. B. main oder section.