Layouts · Content display
Article Layout
Also called: Reading layout, Blog post layout, Article page, Long-form layout
A page designed for reading long text. The body stays in a fairly narrow column, with heading levels, paragraph spacing and a table of contents so long content isn't tiring to read.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstThis is the detail page for a long article. Please use an article layout: one body column, max width 680px, centered, 16px font size, 1.8 line height and 1em between paragraphs. At the top, put a big title, the author and the publish date. Use h2 and h3 for subheadings in the body, and make images the same width as the body text. On desktop, add a sticky table of contents on the right that highlights the section being read.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Article Layout is what you need.
Use Article Layout when
- The content is long, continuous text that users read from start to finish
- The article is long with several levels of subheadings, so a table of contents helps people jump around
- Reading-focused pages with almost no action buttons
Pick something else when
The content is many records with the same structure that users scan and pick from
Use insteadList ViewThe page is mainly about filling in fields and taking actions
The content is mostly images or video and the text only plays a supporting role
Use insteadGalleryThere are only one or two short paragraphs of explanation
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
No max width on the body, so on a large screen a single line runs on for dozens of words
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
The line height is too small and there's no space between paragraphs, so the whole screen becomes one solid block of text
- 03
Messy heading levels, with subheadings almost the same size as the body text
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
The title and meta info at the top, then a fixed-width body column made up of subheadings, paragraphs and images in order. On desktop, a sticky table of contents can sit on the right.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The article layout is for blog posts, docs, news and help center articles. At the top is a big title plus meta info like the author and date. Below is the body, with subheadings, images, quotes and code blocks mixed in. On desktop there's often a sticky table of contents (anchor navigation) on the right, and clicking an entry jumps to that section.
The most important thing is the body width: keep lines to about 60–75 characters (roughly 640–720px), use a line height of 1.7–1.8, and leave clear space between paragraphs. If lines are too long, the eye easily loses its place when moving to the next line. If lines are too tight, people give up reading.
The difference from a Single Column Layout: a single column layout only defines the page structure, while an article layout also defines typography details like font size, line length, line height and heading levels. The goal is to let people comfortably read thousands of words.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-article- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
article.markdown-body.prose
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026