Coverage

This page directly exercises the reusable article widgets. Heavier widgets whose output depends on page-level data, generated manifests, or special article modes are listed with their canonical specimens.

Article Openers

Callouts

Marginalia

This sentence carries a sidenote¹1 Sidenotes are the numbered marginal notes generated from ordinary Org footnotes. They must remain readable beside dense widgets. and an ^◆arrow note.

Timelines

Two ways to place a Phosphor icon: the curated ph-<name> class (a fixed allowlist in assets/scss/_base.scss, kept for the handful used in chrome), or ligature mode — a bare <span class"ph">icon-name</span>= with the icon's name as its text content. Ligature mode reaches the whole icon set without touching CSS, so reach for it in article bodies; keep aria-hidden on decorative markers.

Scannable Facts

Layout Helpers

A code-tabs block (#+BEGIN_tabs / #+BEGIN_tab <Label>) shows the same example in several languages, one tab per language; the code is highlighted at build time. With JavaScript off it renders as a labeled stack of every panel — so it prints and curls whole; the tab strip is progressive enhancement. A tab's body is ordinary markup, so a twocol (or anything else) nests inside:

def greet(name):
    return f"hello, {name}"

func greet(name string) string {
    return "hello, " + name
}

fn greet(name: &str) -> String {
    format!("hello, {name}")
}

This paragraph has a margin figure beside it. The body text should keep its measure, while the figure uses the gutter without colliding with sidenotes or ordinary marginalia.

Inline figures are useful when the illustration is small enough that sending it to a full-width figure would interrupt the argument. The left and right variants should preserve a readable line length and clear themselves cleanly on narrow screens.

The second paragraph exercises the right-floating variant. The text should wrap beside the figure and then return to the normal body measure after the figure's box is cleared.

Language Helpers

Icons

Component islands

Server-rendered data-machine markup enhanced in place by the islands feature: clicks drive the behavior machine, and the root's contract attributes track settled state. The checkbox rests on its script-only mixed state (the dash must appear at load — that is the synchronous adoption prime at work); the tree derives its parent squares from leaf state, so no click sequence can strand them.

Notifications

• Alerts
  • Mentions
  • Replies
• Weekly digest

Specialized Widgets

Some widgets need their own full specimen pages because their state, data, or page register is large:

• Diagrams exercises static Typst figures and interactive viz islands.
• Sample paper exercises the paper register: authors, affiliation, abstract, numbered sections, definitions, theorems, lemmas, and algorithms.
• Photos exercises the gallery and lightbox.
• Watchdog exercises evidence tables, citation timelines, sector tiles, and metrics.