Wide Bento
AI Pass+layout#bento#grid-areas#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 Wide Bento
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.
Features
- Asymmetric
grid-template-areasbento — the hero banner and resilience analytics span wide horizontal bands while vision fills a tall right column - Five distinct regions: hero banner, resilience analytics, growth KPI, vision feed + media, engagement profile
- Rows grow to their content via
minmax(<min>, auto)so wide cells never clip — the page scrolls instead - Reflows from a single column to two, then a four-column wide bento at 480px and 768px
- Wide analytics region packs a 14-bar mini-bar chart with a tick axis and a metric legend
- Skeleton wireframe placeholders with color-mixed accents derived from design tokens
- All colors, spacing, and radii driven by design-system tokens
- Dark/light support via the
body.darkclass remap (CSS-only, no bundled toggle) - Prefers-reduced-motion support for accessibility
- Per-region accent colors computed via oklch color-mix from semantic palette tokens
Accessibility
- ARIA label
.bentogrid hasaria-label="Wide 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 Wide 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
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
Bento Grid
ReactVanilla
A responsive bento grid layout with asymmetric skeleton cells, dark/light theme toggle, and full design-system token integration — mobile-first and design-system agnostic.
#layout#bento#grid
Card Grid
VanillaReact
A responsive card-grid bento — thirteen skeleton cards, each a distinct anatomy (KPI, stat, usage, banner, team, article, media hero, profile, product, tasks) placed with named `grid-template-areas` that reflow across four breakpoints, mobile-first and design-system agnostic.
#layout#bento#grid-areas
Split Bento
VanillaReact
A split bento layout — two columns, each a self-contained asymmetric sub-grid with one wide tile and two half-width tiles, plus skeleton placeholders, a dark/light theme toggle, and full design-system token integration.
#layout#bento#grid
Nine-Cell Bento
ReactVanilla
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.
#layout#bento#grid
Asymmetric Quad
ReactVanilla
An asymmetric quad layout — four differently sized panels: an oversized hero, a nested stat/goals/spark trio, an avatar feed with captioned media, and a checkbox task panel. Skeleton wireframes driven by design tokens, reflowing from a 2×2 grid to a single column, mobile-first.
#layout#grid#bento
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
