Foundation · 6 Varianten

Container

components/system/foundations/Container.astro

Container-Breiten je Breakpoint, Kante 24, Ausbruch, Lesbreite. Ergänzt Raster, ändert nichts.

Notizen

Raster-Seite nennt Spalten, Gutter, Breakpoints lg/xl. Container-Maxbreiten fehlen als Tabelle.
Tailwind 4 Default: .container max-width = Breakpoint. Wir überschreiben in global.css: px-6 und max-width 75rem (1200).
Entschieden (Komposition): Default deckelt bei 1200. Breiter läuft über nw-wide (1440), Cover und Bleed über -mx-6.

Props

Name	Typ	Default	Notiz
variant	"tafel" \| "kante" \| "voll" \| "schmal" \| "lesbreite" \| "shell"	"tafel"	01–06.
surface	"nacht" \| "paper"	"nacht"	Pflicht-Paar.

<Container variant="tafel" surface="nacht" />

01 · Tafel

Fünf Breakpoints

Tailwind 4. min-width und max-width identisch.

Nacht

Paper

02 · Kante

px-6 sichtbar

global.css. Gestrichelt Oliv markiert die 24 px.

Nacht

px-6 · 24 px Kante, jede Breite

Paper

px-6 · 24 px Kante, jede Breite

03 · Ausbruch

-mx-6

Sektionen-Docs. So brechen Nacht-Flächen aus.

Nacht

-mx-6 · Fläche bricht aus dem Container, Sektionen so gebaut

Paper

-mx-6 · Fläche bricht aus dem Container, Sektionen so gebaut

04 · Schmal

max-w-3xl

Docs, Prose. 768 px Lesefläche.

Nacht

max-w-3xl · 768 px, Docs und Prose

Paper

max-w-3xl · 768 px, Docs und Prose

05 · Lesbreite

65ch

nw-base. Zeichen, nicht Pixel.

Nacht

max-w-[65ch] · Base und Lead brechen bei 65 Zeichen, egal wie breit der Container ist. Dieser Satz zeigt die Kante.

Paper

max-w-[65ch] · Base und Lead brechen bei 65 Zeichen, egal wie breit der Container ist. Dieser Satz zeigt die Kante.

06 · Shell

7+4, 8+4, 12

Raster-Seite. Die drei Teilungen der Schale.

Nacht

Paper