Asymmetric Quad

Features

• Four asymmetric panels (A hero, B stat/goals/spark, C feed/media/profile, D task checklist), each a distinct skeleton role
• Two panels (B and C) nest their own asymmetric sub-grids via grid-template-areas
• Reflows from a 2×2 quad to a single stacked column at the 640px breakpoint
• Rows grow to content (minmax(18rem, auto)) so tiles never clip — the page scrolls instead of squashing
• Skeleton wireframe placeholders with color-mixed accents derived from design tokens
• Per-panel accent colors computed via oklch color-mix from semantic palette tokens
• Dark mode ready via a body.dark class (no bundled toggle — this is a static component)
• All colors, spacing, and radii driven by design-system tokens, with prefers-reduced-motion support

Accessibility

ARIA label

.bento grid has aria-label="Asymmetric quad layout"

Busy state

.bento starts aria-busy="true" and is cleared to false by markReady() once rendered

Reduced motion

prefers-reduced-motion: reduce kills all animations and transitions

Focus-visible

Interactive focus styling relies on :focus-visible from the design tokens

Dynamic viewport

Uses 100dvh for proper mobile viewport height

Customise it with AI

Open Asymmetric Quad 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.