Nine-Cell Bento
AI Pass+layout#bento#grid#skeleton
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Layout component
About Nine-Cell Bento
A nine-cell bento layout with corner-and-center emphasis — four small corner accents and four paired content cells flanking a large 2×2 central hero, plus skeleton placeholders, CSS-only dark mode, and full design-system token integration.
Features
- Nine named cells (left-top, main-top-left, main-top-right, right-top, main, left-bottom, main-bottom-left, main-bottom-right, right-bottom)
- Corner-and-center emphasis: four corner accents wrap a large 2×2 central hero cell on desktop
- Each cell carries its own hue — in a bento the cell's identity is the message
- Skeleton wireframe placeholders: bars, blocks, ruled chart panels, avatar dots, and pills
- Three-breakpoint reflow at 480px and 768px with full grid reconfiguration
- CSS-only dark mode (
body.dark) with smooth CSS transitions - All colors, spacing, and radii driven by design-system tokens
- Prefers-reduced-motion support for accessibility
- Cell accent colors computed via oklch color-mix from semantic palette tokens
Accessibility
- ARIA label
.bentogrid hasaria-label="Nine-cell bento layout"- Busy state
.bentostartsaria-busy="true"and is cleared tofalsebymarkReady()once rendered- Reduced motion
prefers-reduced-motion: reducekills all animations and transitions- Focus-visible
- Interactive focus styling relies on
:focus-visiblefrom the design tokens - Dynamic viewport
- Uses
100dvhfor proper mobile viewport height
Customise it with AI
Open Nine-Cell Bento in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the layout is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Dual Sidebar Widgets
ReactVanilla
A responsive dual-sidebar layout wireframe with header, twin sidebars, main content area, widget and statistics panels, and footer — skeleton placeholders, CSS-only dark mode (`body.dark`), and full design-system token integration.
#layout#sidebar#grid
Wide Bento
ReactVanilla
A wide-bento layout — five broad horizontal skeleton cells (hero banner, analytics chart, KPI, feed, profile) on an asymmetric `grid-template-areas` grid that reflows from one column to a four-column wide bento, mobile-first and design-system agnostic.
#layout#bento#grid-areas
Bento Skyline
VanillaReact
An eight-cell bento — hero, skyline chart, image, two stats, list, quote and CTA — that rebuilds its grid-template-areas at 480, 768, 1024 and 1280px, keeps its own eight-hue region palette in light and dark, and switches between skeleton placeholders and real content from a fixed toolbar.
#bento#grid#layout
Holy Grail Layout
VanillaReact
A CSS grid holy grail layout with six skeleton wireframe regions (header, nav, aside-left, main, aside-right, footer), colored dashed borders, container queries for fluid sidebars, and full design-system token integration.
#layout#grid#skeleton
Bento Stats
VanillaReact
A responsive 12-cell stats bento — workspaces, emails, PRs, brand, runs, contacts, records, deploy, timeline, uptime, api and storage skeleton cells on a `grid-template-areas` layout that reflows from one column to a four-column bento, mobile-first and design-system agnostic.
#layout#bento#skeleton
Expanding Bento
VanillaReact
A seven-tile lifestyle bento on grid-template-areas: tap a tile and it takes the 2×2 hero slot while the others reflow, animated with View Transitions. Five container-query tiers from one to five columns, flat tinted tiles, light and dark.
#layout#bento#grid
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
