Layout · 2 Props
Stack
Vertical flexbox container that stacks child blocks with consistent gap spacing.
Props
| Prop | Type | Default | Beschreibung |
|---|---|---|---|
| as | string | div | "header" | "footer" | "section" | "div" | "article" | "main" | "aside" |
| class | string | — |
Beispiele
Gap Sizes
sm, md, lg gap spacing.
gap: sm
Item 1 Item 2 Item 3
gap: md
Item 1 Item 2 Item 3
gap: lg
Item 1 Item 2 Item 3
{
"type": "grid",
"props": {
"cols": 3,
"gap": "lg"
},
"blocks": [
{
"type": "card",
"props": {
"variant": "outline",
"padding": "sm"
},
"blocks": [
{
"type": "text",
"props": {
"size": "xs",
"tone": "muted",
"text": "gap: sm"
}
},
{
"type": "stack",
"props": {
"gap": "sm"
},
"blocks": [
{
"type": "badge",
"props": {
"label": "Item 1",
"tone": "primary"
}
},
{
"type": "badge",
"props": {
"label": "Item 2",
"tone": "primary"
}
},
{
"type": "badge",
"props": {
"label": "Item 3",
"tone": "primary"
}
}
]
}
]
},
{
"type": "card",
"props": {
"variant": "outline",
"padding": "sm"
},
"blocks": [
{
"type": "text",
"props": {
"size": "xs",
"tone": "muted",
"text": "gap: md"
}
},
{
"type": "stack",
"props": {
"gap": "md"
},
"blocks": [
{
"type": "badge",
"props": {
"label": "Item 1",
"tone": "accent"
}
},
{
"type": "badge",
"props": {
"label": "Item 2",
"tone": "accent"
}
},
{
"type": "badge",
"props": {
"label": "Item 3",
"tone": "accent"
}
}
]
}
]
},
{
"type": "card",
"props": {
"variant": "outline",
"padding": "sm"
},
"blocks": [
{
"type": "text",
"props": {
"size": "xs",
"tone": "muted",
"text": "gap: lg"
}
},
{
"type": "stack",
"props": {
"gap": "lg"
},
"blocks": [
{
"type": "badge",
"props": {
"label": "Item 1",
"tone": "secondary"
}
},
{
"type": "badge",
"props": {
"label": "Item 2",
"tone": "secondary"
}
},
{
"type": "badge",
"props": {
"label": "Item 3",
"tone": "secondary"
}
}
]
}
]
}
]
}<Grid cols={3} gap="lg">
<Card variant="outline" padding="sm">
<Text size="xs" tone="muted" text="gap: sm" />
<Stack gap="sm">
<Badge label="Item 1" tone="primary" />
<Badge label="Item 2" tone="primary" />
<Badge label="Item 3" tone="primary" />
</Stack>
</Card>
<Card variant="outline" padding="sm">
<Text size="xs" tone="muted" text="gap: md" />
<Stack gap="md">
<Badge label="Item 1" tone="accent" />
<Badge label="Item 2" tone="accent" />
<Badge label="Item 3" tone="accent" />
</Stack>
</Card>
<Card variant="outline" padding="sm">
<Text size="xs" tone="muted" text="gap: lg" />
<Stack gap="lg">
<Badge label="Item 1" tone="secondary" />
<Badge label="Item 2" tone="secondary" />
<Badge label="Item 3" tone="secondary" />
</Stack>
</Card>
</Grid>