Basel Standard / Docs
Editorial Article Card
Reusable linked story card for journal grids, related reading, and archive shelves.
Block / Editorial card
Use the same editorial voice in grids, related content modules, and archive shelves.
EditorialArticleCard is a small linked teaser block for longform content. It keeps archive and related-reading surfaces aligned with the journal's editorial voice by packaging eyebrow, title, metadata, supporting copy, and CTA into one repeatable card.
Installation
Purchase access, then open /account/install to issue a registry token.Usage
import { EditorialArticleCard } from "@/registry/swiss/blocks/editorial-article-card"<EditorialArticleCard
eyebrow="Issue 16"
title="The case for stricter docs examples"
description="A linked teaser card for archive and related-reading surfaces."
href="/journal"
meta={["8 min", "Editorial"]}
/>Why This Block Exists
Editorial lists often drift into one-off card layouts. This block gives the journal a stable teaser format so archive pages and supporting modules feel authored as part of the same system.
- Use it for article archives, "related reading" modules, and compact narrative shelves.
- Prefer it over a generic card when the content is clearly a story teaser with metadata and a CTA.
- Avoid it when the content needs rich media, several actions, or dense comparison data.
Examples
Single Teaser
The default pattern is one linked story card with just enough metadata to establish context.
Block / Editorial card
Use the same editorial voice in grids, related content modules, and archive shelves.
Archive Grid
The block scales cleanly into a small grid, which makes it useful for archive and issue index pages.
Issue 15
A compact teaser card for archive pages and related reading.
Issue 16
Keeps the archive consistent without building a bespoke card for each post.
<EditorialArticleCard
eyebrow="Issue 15"
title="Archive structure can stay authored."
description="Use one card pattern instead of building a bespoke teaser for each post."
href="/journal"
meta={["6 min", "Layout"]}
/>In Context
Related-reading modules are where this block is most useful. It should support the article or issue page, not compete with the main hero.
Related reading
Use the same card system for supporting links underneath a journal article.
Placement
Guidance
Keep The Card A Teaser
- Titles should hint at the story, not try to summarize the full article.
- Metadata should stay short and scannable.
- The description should create interest, not reproduce the lead paragraph.
Use It For Narrative Surfaces
- This block is strongest when the destination is clearly a story or essay.
- For product or utility objects, switch to a commerce or operational block instead.
- If imagery is essential to recognition, a richer card composition may be the better starting point.
Maintain Archive Rhythm
- Reuse the same CTA label across a shelf when possible.
- Keep cards at similar content density so the grid stays even.
- Let the parent layout handle grouping and spacing between cards.
API Reference
EditorialArticleCard Props
| Prop | Type | Required | Notes |
|---|---|---|---|
eyebrow | string | yes | Small label for issue, category, or section. |
title | string | yes | Primary card headline. |
description | string | yes | Supporting teaser copy. |
href | string | yes | Destination for the CTA link. |
meta | string[] | no | Optional metadata row such as reading time or category. |
ctaLabel | string | no | CTA copy. Defaults to "Read article". |
Composition Notes
| Internal structure | Role |
|---|---|
Card with variant="editorial" and tone="quiet" | Provides the teaser surface. |
CardEyebrow, CardTitle, CardMeta | Establish article identity and metadata rhythm. |
Button with variant="catalog" | Turns the destination into a strong editorial CTA. |
Use the card when a single destination matters. If the layout needs media, author bylines, or several actions, build a more specific variant instead of overloading this teaser block.