# Magazine

> An editorial magazine wireframe — masthead header, section nav, dual article rails, a featured lead story with popular posts, a most-read list with pull-quote, and footer. Skeleton-only, mobile-first, design-system agnostic.

- Category: Layout
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Dark mode: no
- Access: free (sign in to copy the code)
- Tags: magazine, responsive, design-tokens, editorial, grid, skeleton
- Page: https://builder.atheros.ai/components/magazine
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_magazine/preview-3531ec237450.webp

## 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

## Common questions

**Which frameworks is Magazine available in?**

Magazine ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Magazine layout component free?**

Yes. Magazine is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Magazine support dark mode?**

Magazine ships a single light theme.

## Get the code

Preview Magazine live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/magazine

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt