Class Reference
Bento
Class Reference
Bento
A responsive grid with named tile roles.
How to use
Apply bento to the grid parent and a bento-* role to each direct tile. Each role owns its spans and order, so avoid conflicting grid-span or order classes.
Responsive behavior
Bento has base, tablet and mobile rules. Tile spans and order change at tablet and mobile breakpoints; preview all three widths after editing tile content.
Visual reference
Live examples use the installed classes and your design variables. The grid below shows how the tile roles work together.
Live Bento example
Live dashboards
Every number updates by itself.
Automations
Hand routine steps to rules that never forget.
Comments
Talk about the work where it happens.
2x
Faster reporting for most teams
Templates
Start from a setup that already works.
Ready when you are
Set up your first project in minutes.
.bento · .bento-feature · .bento-story · .bento-note · .bento-metric · .bento-gallery · .bento-cta