Standards
Spend Breakdown pattern
Rolled-up spend category tiles for accountability reporting — a companion to Impact Stats, not a replacement for your filed Form 990. Composable with it, never merged into it.
Standalone
Works on its own for a site that only has expense data ready — a rolled-up category breakdown, a computed total, and an optional link out to the actual filed tax return.
$51,420
Standard
- Deliberately a separate component from ImpactStatsSection — compose the two on a page rather than merging them, so a site can show spend-only, impact-only, or both.
- Category id is drawn from a recommended set for internal consistency, but label is always freeform per site — the same id can read very differently across sites (e.g. "rescueOperations" as "Dog Recovery & Trapping Supplies" vs. "Community Feeding Routes").
- Recommended starting categories: Animal Care, Rescue Operations, Marketing & Outreach, Administrative, Fundraising (optional, only if a site breaks it out separately from Administrative). Not an enforced enum — a site can add its own category id at any time without waiting for this list to change.
- Unlike Impact Stats' optional timeframeNote, this pattern's periodLabel is required — financial figures are always a snapshot of one filed period, never a "current" or lifetime total, and that must never be ambiguous.
- The optional costPerOutcome highlight is always computed by the site's own page code from real, same-period totals on both sides — the component never guesses which spend category maps to which outcome.
- Every figure must come from the organization's actual filed tax return. Never estimate, round for effect, or invent a category that isn't real.
- Never use this pattern to list individual contributors or their gift amounts — donor identities are explicitly exempt from public disclosure under IRS rules (Form 990 Schedule B), and that boundary is absolute regardless of what a site might otherwise want to showcase.
- Renders nothing if categories is empty — no placeholder $0 total.
- Component: template/src/components/patterns/SpendBreakdownSection.tsx
Template