astro-website/openspec/changes/archive/2026-02-10-card-layout/proposal.md

Why

The site currently renders multiple card variants (videos/podcast cards, blog post cards, etc.) with inconsistent structure and metadata placement, which makes the UI feel uneven. A standardized card layout will create a consistent UX across the website.

What Changes

• Standardize the UI structure for all content cards across the site:
  • featured image displayed prominently on top (when available)
  • title
  • summary/excerpt, trimmed
  • meta row with date (left) and views (right) when available (space-between)
  • footer row showing the content source (YouTube/podcast/blog/etc.)
• Update existing card renderers/components to use the standardized structure and styling.
• Where a content source does not provide one of the fields (for example, views for blog posts), the layout MUST still render cleanly with the missing field omitted.

Capabilities

New Capabilities

• card-layout-system: Define the standard card information architecture (image/title/summary/meta/footer) and rules for optional fields so all surfaces render consistently.

Modified Capabilities

• social-content-aggregation: Extend normalized content items to include an optional summary/excerpt field where available (e.g., YouTube description snippet, podcast episode summary) so non-blog cards can display a trimmed summary.
• blog-section-surface: Standardize blog listing cards to include the meta row (publish date and optional views) and footer source label, consistent with the global card layout system.

Impact

• Affected code: shared card/link components (e.g., site/src/components/ContentCard.astro, site/src/components/BlogPostCard.astro) and pages that render listings (/, /videos, /podcast, /blog).
• Data model: normalized cached items may gain an optional summary field; ingestion code may need to populate it for YouTube/podcast.
• Styling: global CSS updates to ensure consistent spacing/typography and footer/meta layout.