Damage Report Card
A card molecule that summarizes a single damage report. Composes Badge atoms for damage level, sync status, and infrastructure type around a photo thumbnail and metadata. Used in report lists, dashboards, and search results.
Accessibility
- Uses semantic
<article> element with an aria-label describing the report.
- Photo has descriptive alt text referencing the location.
focus-within:ring-2 highlights the card when any child element is focused.- Damage level and sync status are communicated via text labels, not color alone.
Trauma-Informed Design
- Compact variant reduces visual weight for users scanning many reports under stress.
- Damage photos are contained in a fixed-height zone — they cannot dominate the card.
- Description uses
line-clamp-2 to prevent overwhelming text walls.
- Sync status badge gives immediate feedback about whether the report reached coordinators.