Magazine

Features

• Editorial grid-template-areas layout — header, section nav, left/main/right columns, and full-width footer
• Six labelled regions (header, nav, left rail, main, right rail, footer), each with its own accent hue
• Header with logo dots, a title bar and a dashed search capsule; nav with a highlighted pill, three section pills and a trailing pill
• FEATURED story (banner image, title bar with a tag pill, dek bar) over a POPULAR POSTS row of image cards — three across, stacked at phone width
• Skeleton wireframe placeholders with color-mixed accents derived from design tokens
• Both side rails hold three thumbnail-and-title article cards that share the rail height; rows grow to their content so nothing clips
• Reflows from a single-column mobile stack to a three-column magazine layout at 640px
• All colors, spacing, and radii driven by design-system tokens, with prefers-reduced-motion support

Accessibility

Landmarks

Root .bento is a plain grid div (aria-busy only); the cells are <header>, <nav>, <aside> (LEFT-SIDE, RIGHT-SIDE), <main> and <footer>, each aria-labelledby its .cell__tag <h2>; inside MAIN the feature is an <article> and popular posts a <section>, labelled by their .mag-feat-tag <h3>

Headings and lists

The nav pills, both rails' article cards and the popular cards (<li><article>) are <ul> lists

Skeleton exposure

Every skeleton shape and list is aria-hidden="true" — only the landmarks, the tag headings and the FEATURED / POPULAR POSTS headings are exposed

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 Magazine 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.