The article component atlas

A complete set of building blocks

This is an article-format showcase. The people, observations, and values below are illustrative; this page does not report an Abel experiment or a model benchmark.¹

Each section demonstrates a different part of the current article format. A writer can keep using Markdown, while a designer can review the same kind of element across every article.

For a continuous reading experience, open From observation to intervention. To inspect individual elements, use the contents list on this page.

Paragraphs, emphasis, and inline code

A paragraph can include a strong conclusion, an aside with a different voice, an earlier interpretation, and a precise identifier such as intervention_set. These can also be combined: an important qualification, or a link with emphasis.

A deliberate line break keeps two lines together:
The second line remains part of this paragraph.

Long identifiers should wrap in prose: a_descriptive_identifier_for_an_observation_window_that_needs_to_remain_readable_on_a_small_screen.

中文也可以出现在正文中：一个清晰的问题，一组可检查的证据，以及一段解释。English and 中文 can share a paragraph without requiring an image of the text.

A heading hierarchy

The article title is the only H1. Sections use H2, and subsections use H3. Both appear in the contents list.

A fourth-level heading

Use this level to introduce one part of a subsection. Its smaller size keeps the reading hierarchy clear.

A fifth-level heading

A deeper note can still have a semantic heading without competing with the main sections.

A sixth-level heading

This is the smallest supported heading level. It remains part of the document hierarchy and stays out of the main contents list.

Lists with different jobs

Unordered and nested lists

• Start with a question.
• Gather evidence.
  • Record the observation window.
  • Keep the source and its context together.
    • Note which assumptions were checked.
• Explain what changed your interpretation.

Ordered and mixed lists

1. Define the question.
2. Describe the comparison.
   • Say what stays fixed.
   • Say what changes.
3. Read the evidence before writing the conclusion.

An ordered list can also continue from a later number:

4. Review the limitations.
5. Share the article for feedback.
6. Revisit it when there is new evidence.

A read-only review checklist

• State the question in a complete sentence.
• Provide descriptive text for figures.
• Ask a colleague to review the interpretation.
• Check the article on a phone.

These checkboxes demonstrate a static checklist. A reader cannot edit the source by clicking them.

Quotations and supporting context

A figure is most useful when the reader knows what to look for before seeing it.

A second paragraph can extend the same thought without becoming a new block.

A nested quotation can distinguish a question from its response:

Review question: What would change this interpretation?

Example response: A different observation window, an unmeasured influence, or evidence that the proposed change cannot be applied consistently.

Links and references

A link can point to an external reference, the article list, a figure in this article, or a bundled text file.

Reference-style links work as well: read the renderer documentation, then return to the original format example. A link remains a link when its label is long enough to wrap onto another line on a narrow display.

Images and figures

A standard Markdown image

The following uses ordinary image syntax. Its alt text describes the picture but does not become a visible caption.

A figure with a caption and reference

This separate figure has a visible caption and its own anchor. Follow the figure reference to return to it later.

Tables, alignment, and overflow

A compact comparison

The source markers define left, center, and right alignment. Emphasis and inline code can appear inside a cell.

The numbers are layout examples only.²

A wider table

This table intentionally has enough columns to need horizontal scrolling on a phone. The scroll stays inside the table area.

Code in several forms

All code and output here is static article content. The page does not run the snippets.

A named Python fence

questions = ["What changed?", "What stayed fixed?", "What is uncertain?"]
for index, question in enumerate(questions, start=1):
    print(f"{index}. {question}")

TypeScript and JSON

type ReviewNote = {
  question: string;
  status: "draft" | "reviewed";
};

const note: ReviewNote = {
  question: "What evidence would change our interpretation?",
  status: "draft",
};

{
  "kind": "format-example",
  "observations": 3,
  "measured_result": false
}

Shell text and a fence without a language

# Example commands for a local article preview.
npm run content:check
npm run dev -- --port 43187

No language was specified for this fence.
    Indentation is preserved.
Long source lines stay intact and can scroll within the code block: question -> observation -> comparison -> qualification -> explanation -> next question.

A source-and-output pair

questions = ["What changed?", "What stayed fixed?", "What is uncertain?"]
print(f"Review questions: {len(questions)}")

Review questions: 3

A bundled source file

These blocks read the files that travel with this article. The output is recorded text supplied by the author.

questions = ["What changed?", "What stayed fixed?", "What is uncertain?"]
print(f"Review questions: {len(questions)}")

Review questions: 3

A language without highlighting

An unknown language falls back to readable text and displays a notice. The original content remains visible.

question "What changed?"
  observe "before"
  compare "after"
  keep "uncertainty visible"

Expandable supporting material

assert len(["question", "evidence", "explanation"]) == 3

Repeated headings and footnotes

A recurring question

The first occurrence gets its own section anchor. A footnote can add background without interrupting the main paragraph.³

A recurring question

The second occurrence receives a different anchor, so both sections remain reachable from the contents list. The same footnote can be referenced again.³

A divider separates the closing note. This article demonstrates all element types currently supported by the article system; mathematical notation, video embeds, and interactive chart/demo blocks are not part of this version.