Design System
Playground Zur Vorlage

Komponenten · KartenBento-Tile

Komponente · 4 Varianten

Bento-Tile

components/BentoTile.astro

Kachel S, M, L und Marke. Granit-100 / 900, kein Schatten. 04 Wide und 06 Foto nicht aufgenommen. Nacht und Paper.

Props

Name Typ Default Notiz
variant "s" | "m" | "l" | "mark" "m" 01–03, 05. 04 Wide und 06 Foto nicht aufgenommen.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
title string? —
text string? —
kicker string? — Default „Kachel S/M/L“. Nur s, m, l.
icon IconId? "slot" Nur 05 Marke, 96px.
value string? "16" Nur 03 L, Proof.
unit string? "aktive Retainer" Nur 03 L.
<BentoTile variant="m" surface="nacht" />
<BentoTile variant="l" surface="paper" />

01 · S

Kleine Fläche

min-h-40, eine Spalte.

Nacht

Kachel S

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

Paper

Kachel S

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

02 · M

Standard

min-h-64.

Nacht

Kachel M

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

Paper

Kachel M

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

03 · L

Zwei Spalten, Proof unten

col-span-2, min-h-80.

Nacht

Kachel L

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

16 aktive Retainer

Paper

Kachel L

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

16 aktive Retainer

05 · Marke

Icon 96px als Visual

Eyecatcher, Satz unten.

Nacht

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.

Paper

Ein Slot

Vierzehn Tage. Eine Stimme. Kein Baukasten.