42 lines
851 B
Markdown
42 lines
851 B
Markdown
|
# bento-grid
|
||
|
|
|
||
|
|
Modular grid layout with varied cell sizes, like a bento box.
|
||
|
|
|
||
|
|
## Structure
|
||
|
|
|
||
|
|
- Grid of rectangular cells
|
||
|
|
- Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
|
||
|
|
- No strict symmetry required
|
||
|
|
- Hero cell for main point
|
||
|
|
- Supporting cells around it
|
||
|
|
|
||
|
|
## Best For
|
||
|
|
|
||
|
|
- Multiple topic overview
|
||
|
|
- Feature highlights
|
||
|
|
- Dashboard summaries
|
||
|
|
- Portfolio displays
|
||
|
|
- Mixed content types
|
||
|
|
|
||
|
|
## Visual Elements
|
||
|
|
|
||
|
|
- Clear cell boundaries
|
||
|
|
- Varied cell backgrounds
|
||
|
|
- Icons or illustrations per cell
|
||
|
|
- Consistent padding/margins
|
||
|
|
- Visual hierarchy through size
|
||
|
|
|
||
|
|
## Text Placement
|
||
|
|
|
||
|
|
- Main title at top
|
||
|
|
- Cell titles within each cell
|
||
|
|
- Brief content per cell
|
||
|
|
- Minimal text, maximum visual
|
||
|
|
- CTA or summary in prominent cell
|
||
|
|
|
||
|
|
## Recommended Pairings
|
||
|
|
|
||
|
|
- `craft-handmade`: Friendly overviews (default)
|
||
|
|
- `corporate-memphis`: Business summaries
|
||
|
|
- `pixel-art`: Retro feature grids
|