40 lines
1.9 KiB
Markdown
40 lines
1.9 KiB
Markdown
## 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.
|
|
|
|
#### 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
|