Composant · Structure

Container

Stable

Conteneur centré à largeur maximale bornée (sm/md/lg/xl/full) avec padding horizontal optionnel. Cadre la longueur de ligne.

Exemples

Tailles sm / md / lg

size="sm"

size="md"

size="lg"

Voir le code (Svelte)

<Stack gap={2}>
  <Container size="sm">
    <Card>
      <p class="fp-card-text">size="sm"</p>
    </Card>
  </Container>
  <Container size="md">
    <Card>
      <p class="fp-card-text">size="md"</p>
    </Card>
  </Container>
  <Container size="lg">
    <Card>
      <p class="fp-card-text">size="lg"</p>
    </Card>
  </Container>
</Stack>

API

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"lg"`
`padding`	`boolean`	`true`
`as`	`string`	`"div"`

Les bornes lisent var(--st-container-*) avec replis rem.

Tokens utilisés

--st-container-sm
--st-container-md
--st-container-lg
--st-container-xl