Blog Article
AI Pass+layout#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 Blog Article
A responsive blog article layout with navigation, hero image, article body, sidebar with TOC/tags/related posts, related articles grid, and footer — skeleton wireframe, design-system agnostic.
Features
- Blog article page structure with 6 named regions (nav, hero, body, sidebar, related, footer)
- Content body with paragraph, heading, blockquote, and code block skeleton shapes
- Sidebar with table-of-contents, tag cloud, and related posts sections
- Related articles grid that adapts from 1 to 3 columns
- Footer with multi-column link grid
- Responsive breakpoints at 480px and 768px with grid reconfiguration
- Dark/light theme toggle with smooth CSS transitions
- All colors, spacing, and radii driven by design-system tokens
- Prefers-reduced-motion support for accessibility
- Cell accent colors computed via oklch color-mix from semantic palette tokens
Accessibility
- ARIA label
.bloggrid hasaria-label="Blog article layout"- Busy state
.blogstartsaria-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 Blog Article 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
Magazine
VanillaReact
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.
#magazine#responsive#design-tokens
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
Tri-Sidebar
ReactVanilla
A tri-sidebar app-frame layout — a full-width header and footer wrap a left nav rail, a central main surface, a status strip, and a right widgets aside. Regions reflow from a single mobile column to the full three-column frame, mobile-first and design-system agnostic.
#layout#grid#skeleton
Bento Dashboard
VanillaReact
A six-tile bento dashboard layout — an asymmetric `3fr 1fr 2fr` grid of unequal skeleton tiles with mixed row and column spans, a full-width hero, dark/light theme toggle, and full design-system token integration, mobile-first and design-system agnostic.
#layout#dashboard#skeleton
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
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
