Cards
Where to Use Bento Card in React Apps
Bento Card is a cycling 2×2 bento carousel with four 1:1 tiles per layout and opposite row slide directions. Teams ship it when feature storytelling needs motion and variety without a heavy video hero.
Where teams use Bento Card
Use case 1
Feature highlight bento
Marketing sections cycle capability tiles so four features share one footprint. Opposite row slides create visual energy without distracting copy.
Use case 2
App store style screenshot grid
Showcase product screens as square tiles that rotate through layouts. Motion keeps the section alive on long landing scrolls.
Use case 3
Integration logo mosaic
Partner logos and short captions fill the 2×2 slots. Cycling layouts prevent a static logo wall from going stale.
Use case 4
Docs concept gallery
Developer marketing explains primitives with illustrated tiles. Timed transitions pace comprehension better than a static grid.
Who it is for
Marketing UI engineers who want animated bento storytelling in React.
Try Bento Card on AkmanOS
Watch the opposite-row slides in the preview, then bring the markdown into your coding assistant to feed Bento Card your feature assets.
Preview /preview/bento-cardMore in Cards
- Add-ons & IntegrationsFilterable grid of integrations and premium add-ons with connect, upgrade, and status badges. Explore real product surfaces for the Add-ons & Integrations component — then open the live AkmanOS preview and copy production-ready source.
- Agent Limits CardContext window breakdown with segmented usage bar, expandable tool groups, and plan limit meters. Explore real product surfaces for the Agent Limits Card component — then open the live AkmanOS preview and copy production-ready source.
- AI Chat HeroCream grain landing hero with Acme nav, launch badge, Pro chat shell, model picker, and partner row. Explore real product surfaces for the AI Chat Hero component — then open the live AkmanOS preview and copy production-ready source.
- Capacity Allocation CardLabor capacity card with contribution-style segment bar, week/month/year range, queued orders, and member stack. Explore real product surfaces for the Capacity Allocation Card component — then open the live AkmanOS preview and copy production-ready source.