Article Component Showcase

This page is a writing and design sample. Sample Author A, Sample Author B, and their affiliations are invented examples of metadata, not research authorship. All counts are demonstration values. Code and recorded output are static text; the website does not execute them.

Each numbered section names the actual component, shows two or three supported content structures, and provides the Markdown that produces them. Open a “Markdown source” disclosure to copy a complete example. These disclosures work without JavaScript. The examples use one shared article style: changing content structure does not select another CSS skin.

Read the 中文版本 or download the sample attachment. This showcase appears in both the English and Chinese Research lists.

01 · Heading (H2–H6)

Heading establishes the document hierarchy. The page title supplies H1. Body H2 and H3 headings enter ArticleContents; H4–H6 retain their semantics without adding main contents entries.

Effect A — a main section and a subsection

A question within this section

A subsection gives one part of the question a clear name.

The H2 at the start of this group is the main-section example; it is not duplicated below.

## 01 · Heading (H2–H6)

### A question within this section

A subsection gives one part of the question a clear name.

Effect B — deeper supporting headings

Review scope

The review covers the wording.

A supporting distinction

Separate an observation from an interpretation.

A final detail

Keep the original source available.

#### Review scope

The review covers the wording.

##### A supporting distinction

Separate an observation from an interpretation.

###### A final detail

Keep the original source available.

02 · Paragraph

Paragraph controls ordinary prose and the space between paragraphs. Blank lines create separate paragraphs; a newline inside a source paragraph normally remains part of that paragraph.

Effect A — one compact paragraph

A useful article begins with a specific question. This short paragraph leaves the next decision easy to find.

A useful article begins with a specific question. This short paragraph leaves the next decision easy to find.

Effect B — a connected pair of paragraphs

The first paragraph states what the reader can inspect: a question, its context, and the evidence used to discuss it.

The second paragraph explains the limit. The sample illustrates a reading structure and makes no claim about a measured result.

The first paragraph states what the reader can inspect: a question, its context, and the evidence used to discuss it.

The second paragraph explains the limit. The sample illustrates a reading structure and makes no claim about a measured result.

Effect C — multilingual prose

A reviewer can write “先看证据，再读结论” alongside an English explanation. Both languages remain selectable text in the same paragraph.

A reviewer can write “先看证据，再读结论” alongside an English explanation. Both languages remain selectable text in the same paragraph.

03 · Strong / Emphasis / Strikethrough

Strong, Emphasis, and Strikethrough are the real inline components in TextFormatting. They express importance, a change of voice, or an explicitly superseded phrase within the shared typography.

Effect A — importance

Keep the review question visible before presenting the evidence.

Keep **the review question** visible before presenting the evidence.

Effect B — emphasis

The note is provisional until the source has been checked.

The note is _provisional_ until the source has been checked.

Effect C — a revision with combined emphasis

Replace a proven result with an illustrative comparison.

Replace ~~a proven result~~ with **_an illustrative comparison_**.

04 · InlineCode

InlineCode distinguishes a literal identifier or value inside prose. It is text, not an input field or an executable expression.

Effect A — a field and its value

Set visible to false while reviewing the draft.

Set `visible` to `false` while reviewing the draft.

Effect B — a sequence of identifiers

Inspect question_id, compare review_status, then preserve source_reference.

Inspect `question_id`, compare `review_status`, then preserve `source_reference`.

05 · Lists

Lists maps unordered lists, ordered lists, and list items to their semantic components. Nesting communicates hierarchy; an explicit starting number can continue a sequence.

Effect A — unordered hierarchy

• Frame the question.
• Inspect the material.
  • Keep source context.
  • Record uncertainty.
    • Note an untested assumption.
• Review the explanation.

- Frame the question.
- Inspect the material.
  - Keep source context.
  - Record uncertainty.
    - Note an untested assumption.
- Review the explanation.

Effect B — an ordered continuation

4. Review the figure description.
5. Check the table labels.
6. Revisit the conclusion.

4. Review the figure description.
5. Check the table labels.
6. Revisit the conclusion.

Effect C — ordered steps with supporting bullets

1. Define the comparison.
   • Name the reference case.
   • State what changes.
2. Describe the limits.
3. Ask for review.

1. Define the comparison.
   - Name the reference case.
   - State what changes.
2. Describe the limits.
3. Ask for review.

06 · TaskCheckbox

TaskCheckbox renders checked and unchecked task items as disabled, read-only checkboxes. Readers can inspect the checklist; clicking does not edit the article.

Effect A — mixed review states

• State the question.
• Describe the image.
• Check the wording on a phone.

