Updates Section

FFG-native section pairing a heading and "See more" link with a responsive grid of UpdateCards.

Updates from your organizations and community

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

Future Forward

Scholarships awarded to 60 first-gen students

This year's cohort spans 14 schools, with mentoring support continuing through graduation.

Education

Installation

pnpm dlx shadcn@latest add @ffg/updates-section

Usage

import { UpdatesSection } from "@/components/ui/updates-section";

<UpdatesSection
  items={updates}
  title="Updates from your organizations and community"
  seeMoreHref="/updates"
/>

The canonical "Updates from your organizations and community" section, used by the FFG Dashboard and Organization surfaces. It renders a heading and a "See more" link above a responsive grid of UpdateCard items. The section is driven entirely by the items array, so each surface supplies its own copy and images.

Each item accepts { title, body, organization?, tag?, img?, alt? }. Props:

items — the array of update records (defaults to empty)
title — section heading (also used as the aria-label)
seeMoreHref — target for the "See more" link

The grid is one column on mobile, two at md, and three at lg and up.

Dark mode: the section divider uses the faint --border token and the heading and link use --foreground, while the cards carry their own dark-aware surface tokens.