Editorial Design System

Editorial Design System

A reference page demonstrating the available editorial components.

Published: August 9, 2026
Category: Design System
Reading time: 10 minutes

This template demonstrates the semantic components available to editorial pages. Multi-block components use HTML wrappers with markdown="1" so headings, lists, and paragraphs stay inside the component. The visual treatment is controlled by CSS.

Tier 1 — Core Editorial Components

Lead

The lead introduces the central idea of an article and establishes its narrative or explanatory direction.

Placeholder editorial image

Figure 1. A representative editorial image.

Image: Placeholder image for the design-system template.

A strong editorial design system should make the content easier to understand without becoming the content itself.

— Editorial Design Principle

36 Semantic components

3 Component tiers

1 Shared visual system

Component Purpose Tier
Editorial Header Establish article identity 1
Figure Present visual evidence 1
Stat Grid Present important numbers 1
Timeline Present chronology 1

1944

Harvard Mark I

An example milestone in the history of computing.

1964

IBM System/360

A major architectural milestone in enterprise computing.

2026

Editorial Design System

A reusable component vocabulary for long-form editorial content.

Note

This is an informational callout. It can be used for methodology, context, source notes, warnings, or editorial disclaimers.

Tier 2 — Composition Components

This content container demonstrates the normal readable measure used by the editorial system. On wide viewports, article prose flows in multiple columns; full-width components span the full measure.

Column One

Content grids allow related content to be arranged together while remaining responsive.

Column Two

The grid should collapse naturally at smaller viewport widths.

Bull Case

  • Clear component vocabulary
  • Consistent typography
  • Reusable layouts

Bear Case

  • More CSS to maintain
  • Some complex components need custom markup
  • Real articles may expose new patterns

Before

A page-specific collection of styles and markup.

After

A shared semantic component system.

  • Semantic: classes describe what content is.
  • Reusable: components can appear across different article types.
  • Responsive: layout is controlled by the design system.
  • Extensible: new patterns can be added when real content requires them.

Full-width placeholder image

Figure 2. A full-bleed figure can escape the normal reading measure.

Tier 3 — Specialized Editorial Components

The Battle of Lepanto

Date: 7 October 1571
Location: Gulf of Patras
Participants: Holy League · Ottoman Empire
Outcome: Holy League victory

Key Takeaways

  • Components should describe content rather than visual appearance.
  • Layout should remain responsive without changing article markup.
  • Specialized components should be introduced when recurring editorial patterns emerge.

Mainframe

A high-performance computer designed to process large volumes of data and support many concurrent users and applications.

CDP
Customer Data Platform.

CMS
Content Management System.

DAM
Digital Asset Management.

Advantages

  • Simple authoring
  • Consistent presentation
  • Reusable patterns

Limitations

  • Complex data may require structured includes
  • New editorial patterns may require new components

Recommendation

Start with the core components and allow the design system to evolve from real articles rather than attempting to anticipate every possible layout.

Criterion Rating Notes
Authoring simplicity 9/10 Mostly ordinary Markdown
Reusability 9/10 Semantic component vocabulary
Responsiveness 9/10 CSS-driven
Complexity 3/10 Low initial implementation overhead

What Happens Next

Near term
Implement the core components and migrate one representative article.

Medium term
Compare the migrated article against the existing pages and refine spacing, typography, and responsive behavior.

Long term
Add components only when recurring editorial patterns justify them.

7 October 1571

Battle of Lepanto

A dedicated event card can present a date, event title, and concise description.

Don John of Austria

Role: Commander of the Holy League
Period: 1547–1578
Known for: Commanding the Christian fleet at Lepanto.

Sources

  1. Primary historical accounts
  2. Wikimedia Commons
  3. Manufacturer specifications
  4. Independent testing

Source: Example source note for a specific claim or figure.

Gallery image one Gallery image two Gallery image three

Then

Then
The original configuration.

Now

Now
The modern configuration.

Why it matters

An aside contains useful supporting context that should not interrupt the main narrative.

End of Component Reference

Multi-block components must use a wrapping element:

<div class="takeaways" markdown="1">

### Key Takeaways

- List items stay inside the component

</div>

Kramdown’s {: .class} alone only styles the next single block, which is why lists and following paragraphs were falling out of components.