Factory for Good

Organization Card

FFG-native directory card — identity, description, impact tags, and a confidence-level footer, 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
100%Confidence Level

Open Harvest

Lincoln, Nebraska

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

HumanitarianCommunity
60%Confidence Level

Bright Path Learning

Detroit, Michigan

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

EducationCommunity
40%Confidence Level

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",
    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 ImpactBadge pills
  • 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-card and the hairline to border-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.

On this page