- [x] State the question.
- [x] Describe the image.
- [ ] Check the wording on a phone.

Effect B — grouped checks

• Editorial review
  • Confirm the example is labeled.
  • Read the complete draft.
• Design review
  • Inspect the narrow-screen table.

- Editorial review
  - [x] Confirm the example is labeled.
  - [ ] Read the complete draft.
- Design review
  - [ ] Inspect the narrow-screen table.

07 · Link

Link provides ordinary navigation with the shared hover and keyboard-focus treatment. Use descriptive labels for site pages, external references, local anchors, and this article’s attachments.

Effect A — site and language navigation

Browse Research or open this article’s Chinese version.

Browse [Research](/research/) or open this article’s [Chinese version](/zh/research/article-component-showcase/).

Effect B — an external reference and an in-page target

Read the W3C page structure tutorial and jump to Figure 2.

Read the W3C [page structure tutorial](https://www.w3.org/WAI/tutorials/page-structure/) and jump to [Figure 2](#fig-review-context).

Effect C — a local attachment

Download the sample review notes to inspect a plain-text attachment.

Download the [sample review notes](./assets/review-notes.txt) to inspect a plain-text attachment.

08 · Blockquote

Blockquote sets a passage apart from the surrounding prose. The quotations below are invented editorial examples, with single-paragraph, multi-paragraph, and nested structures.

Effect A — a short quotation

A clear question gives the evidence a place to land.

> A clear question gives the evidence a place to land.

Effect B — two paragraphs in one quotation

Describe what the reader should notice.

Then explain what the image cannot establish.

> Describe what the reader should notice.
>
> Then explain what the image cannot establish.

Effect C — a quotation with a nested response

Review question: What would change this interpretation?

A different source or an untested assumption could change it.

> Review question: What would change this interpretation?
>
> > A different source or an untested assumption could change it.

09 · Image

Image displays an ordinary Markdown image without an automatically visible caption. The current shared style fills the available reading width and preserves the source ratio. A small source is therefore enlarged; source dimensions are not a display-size control.

Effect A — a landscape source (720 × 360)

![Three different-height sample columns share a baseline.](./assets/landscape.svg)

Effect B — a portrait source (360 × 480)

![Three numbered steps are stacked vertically and connected by arrows.](./assets/portrait.svg)

Effect C — a small source (160 × 100)

This example exposes the existing full-width behavior. It does not request a thumbnail variant.

![A circle and a square form a compact sample image.](./assets/small.svg)

10 · Figure / FigureCaption

The figure extension combines Figure and Image with an optional FigureCaption. Captions and numbering are written by the author. An optional unique id allows a direct reference.

Effect A — a short caption

::figure{src="./assets/landscape.svg" alt="Three sample columns rise from one baseline." caption="Figure 1. A compact layout comparison." id="fig-compact"}

Effect B — a longer caption with a cross-reference

Return to Figure 1 or link directly to Figure 2.

::figure{src="./assets/landscape.svg" alt="Three invented columns have different heights on the same baseline." caption="Figure 2. These columns demonstrate the space needed by a longer caption. Their heights are invented layout values, without units or experimental meaning; the figure supports a writing example rather than a quantitative conclusion." id="fig-review-context"}

[Return to Figure 1](#fig-compact) or [link directly to Figure 2](#fig-review-context).

Effect C — figure semantics without a caption

::figure{src="./assets/small.svg" alt="A circle beside a square illustrates a small source image."}

11 · Table / TableCaption

Table renders GFM tables, including left, center, and right cell alignment. The table extension adds a native TableCaption. On narrow screens a wide table scrolls inside its own region.

Effect A — no caption, with three alignments

| Item         | Mark | Count |
| :----------- | :--: | ----: |
| **Question** | `Q`  |     3 |
| _Review_     | `R`  |    12 |

Effect B — a captioned compact table

:::table{caption="Table 1. Illustrative review states"}

| Stage    | Status    |
| :------- | :-------- |
| Framing  | Ready     |
| Evidence | In review |

:::

Effect C — a wider comparison

:::table{caption="Table 2. Demonstration values for a wider layout"}

| Stage   | Main question           | Material                  | Example owner   | Review state | Example count |
| :------ | :---------------------- | :------------------------ | :-------------- | :----------: | ------------: |
| Frame   | What is being compared? | A short question          | Sample Author A |    Ready     |             3 |
| Inspect | What can be checked?    | A figure and source notes | Sample Author B |     Open     |            12 |

:::

12 · CodeBlock

CodeBlock displays fenced code with optional language highlighting and a quoted title. Long lines scroll locally. The following fences demonstrate a named Python snippet, other supported languages, and a plain-text fallback; none runs on the page.

Effect A — named Python code

questions = ["Frame", "Inspect", "Review"]
for question in questions:
    print(question)

```python title="review.py"
questions = ["Frame", "Inspect", "Review"]
for question in questions:
    print(question)
```

Effect B — TypeScript and JSON

type Review = { stage: string; checked: boolean };
const review: Review = { stage: "Frame", checked: false };

{ "stage": "Frame", "checked": false }

```typescript title="review.ts"
type Review = { stage: string; checked: boolean };
const review: Review = { stage: "Frame", checked: false };
```

```json title="review.json"
{ "stage": "Frame", "checked": false }
```

Effect C — unknown language, preserved as plain text

question: What can the reader inspect?
status: illustrative

An unknown language retains its content and uses the existing plain-text fallback. It does not add a new language grammar.

```review-notes title="review.notes"
question: What can the reader inspect?
status: illustrative
```

13 · CodeExample

The code-example extension renders the actual CodeExample component, grouping one source fence with an optional author-supplied output fence. Output is recorded text, not a calculation performed by the website.

Effect A — source and recorded output

print(3)

3

:::code-example{title="A small calculation"}

```python
print(3)
```

```text
3
```

:::

Effect B — source with no output

const label = "Ready for review";

:::code-example{title="A review label"}

```javascript
const label = "Ready for review";
```

:::

14 · code-file → CodeBlock

code-file is a supported authoring directive that reuses CodeBlock; there is no separate “CodeFile” component. It reads a UTF-8 file from this article’s assets during content preparation and displays the text without executing it.

Effect A — read a Python file

"""Static article sample. The website displays this file without running it."""

questions = ["Frame", "Inspect", "Review"]

for number, question in enumerate(questions, start=1):
    print(f"{number}. {question}")

::code-file{src="./assets/example.py" language="python" title="example.py"}

Effect B — read a JSON file

{
  "kind": "article-layout-sample",
  "steps": ["Frame", "Inspect", "Review"],
  "experimentalResult": false
}

::code-file{src="./assets/example.json" language="json" title="example.json"}

15 · Details / Summary

The details extension renders native Details and Summary components. The title is plain text; the body accepts Markdown. Both keyboard operation and expansion work without JavaScript. Keep the closing colon line separate, with a blank line before and after it.

Effect A — a short supporting note

:::details{title="Why keep a source note?"}

A source note preserves **context** without interrupting the main paragraph.

:::

Effect B — a note with a list and a captioned table

The outer container uses four colons so the inner three-colon table can close independently.

::::details{title="Review the supporting material"}

- Check the question.
- Keep the source context.

:::table{caption="A supporting review table"}

| Check          | State |
| :------------- | :---- |
| Source label   | Ready |
| Interpretation | Open  |

:::

::::

16 · Footnotes

Footnotes and FootnoteReference place supporting notes at the end of the article. Different notes have separate definitions; repeated references to one note receive separate return links.

Effect A — two different notes

A count needs context.¹ A role label also needs context.²

A count needs context.[^counts] A role label also needs context.[^roles]

[^counts]: The numbers are demonstration values, not measured results.

[^roles]: Sample authors and affiliations illustrate metadata; they do not assign real authorship.

Effect B — refer to the same note twice

The first check uses the review note.³ The final check returns to the same note.³

The first check uses the review note.[^review] The final check returns to the same note.[^review]

[^review]: A repeated footnote keeps one definition and offers a return link for each reference.

17 · Divider / LineBreak

Divider separates adjacent ideas with a horizontal rule. LineBreak creates a deliberate new line inside one paragraph; it is useful when the two lines should stay together.

Effect A — a divider between paragraphs

The example ends here.

The review note begins here.

The example ends here.

---

The review note begins here.

Effect B — a deliberate line break

First line: state the question.
Second line: keep the context with it.

First line: state the question.\
Second line: keep the context with it.

18 · InlineMath / MathBlock

Math uses LaTeX notation and is rendered into the article HTML during the build. InlineMath follows the text baseline; MathBlock sits on its own line and scrolls within the reading column when it is wide. The formulae below are writing examples, not measured research results.

Effect A — inline notation and conditional probability

An intervention is written as $\mathrm{do}(X=x)$. Compare $P(Y \mid X=x)$ with $P(Y \mid \mathrm{do}(X=x))$; an estimate may include a coefficient $\alpha_i$ and uncertainty $\sigma^2$.

An intervention is written as $\mathrm{do}(X=x)$.
Compare $P(Y \mid X=x)$ with $P(Y \mid \mathrm{do}(X=x))$;
an estimate may include a coefficient $\alpha_i$ and uncertainty $\sigma^2$.

Effect B — a display equation, fractions and summation

$$
x_j = f_j(\mathrm{pa}_j, e_j), \qquad j = 1, \dots, d
$$

$$
\widehat{\mu}=\frac{1}{n}\sum_{i=1}^{n}x_i,
\qquad \sigma=\sqrt{\frac{1}{n}\sum_{i=1}^{n}(x_i-\widehat{\mu})^2}
$$

Effect C — aligned steps, a piecewise function and a matrix

$$
\begin{aligned}
Y &= \beta_0 + \beta_1X + \varepsilon \\
\mathbb{E}[Y \mid X=x] &= \beta_0 + \beta_1x
\end{aligned}
$$

$$
g(x)=\begin{cases}
x^2 & \text{if } x \ge 0 \\
-x & \text{if } x < 0
\end{cases}
\qquad
A=\begin{bmatrix}1 & 0 \\ \beta & 1\end{bmatrix}
$$

Effect D — formulae inside a Markdown table

| Writing example      | Mathematical expression                       |
| :------------------- | :-------------------------------------------- |
| Linear mechanism     | $x_j=\sum_{k\in\mathrm{pa}_j}b_{jk}\,x_k+e_j$ |
| Intervention         | $\mathrm{do}(x_j=a)$                          |
| Conditional quantity | $P(y\mid\mathrm{do}(x=a))$                    |

Use \mid for a conditional bar in a table so it is not mistaken for a Markdown column separator.

Effect E — a wide equation with local horizontal scrolling

The following intentionally long expression tests the MathBlock container. On a narrow screen, scroll the formula itself; the article should stay within the viewport.

$$
\mathcal{L}(\theta)=\frac{1}{n}\sum_{i=1}^{n}(y_i-f_\theta(x_i))^2+\lambda_1\sum_{j=1}^{d}|\theta_j|+\lambda_2\sum_{j=1}^{d}\theta_j^2+\lambda_3\sum_{j=1}^{d}\sum_{k=1}^{d}A_{jk}^2+\lambda_4\sum_{i=1}^{n}\sum_{j=1}^{d}(x_{ij}-\widehat{x}_{ij})^2
$$

Dollar signs inside code such as $x^2$ stay literal. For ordinary currency, write \$20. This first version uses $...$ and $$...$$; it does not add MyST directives, automatic equation numbering or cross-equation references.

Page components · ResearchArticle / ArticleContents

These components are generated by the page and content system. They are not extra body directives. This article’s own header demonstrates the fields below.

ResearchArticle and related reading

The YAML title creates the H1, description creates the visible summary, and date / updated supply the publication and update dates. authors includes each sample author’s affiliations; tags, cover with its caption, and resources create their corresponding header content. related supplies the related-reading articles after the body. The sample names above are illustrative, not real signatures.

ArticleContents

The system builds the contents from body H2/H3 headings. H4–H6 and headings inside a quotation or disclosure stay out of the main contents. A writer does not insert an ArticleContents tag or maintain a second manual contents list.

Copyable complete article skeleton

Place this YAML at the very start of an article file, with the cover asset in the same article package. Required fields are title, description, and date; the other fields below provide a compact example of the page features demonstrated here. resources uses HTTPS or site-root paths; a local attachment belongs in a body link, as shown in Link.

---
schema: "article-v1"
title: "A reviewable question"
description: "A short summary of the question and its limits."
date: "2026-11-04"
updated: "2026-11-05"
dateVerified: false
visible: false
category: "evaluation"
lang: "en"
authors:
  - name: "Sample Author A"
    affiliations:
      - "Sample Editorial Lab (illustrative)"
  - name: "Sample Author B"
    affiliations:
      - "Sample Design Team (illustrative)"
tags:
  - "Writing sample"
cover:
  src: "./assets/cover.svg"
  alt: "Three panels show text, a figure, and a table with code."
  caption: "An illustrative article cover."
resources:
  - label: "Research articles"
    url: "/research/"
related:
  - "article-elements"
  - "markdown-components"
---

## The question

Explain what the reader can inspect.

Current boundary

These are structural examples within the existing article style, not multiple CSS themes. LaTeX mathematics is supported through the shared Math components. Video, Mermaid, and interactive charts are not connected. Arbitrary HTML, JSX, scripts, imports, class, and style are not accepted article authoring mechanisms. This page documents the current supported capabilities.