Khối

Article layout

Brand block: front-page link, kicker, headline, standfirst and byline, body column, At a glance aside, pull quote and Keep reading.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

The Eloquent · Front page

Field notes · November 2026

Rules, not boxes: a newspaper of record, in code

How a component kit borrows its structure from the front page: hairlines, heavy rules and two voices of type.

By Minh Pham · 9 November 2026 · 6 min read

A newspaper never draws a box around a story. It opens each section with a heavy rule, separates stories with a hairline, and lets the type do the rest. The kit follows the same discipline.

Every headline has two voices: a roman lead and an italic tail. The first tells the reader what the story is; the second tells them why to stay. Both are set in the same face, so the page keeps one tone.

Colour is absent by design. Errors, successes and warnings are told apart by an icon, a rule or a hatched band, never by hue alone, which keeps the page readable in print and in greyscale.

Read it in serif, use it in sans.

Minh Pham, on the type rule

Install

bash

npx shadcn add @eloquent/article-layout

It installs headline, kicker and stat-tile with it. The file lands in components/blocks/article-layout.tsx.

Usage

tsx

import { ArticleLayout } from "@/components/blocks/article-layout";

<ArticleLayout
  frontPage={{ href: "/", label: "The Eloquent · Front page" }}
  kicker="Field notes · November 2026"
  lead="Rules, not boxes:"
  tail="a newspaper of record, in code"
  standfirst="How a component kit borrows its structure from the front page."
  byline="By Minh Pham · 9 November 2026"
  atAGlance={{ label: "At a glance", items: [a, b, c] }}
  pullQuote={{ quote: "Read it in serif, use it in sans.", attribution: "Minh Pham" }}
  keepReading={{ label: "Keep reading", items: [{ href: "/docs/components/headline", lead: "Two voices," }] }}
>
  <p>The body column.</p>
</ArticleLayout>

The aside, pull quote, front-page link and further reading are optional.

States

Minimal

Only what the story needs

The aside, the pull quote, the front-page link and the further reading are all optional.

By Minh Pham

With no aside the body column keeps its reading width and the page stays a single column.

Part	Treatment
Header	A heavy rule, then kicker, `h1`, serif standfirst and sans byline
Body	Source Serif 4, 18px, capped at 42rem
Aside	`At a glance` heading and three stat tiles; sits beside the body from `lg`, below it under
Pull quote	Playfair italic between a heavy rule and a hairline; the author's own line
Keep reading	A heavy rule, then headline links in two columns from `md`

Keyboard

Key	Action
Tab	Moves through the front-page link, then each "Keep reading" link, in page order
Enter	Follows the focused link

Vietnamese

The Eloquent · Trang nhất

Ghi chép · Tháng 11/2026

Đường kẻ, không phải khung: một tờ báo lưu trữ, viết bằng mã

Bộ thành phần mượn cấu trúc từ trang nhất của tờ báo như thế nào: đường kẻ mảnh, đường kẻ đậm và hai giọng chữ.

Bởi Minh Pham · 09/11/2026 · 6 phút đọc

Tờ báo không bao giờ vẽ khung quanh một bài viết. Nó mở mỗi chuyên mục bằng một đường kẻ đậm, ngăn các bài bằng đường kẻ mảnh, rồi để chữ làm phần còn lại. Bộ thành phần này theo cùng một kỷ luật.

Mỗi tiêu đề có hai giọng: phần dẫn chữ đứng và phần đuôi chữ nghiêng. Phần đầu cho người đọc biết bài viết về gì; phần sau cho họ biết vì sao nên ở lại. Cả hai cùng một phông chữ, nên trang giữ một giọng điệu.

Màu sắc vắng mặt có chủ đích. Lỗi, thành công và cảnh báo được phân biệt bằng biểu tượng, đường kẻ hoặc dải gạch chéo, không bao giờ chỉ bằng sắc độ, nên trang vẫn dễ đọc khi in và khi chuyển sang thang xám.

Đọc bằng chữ có chân, dùng bằng chữ không chân.

Minh Pham, về quy tắc chữ

Ink adaptation

Brand block with no upstream. Rules, not boxes: heavy and hairline rules separate the parts, the stat tiles are the only grounds, and the pull quote is set in type alone.