Article contents rail

Use it when

Contents hold position in the left margin while the article scrolls past. For long pieces where a reader needs to see the shape of the argument before committing to it.

Category

Education and FAQ

Layout archetype

Sticky rail

Page position

middle (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

sticky (derived)

Motifs

Register, Sequence mark, Held column

Content it requires

• Four to seven sections with stable ids
• Section titles that read as statements rather than labels
• Enough body length for the rail to hold

Do not use it when

• Needs at least four sections and a genuinely long article. On a short piece the rail sticks against nothing and reads as broken.
• Shares the sticky archetype with PRC-05 and CAR-02. One sticky section per page.
• The rail becomes a plain contents block below 900px, so the section titles have to work read straight through.
• No scroll spy. Highlighting the active section needs JavaScript that this page does not otherwise require.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/EduArticleContents.astro

---
import EduArticleContents from '../components/patterns/EduArticleContents.astro';
---

<EduArticleContents />

Import directly. Do not route production through patternComponents.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

• Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
• No interactive controls beyond links and buttons inherited from the design system.
• Colour never carries meaning alone: every state marker is paired with text.
• Motion respects prefers-reduced-motion.