Bento Grid
Modular. Organized. Rounded corners. Content-first layout.
01 — The Cards
Basic Cell
Standard bento cell. rounded-3xl. Smooth containment.
Highlight Cell
Primary brand color background. High hierarchy.
System Status
CPU Load
Memory
DiskFULL
Activator Code:
css
1
2
3
.style-bento-card {
@apply bg-white rounded-3xl p-8 shadow-sm hover:shadow-md transition-shadow;
}
02 — The Buttons
Activator Code:
css
1
2
3
.style-bento-btn-primary {
@apply px-6 py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-colors;
}
03 — The Input
Secure
Port 8080Activator Code:
css
1
2
3
.style-bento-input {
@apply w-full h-12 bg-gray-50 rounded-xl px-4 font-medium text-slate-800 focus:bg-white focus:ring-2 focus:ring-brand-primary/20 outline-none transition-all;
}
04 — The Table
| ID | User | Role | Status |
|---|---|---|---|
| #001 | Neo | The One | Active |
| #002 | Trinity | Admin | Active |
| #003 | Smith | Agent | Rogue |
Activator Code:
css
1
2
3
.style-bento-table {
@apply w-full bg-white rounded-3xl shadow-sm overflow-hidden;
}
05 — The Modal
System Failure
Critical error detected in Sector 7G. Initiate protocol Omega?
Activator Code:
css
1
2
3
.style-bento-modal {
@apply bg-white p-10 rounded-[2.5rem] shadow-xl relative;
}