Organization Card
FFG-native directory card — identity, description, impact tags, and a confidence-level footer, one per vetting-pipeline status.
Jesse Tree
Prevents eviction and homelessness with emergency rental and mortgage assistance for families on the edge of crisis.
Open Harvest
Operates a community-owned grocery and food-access program serving low-income households across the county.
Bright Path Learning
Runs after-school tutoring and literacy programs for K–8 students in under-resourced neighborhoods across the city.
Installation
pnpm dlx shadcn@latest add @ffg/organization-cardUsage
import { OrganizationCard } from "@/components/ui/organization-card";
<OrganizationCard
organization={{
name: "Jesse Tree",
location: "Boise, Idaho",
desc: "Prevents eviction and homelessness with emergency rental and mortgage assistance.",
tags: ["Community", "Education"],
status: "Verified",
tier: 5,
}}
onOpen={() => openOrg("jesse-tree")}
/>A clickable directory card describing a single organization. Identity leads
(deterministic monogram via LogoPlaceholder, name, and an open affordance),
followed by a description, impact tags, and a confidence-level footer derived
from the credibility tier (tier × 20%).
- status — when
"Verified", a branded check renders beside the name - tags — rendered as outlined
ImpactBadgepills - tier — credibility 1–5, shown as a confidence percentage
- onOpen — fired by the whole card, the NE-arrow button, and the Enter key
Dark mode: the wash surface maps to
bg-cardand the hairline toborder-border(strengthening to the strong divider on hover); all copy resolves through foreground / muted-foreground tokens so the card inverts cleanly. The monogram and tag accents stay constant across themes.