# Bento & Grids

> Bento layouts, masonry walls, spotlight card grids, filterable directories and rearrangeable dashboard grids.

- [Bento Grid](https://www.assembli.design/components/bento-grid.md): The bento layout primitive: a dense grid plus cards that span columns and rows, with an icon, eyebrow, title, description and a visual stacked above, laid behind or set beside the text (by the card's own width). Four tones, a soft light that follows the pointer, and link cards whose arrow nudges on hover.
- [Dashboard Grid](https://www.assembli.design/components/dashboard-grid.md): A widget dashboard you can rearrange. Drag a handle and the other widgets slide out of the way, or focus it, press Space and use the arrow keys (Escape puts it back). Each widget's menu resizes it (small, medium, tall, large, wide) or removes it, with every change announced. Controlled or uncontrolled.
- [Expanding Card Grid](https://www.assembli.design/components/expanding-card-grid.md): A grid of cards that each open into a full view. The card grows into a centered panel, its picture and title travelling with it, while the page dims. Closing shrinks it back into its slot. The open card is a modal dialog: focus moves in and stays there, and Escape, the close button or a click outside closes it.
- [Feature Bento](https://www.assembli.design/components/feature-bento.md): A landing-page features section of five bento cards, each a small working picture of its feature: a deploy log that builds and ships branches, a traffic chart that draws in, a search box that types queries, live cursors over a comment, and a 30-day uptime strip. Animations start in view and stop under reduced motion.
- [Filterable Grid](https://www.assembli.design/components/filterable-grid.md): A directory grid for templates, integrations or work: filter pills with live counts, a search box that "/" jumps to, and a sort menu. Cards slide into place as the results change, and an empty state offers a way back. Generic over any item type with render and accessor props.
- [Masonry Grid](https://www.assembli.design/components/masonry-grid.md): A masonry wall that drops each item into the shortest column, in order, so reading and tab order still run top to bottom. Column count follows the container's width, items are re-placed when one resizes, and they glide to new spots. CSS columns cover the first paint, so there's no jump. Demo: a moodboard with load more.
- [Spotlight Grid](https://www.assembli.design/components/spotlight-grid.md): A grid of feature cards lit by one light that follows the pointer: it catches the borders of every card in reach, so neighbouring edges glow as you move between them, and softly washes the card beneath. Set its color and reach, and a resting position for when the pointer leaves.
- [Stats Bento](https://www.assembli.design/components/stats-bento.md): A "by the numbers" bento built from data: a trend card with a smooth chart you can hover or arrow through, a progress ring, quarter bars, a big number with details, a crowd of avatars and a customer quote. Every number counts up once as it scrolls into view.
- [Bento Features](https://www.assembli.design/components/bento-features.md): Responsive bento grid for feature overviews with wide and tall cards, icons and optional per-card visuals.

Back to [all components](https://www.assembli.design/components.md).