Editorial Design System
Component library
A navigable reference for the semantic components used on long-form editorial pages. Each entry has a short description, a live example, and a copyable shell you can paste into a new article.
This page is the working library for composition: jump to a component, preview it, copy the shell, and fill in real content. Multi-block components use HTML wrappers with markdown="1" so headings, lists, and paragraphs stay inside the component. Visual treatment lives in CSS (_includes/editorial.css).
On this page
Tier 1 — Core
- Editorial header
- Metadata
- Lead
- Section header
- Subsection header
- Figure
- Quote
- Stat grid
- Data table
- Timeline
- Info callout
Tier 2 — Composition
Tier 3 — Specialized
Tier 1 — Core editorial components
Identity, evidence, and the primary reading path of an article.
Editorial header
.editorial-header · .eyebrow · optional .dek
Article identity block: eyebrow label, title, and optional deck. Place once at the top of the page.
Live example
Example series
Example article title
A short deck that orients the reader before the lead.
Copy shell
<div class="editorial-header" markdown="1">
<span class="eyebrow">Series or section label</span>
# Article title
Optional deck (plain paragraph or class="dek").
</div>
Metadata
.metadata
Compact byline bar for publish date, category, reading time, or other facts. Use strong labels and short values.
Live example
Copy shell
<div class="metadata" markdown="1">
**Published:** Month D, YYYY
**Category:** Topic
**Reading time:** N minutes
</div>
Lead
.lead
Opening statement that establishes the article’s narrative or explanatory direction. Slightly larger type; first letter is emphasized.
Live example
This lead introduces the central idea and sets the tone for everything that follows. Keep it to one or two tight paragraphs.
Copy shell
<div class="lead" markdown="1">
Opening paragraph that states the thesis or stakes.
</div>
Section header
.section-header
Major section break with an h2. Use for primary structure inside the article.
Live example
Copy shell
<div class="section-header" markdown="1">
## Section title
</div>
Subsection header
.subsection-header
Secondary heading (h3) within a section when you need hierarchy without a full section rule.
Live example
Copy shell
<div class="subsection-header" markdown="1">
### Subsection title
</div>
Figure
.figure
Image with caption and optional credit. Prefer meaningful alt text; caption can use bold figure label + italic credit line.
Live example
Figure 1. A representative editorial image.
Image: Placeholder for the design-system library.
Copy shell
<div class="figure" markdown="1">
**Figure N.** Caption that explains what the reader should notice.
*Image: Credit or source.*
</div>
Quote
.quote
Pull quote or attributed statement. Use a Markdown blockquote plus a plain attribution line.
Live example
A strong editorial design system should make the content easier to understand without becoming the content itself.
— Editorial Design Principle
Copy shell
<div class="quote" markdown="1">
> Quoted text that deserves emphasis.
— Attribution
</div>
Stat grid
.stat-grid · .stat · .stat-value · .stat-label
Row of key numbers. Each cell is a .stat with a large value and a short label. Best for three to five figures.
Live example
32 Components
3 Tiers
1 Shared system
Copy shell
<div class="stat-grid" markdown="1">
<div class="stat">
<span class="stat-value">42</span>
<span class="stat-label">Label</span>
</div>
<div class="stat">
<span class="stat-value">18%</span>
<span class="stat-label">Label</span>
</div>
</div>
Data table
.data-table
Styled Markdown table for structured comparisons or reference data. Keep headers short; right-align numeric columns when useful.
Live example
| Component | Purpose | Tier |
|---|---|---|
| Editorial Header | Establish article identity | 1 |
| Figure | Present visual evidence | 1 |
| Stat Grid | Present important numbers | 1 |
Copy shell
<div class="data-table" markdown="1">
| Column A | Column B | Column C |
|---|---|---:|
| Row | Detail | 1 |
| Row | Detail | 2 |
</div>
Timeline
.timeline · .timeline-item · .timeline-date
Chronology of milestones. Each item has a date label, heading, and short body.
Live example
Copy shell
<div class="timeline" markdown="1">
<div class="timeline-item" markdown="1">
<span class="timeline-date">YYYY</span>
### Milestone title
One or two sentences of context.
</div>
</div>
Info callout
.info-callout
Informational aside for methodology, warnings, disclaimers, or source context that should stand out from body prose.
Live example
Note
This is an informational callout. Use it for methodology, context, source notes, warnings, or editorial disclaimers.
Copy shell
<div class="info-callout" markdown="1">
**Note**
Callout body. Keep it short and specific.
</div>
Tier 2 — Composition components
Layout and grouping patterns for arranging related content.
Content container
.content-container
Readable measure for ordinary prose when you need an explicit wrapper (for example inside a mixed layout). On the default article grid, bare paragraphs already sit on the measure.
Live example
This content container demonstrates the normal readable measure used by the editorial system. Use it when a group of paragraphs should share an explicit shell.
Copy shell
<div class="content-container" markdown="1">
Body paragraphs that should share a readable measure.
</div>
Content grid
.content-grid
Responsive multi-column arrangement of related blocks. Children are plain wrappers; headings and prose go inside each child.
Live example
Column one
Related points side by side on wide viewports.
Column two
Collapses to a single column on small screens.
Copy shell
<div class="content-grid" markdown="1">
<div markdown="1">
### Column title
Column body.
</div>
<div markdown="1">
### Column title
Column body.
</div>
</div>
Two column
.two-column
Fixed two-up layout for paired arguments, options, or lists (for example bull case vs bear case).
Live example
Copy shell
<div class="two-column" markdown="1">
<div markdown="1">
### Left title
- Point one
- Point two
</div>
<div markdown="1">
### Right title
- Point one
- Point two
</div>
</div>
Comparison
.comparison
Before/after or A/B framing. Same grid shell as two-column, tuned for contrast pairs.
Live example
Copy shell
<div class="comparison" markdown="1">
<div markdown="1">
### Before
Describe the prior state.
</div>
<div markdown="1">
### After
Describe the improved state.
</div>
</div>
Editorial list
.editorial-list
Emphasized bullet list for principles, criteria, or checklist-style points. Prefer bold lead-ins on each item.
Live example
- Semantic: classes describe what content is.
- Reusable: components can appear across article types.
- Responsive: layout is controlled by the design system.
- Extensible: add patterns only when real content needs them.
Copy shell
<div class="editorial-list" markdown="1">
- **Label:** explanation.
- **Label:** explanation.
</div>
Full bleed
.full-bleed
Escapes the normal measure so a child (usually a figure) can use more horizontal space. Nest a figure or other wide media inside.
Live example
Figure 2. A full-bleed figure can escape the normal reading measure.
Copy shell
<div class="full-bleed" markdown="1">
<div class="figure" markdown="1">
**Figure N.** Caption.
</div>
</div>
Tier 3 — Specialized editorial components
Recurring patterns for history, product, analysis, and reference writing.
Fact box
.fact-box
At-a-glance facts for an event, product, or entity (date, location, outcome, specs).
Live example
The Battle of Lepanto
Date: 7 October 1571
Location: Gulf of Patras
Participants: Holy League · Ottoman Empire
Outcome: Holy League victory
Copy shell
<div class="fact-box" markdown="1">
**Title**
**Label:** value
**Label:** value
**Label:** value
</div>
Takeaways
.takeaways
Summary box of key points. Heading plus bullets; keep each bullet one idea.
Live example
Key takeaways
- Components should describe content rather than visual appearance.
- Layout should stay responsive without changing article markup.
- Add specialized components only when patterns recur.
Copy shell
<div class="takeaways" markdown="1">
### Key takeaways
- Point one
- Point two
- Point three
</div>
Definition
.definition
Single term and definition for inline glossary moments without a full glossary list.
Live example
Mainframe
A high-performance computer designed to process large volumes of data and support many concurrent users and applications.
Copy shell
<div class="definition" markdown="1">
**Term**
Definition in one or two sentences.
</div>
Glossary
.glossary
Multiple term/definition pairs for a section or article. Bold the term on its own line, definition below.
Live example
CDP
Customer Data Platform.
CMS
Content Management System.
DAM
Digital Asset Management.
Copy shell
<div class="glossary" markdown="1">
**TERM**
Definition.
**TERM**
Definition.
</div>
Pros / cons
.pros-cons
Two-column advantages vs limitations. Same structure as two-column; use when the frame is specifically tradeoffs.
Live example
Advantages
- Simple authoring
- Consistent presentation
- Reusable patterns
Limitations
- Complex data may need structured includes
- New patterns may require new components
Copy shell
<div class="pros-cons" markdown="1">
<div markdown="1">
### Advantages
- Item
</div>
<div markdown="1">
### Limitations
- Item
</div>
</div>
Recommendation
.recommendation
Prescriptive close or guidance block. One clear heading and a short directive paragraph or list.
Live example
Recommendation
Start with the core components and let the system evolve from real articles rather than anticipating every layout.
Copy shell
<div class="recommendation" markdown="1">
### Recommendation
What the reader should do next, in one short paragraph.
</div>
Scorecard
.scorecard
Criteria table with ratings and notes. Useful for reviews, evaluations, and design critiques.
Live example
| Criterion | Rating | Notes |
|---|---|---|
| Authoring simplicity | 9/10 | Mostly ordinary Markdown |
| Reusability | 9/10 | Semantic vocabulary |
| Responsiveness | 9/10 | CSS-driven |
| Complexity | 3/10 | Low initial overhead |
Copy shell
<div class="scorecard" markdown="1">
| Criterion | Rating | Notes |
|---|---:|---|
| Criterion | N/10 | Short note |
</div>
Forecast
.forecast
Near / medium / long-term outlook sections. Heading plus labeled time horizons.
Live example
What happens next
Near term
Implement the core components and migrate one representative article.
Medium term
Compare against existing pages and refine spacing and type.
Long term
Add components only when recurring patterns justify them.
Copy shell
<div class="forecast" markdown="1">
### What happens next
**Near term**
…
**Medium term**
…
**Long term**
…
</div>
Event card
.event-card · .event-date
Dated event summary: date label, title, and concise description.
Live example
7 October 1571
Battle of Lepanto
A dedicated event card can present a date, event title, and concise description.
Copy shell
<div class="event-card" markdown="1">
<span class="event-date">Day Month Year</span>
### Event title
One or two sentences.
</div>
Entity card
.entity-card
Person, organization, or product card with role, period, and known-for lines.
Live example
Don John of Austria
Role: Commander of the Holy League
Period: 1547–1578
Known for: Commanding the Christian fleet at Lepanto.
Copy shell
<div class="entity-card" markdown="1">
### Name
**Role:** …
**Period:** …
**Known for:** …
</div>
Source list
.source-list
Numbered bibliography or reference list for the end of an article.
Live example
Sources
- Primary historical accounts
- Wikimedia Commons
- Manufacturer specifications
- Independent testing
Copy shell
<div class="source-list" markdown="1">
### Sources
1. Source one
2. Source two
</div>
Source note
.source-note
Inline footnote-style credit for a specific claim, chart, or figure.
Live example
Source: Example source note for a specific claim or figure.
Copy shell
<div class="source-note" markdown="1">
**Source:** Citation or link for the claim above.
</div>
Gallery
.gallery
Multi-image row that wraps responsively. Use when several images share equal weight.
Live example
Copy shell
<div class="gallery" markdown="1">
</div>
Figure pair
.figure-pair
Two images with captions for then/now, before/after, or side-by-side comparison.
Live example
Then
The original configuration.
Now
The modern configuration.
Copy shell
<div class="figure-pair" markdown="1">
<div markdown="1">
**Left label**
Caption.
</div>
<div markdown="1">
**Right label**
Caption.
</div>
</div>
Aside
.aside
Supporting context that should not interrupt the main narrative. Compact card; can sit beside other compact components on wide screens.
Live example
Why it matters
An aside holds useful supporting context without derailing the primary story.
Copy shell
<div class="aside" markdown="1">
**Label**
Supporting context in a short paragraph.
</div>
Editorial break
.editorial-break
Visual pause between major parts of an article. Empty element — no children required.
Live example
Copy shell
<div class="editorial-break"></div>
Multi-block rule
Kramdown’s {: .class} alone only styles the next single block. When a component holds headings, lists, or several paragraphs, wrap them:
<div class="takeaways" markdown="1">
### Key takeaways
- List items stay inside the component
</div>