Skip to content
Aback UI

Block ยท Content

Article layout

A long-form page with meta bar, scoped typography, sticky contents, share links, and reading progress.

Beta7 componentsRegistry JSON (opens in a new tab)
the Article layout preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add article-layout

The block lands at components/blocks/article-layout.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Pass your rendered article as children. Plain h2, h3, p, lists, blockquotes, links, and inline code are styled inside the block only.
  • Give each h2 and h3 an id and list them in toc. Generate both from your Markdown or CMS headings so they cannot drift.
  • The contents aside appears when the block's container is at least 48rem wide (a container query), so it also works inside a narrow layout.
  • readingTime should come from the real word count. publishedAt renders as a stable absolute date, so cached pages do not change.

Accessibility

  • The article is labelled by its h1 and starts with breadcrumbs and a meta bar with a machine-readable time element.
  • The contents list is a nav landmark with aria-current=location on the section in view; on narrow screens it is a disclosure above the body.
  • The reading progress bar is decorative and hidden from assistive technology.
  • Body text is capped at 72 characters per line for readability.