Skip to main content

Modules Documentation

Responsive requirements

Mobile, tablet, desktop expectations.

Complete

Coverage articles are designed magazine-first on desktop, condensed-feed on mobile. The hero band, body width, and sidebar transitions are all breakpoint-aware. The cover image aspect ratio shifts from 16:9 desktop to 4:3 mobile to preserve subject framing on narrower screens.

Breakpoints

Mobile (≤640px)
Hero cover at 4:3. Title H1 28px, dek 16px. Byline + parent event chip stack vertically. Body width = viewport - 32px padding. Sidebar blocks collapse to a horizontal scroll rail at the bottom of the body. Sponsor disclosure ribbon stays full-width sticky-top until first body scroll.
Tablet (641-1024px)
Hero cover at 16:9. Title H1 38px. Body still single-column but max-width 600px centred. Sidebar appears after body content (not aside) — same horizontal rail treatment as mobile but wider cards.
Desktop (≥1025px)
Hero cover at 16:9, full-bleed. Title H1 48px, dek 20px. Body max-width 720px in main column. Sidebar 320px wide on the right, sticky on scroll. Card variants at full size — kind badge above title with type-and-color treatment.

Coverage card variants

  • Small (compact): used inside the parent-event card sidebar block. 80x80 cover + title + dek single-line truncated + kind badge.
  • Standard: used on event details pages, founder/startup mention rails. 16:9 cover + title (2-line clamp) + dek (3-line clamp) + byline.
  • Large (isFeatured=true only): bigger cover, longer dek, kind badge at top-left.
  • Sponsored variant: any of the 3 above gets a sponsor-tinted background + "SPONSORED" label replacing the kind badge.