3.1 KiB
Purpose
Define a standardized card layout so content cards across surfaces look consistent.
Requirements
Requirement: Standard card information architecture
All content cards rendered by the site MUST use a standardized layout so cards across different surfaces look consistent.
The standard card layout MUST be:
- featured image displayed prominently at the top (when available), with a shimmer placeholder visible while the image loads
- title
- summary/excerpt text, trimmed to a fixed maximum length
- footer row showing:
- publish date on the left
- views when available (if omitted, the footer MUST still render cleanly)
- the content source label (e.g.,
youtube,podcast,blog)
If a field is not available (for example, views for some sources), the card MUST still render cleanly with that field omitted.
For content cards with source youtube or podcast, the card MUST render as a clickable element that opens a media modal dialog instead of navigating to an external URL. The card MUST NOT render as an outbound <a> link for these sources.
For content cards with other sources (e.g., blog, instagram), the card MUST continue to render as a navigational link (the existing behavior).
The card element for modal-trigger cards MUST carry the content item's data (id, source, url, title, summary, publishedAt, thumbnailUrl, views) as data-* attributes so the modal script can access them.
Scenario: Card renders with all fields
- WHEN a content item has an image, title, summary, publish date, views, and source
- THEN the card renders those fields in the standard card layout order
Scenario: Card renders without views
- WHEN a content item has no views data
- THEN the card renders the footer bar with date + source and omits views without breaking the layout
Scenario: Card renders without featured image
- WHEN a content item has no featured image
- THEN the card renders a placeholder media area and still renders the remaining fields
Scenario: Card image shows shimmer while loading
- WHEN a content item has an image URL and the image has not yet loaded
- THEN the card media area displays an animated shimmer placeholder until the image loads and fades in
Scenario: Card image load failure shows static placeholder
- WHEN a content item has an image URL but the image fails to load
- THEN the card media area displays a static placeholder (no broken image icon) and the card remains visually intact
Scenario: YouTube video card opens modal
- WHEN a user clicks a content card with source
youtube - THEN a media modal dialog opens with the video's embedded player and metadata instead of navigating to YouTube
Scenario: Podcast card opens modal
- WHEN a user clicks a content card with source
podcast - THEN a media modal dialog opens with the episode's embedded player (or metadata link) instead of navigating to the podcast platform
Scenario: Blog card still navigates
- WHEN a user clicks a content card with source
blog - THEN the card navigates to the blog post as an internal link (existing behavior, unaffected)