Asymmetric, magazine-style layouts inspired by Japanese bento boxes

⟩ Size Variants

Mix and match these sizes to create dynamic layouts.

.bento-sm 1×1
.bento-sm 1×1
.bento-md 2×1
.bento-tall 1×2
.bento-lg 2×2
.bento-sm 1×1
.bento-wide 3×1
.bento-sm 1×1

⟩ Hero & Extra Large

.bento-hero Full width, 2 rows — Perfect for featured content
.bento-xl 3×2 — Great for important highlights
.bento-tall 1×2

⟩ Color Variants

Default .bento-item
Primary .bento-primary
Secondary .bento-secondary
Tertiary .bento-tertiary
Glass .bento-glass
Gradient .bento-gradient
Featured .bento-featured (glowing)
Combined .bento-featured + .bento-secondary

⟩ Dashboard Example

📊
12.5K
Total Views
👥
3.2K
Subscribers
📝
48
Articles
⚡
94%
Engagement

Traffic Overview

Recent Activity

New subscriber 2m
Article published 15m
Comment received 1h
New subscriber 2h

Quick Actions

⟩ News Grid Example

🔥 Breaking

Major AI Breakthrough Announced

Researchers achieve new milestone in artificial general intelligence development...

5 min read • 2h ago
📚 Tutorial

Getting Started with Prompt Engineering

8 min • Today
⚖️ Comparison

GPT-5 vs Claude 4: Which is Better?

12 min • Yesterday
News
OpenAI Updates
Review
New AI Tools
Guide
Best Practices

⟩ Usage

<div class="bento">
  <div class="bento-item bento-lg bento-featured">Featured</div>
  <div class="bento-item bento-md">Medium</div>
  <div class="bento-item bento-tall bento-secondary">Tall</div>
  <div class="bento-item bento-sm">Small</div>
  <div class="bento-item bento-wide bento-glass">Wide</div>
</div>

Size Classes

.bento-sm1×1 .bento-md2×1 .bento-lg2×2 .bento-wide3×1 .bento-tall1×2 .bento-xl3×2 .bento-hero4×2 .bento-fullFull width

Style Classes

.bento-primaryRust gradient .bento-secondaryTeal gradient .bento-tertiaryAmber gradient .bento-glassGlass morphism .bento-gradientNebula gradient .bento-featuredGlowing border