Organization Card

FFG-native directory card — logo, open affordance, identity, description and impact tags, one per vetting-pipeline status.

Jesse Tree

Boise, Idaho

Prevents eviction and homelessness with emergency rental and mortgage assistance for families on the edge of crisis.

CommunityEducation

Open Harvest

Lincoln, Nebraska

Operates a community-owned grocery and food-access program serving low-income households across the county.

HumanitarianCommunity

Bright Path Learning

Detroit, Michigan

Runs after-school tutoring and literacy programs for K–8 students in under-resourced neighborhoods across the city.

EducationCommunity

Installation

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

Usage

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",
  }}
  onOpen={() => openOrg("jesse-tree")}
/>

A clickable directory card describing a single organization. An 80px logo tile and the open arrow lead, then name and location, a description, and impact tags.

status — when "Verified", a check renders beside the name
logo — logo URL; omit for the deterministic monogram. Pass imageComponent to render it with next/image
tags — rendered as outlined ImpactBadge pills
onOpen — fired by the whole card, the arrow button, and the Enter key

Card fill is bg-card (surface/wash, dark surface/wash-dark) with a hairline border-border that darkens to the standard hover outline.