# Bento Skyline > 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. - Category: Layout - Frameworks: Vanilla, React + CSS, React + Tailwind - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: bento, grid, responsive, skeleton - Page: https://builder.atheros.ai/components/bento-skyline - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_bento_skyline/preview-8392e0db433a.webp ## Features - Eight named cells (hero, chart, stat-a, stat-b, image, list, quote, cta), each carrying its own authored region hue — amber, rose, cyan, lime, violet, green, blue, magenta - Five responsive layouts driven by viewport media queries: a single column, a two-column bento at 480px, a four-column grid with a 2×2 hero at 768px, a six-column skyline at 1024px and a twelve-column ultra-wide at 1280px with a tall stat A - Skeleton placeholders sized in `em` off one root unit so every bar, ring and chart column scales with the viewport without reflow jumps - Skyline chart whose twelve columns keep fixed percentage heights; the last four columns and a fourth list row only appear at 1280px with a rise-in animation - Hero brand row with the Atheros AI Builder mark and gradient wordmark; the wordmark hides with hysteresis when it cannot fit beside the mark and never renders clipped - Product URL that scales with the hero's container width via `cqw` units - Skeleton / content switch in a fixed top-right toolbar: a `role="switch"` button cross-fades every cell between placeholders and real copy, chart, stats, list, quote and CTA without changing any cell size - Real content mode: headline and copy, a labelled bar chart with a peak callout, a gradient illustration with caption, stat values with a trend pill and a 68% ring, a feature list, an attributed quote and a CTA button - CSS-only dark mode (`body.dark`) with lifted region-hue twins, no built-in theme toggle - Prefers-reduced-motion support for the cross-fade and the rise-in animation ## Accessibility - **Landmark** — The bento is a `
` inside `
`; the switch lives in a separate fixed toolbar outside `
` - **Headings** — Each cell is a `
` whose region tag is an `

`; the hero headline is an `

` - **Switch** — `