Wide
Komponente · 6 Varianten
Bento-Tile wide
components/BentoTileWide.astro
Fehlende Bento-Größen: Wide (3 Spalten), Tall (2 Zeilen), Visual mit Bild ohne Overlay. Im Raster mit S und M.
Notizen
- Bestand Bento-Tile: s, m, l, mark. Kein wide, kein Bild.
- Wenn Approved: Varianten wide, tall, visual im Bento-Tile.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "wide" | "wide-visual" | "tall" | "visual-s" | "raster" | "mix" | "wide" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<BentoTileWide variant="wide" surface="nacht" />01 · Wide
3 Spalten
Feature-Bento. Icon, Label, H3.
Nacht
Paper
Wide
Drei Spalten breit, eine Zeile hoch.
02 · Wide Visual
Satz + Bild 6/6
Value-Prop bild. Bild bleibt Bild.
Nacht
Wide + Visual
Satz links, Bild rechts, kein Overlay.
Paper
Wide + Visual
Satz links, Bild rechts, kein Overlay.
03 · Tall
row-span-2
Anfrage. min-h-96.
Nacht
Tall
Eine Spalte, zwei Zeilen.
Paper
Tall
Eine Spalte, zwei Zeilen.
04 · Visual S
Bild oben, Caption
Blog-Card. 4:3.
Nacht
S + Visual
Bild oben, Satz unten.
Paper
S + Visual
Bild oben, Satz unten.
05 · Raster
Wide, Tall, S, M zusammen
Bento. Lücken gefüllt.
Nacht
Wide
Drei Spalten breit, eine Zeile hoch.
Tall
Eine Spalte, zwei Zeilen.
S + Visual
Bild oben, Satz unten.
M
Füllt die Lücke.
Paper
Wide
Drei Spalten breit, eine Zeile hoch.
Tall
Eine Spalte, zwei Zeilen.
S + Visual
Bild oben, Satz unten.
M
Füllt die Lücke.
06 · Mix
Wide, Wide Visual, drei S
Bento. Zwei Zeilen.
Nacht
Wide
Drei Spalten breit, eine Zeile hoch.
Wide + Visual
Satz links, Bild rechts, kein Overlay.
S 1
S 2
S 3
Paper
Wide
Drei Spalten breit, eine Zeile hoch.
Wide + Visual
Satz links, Bild rechts, kein Overlay.
S 1
S 2
S 3