Article Card Design System

Eight article card variants, six image ratios, ten metadata fields, three badge families. The mini design-system page (/:lang/editorial/design-system, noindex) renders every primitive on a single URL for review.

Card variants (8)

1 · Hero feature card

Full-bleed 16:9 cover with gradient text overlay. Used on Editorial Landing hero and Industry Section C.

2 · Standard listing card

16:9 cover above + dek below. The default everywhere — Latest grids, Industry Section D, Related articles, Most read.

3 · Horizontal media card

4:3 image inset on one side, text on the other. Used for interview rails and supporting hero cards.

4 · Text-only commentary card

No image. Type chip is the focal point. Reserved for commentary and opinion articles where the byline drives the open.

5 · List-row card

Compact numbered row, mobile-first. Used by Most Read on Landing and inside the Article sidebar.

6 · Industry / sector tile

Monogram, name, article count, latest article. Links to /industries/{slug}. Used by Landing Section C.

7 · Author byline card

Avatar (initials), name, role, article count. Used by Landing Section F and Author page.

8 · Topic / category chip card

Pill row with counts. Used by Landing Section E and Industry Section E.

Image ratios (6)

21:9 cinematic (hero takeovers only) · 16:9 standard editorial (default everywhere) · 4:3 horizontal media inset · 1:1 square thumbnail (social/sidebar) · 3:4 magazine portrait (author headshot) · 16:10 OG preview (share rectangle).

Metadata fields (10)

type · industry · topic · category · country · author · publishedAt · readingTimeMinutes · coverImageUrl · connectedEntities[]. Every article carries all ten so cards, listings, and JSON-LD stay consistent.

Badge families (3)

Status badges

Featured / Breaking / Editor's pick. Orange or purple solid. At most one per card.

Type badges

One of six article types (news / analysis / commentary / interview / profile / guide). Purple solid.

Taxonomy chips

Industry · country · topic. Neutral outline. Up to two per card.

Spacing + typography contract

Section padding py-10 sm:py-12 lg:py-14. Card grid gap-5. Card inner padding p-4 sm:p-5. Page max-width max-w-7xl. Headings tight + sentence-case. Meta lines uppercase + tracking-wider. 4-col grids on xl to eliminate dead right-side whitespace.