Update Card

Water Forward

Clean water reaches three new villages

A new well network now serves over 4,000 residents who previously walked miles for water each day.

Environment

Jesse Tree

120 families kept in their homes

Emergency rental assistance reached a record number of households facing eviction this quarter.

Community

Installation

pnpm dlx shadcn@latest add @ffg/update-card

Usage

import { UpdateCard } from "@/components/ui/update-card";

<UpdateCard
  title="Clean water reaches three new villages"
  copy="A new well network now serves over 4,000 residents."
  organization="Water Forward"
  tag="Environment"
  img="/updates/water.jpg"
  alt=""
/>

A vertical card for news and impact updates. Props:

• title / copy — headline and body text
• organization — optional name shown as an overlay across the bottom of the image
• tag — optional impact-area label; when it matches a known impact category it renders the category icon in its accent colour, otherwise a plain outlined pill
• img / alt — image URL and alt text; omit img to render the striped diagonal placeholder

Dark mode: the card surface uses border/background tokens and the organization overlay maps to --primary so it inverts. The heading uses --foreground and the copy uses --muted-foreground; category accents are fixed brand hues that stay constant across themes.