11 lines
685 B
Markdown
11 lines
685 B
Markdown
---
|
|
name: bento-grid-architecture
|
|
description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
|
|
---
|
|
|
|
# Bento Grid Architecture Guidelines
|
|
|
|
* **Non-Linear Layouts:** Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (`grid-cols-1 md:grid-cols-3`) mit unterschiedlichen Box-Breiten (`md:col-span-2` vs. `md:col-span-1`).
|
|
* **Content-Mix Rule:** Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons).
|
|
* **Visual Anchor:** Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert).
|