shadcn.io is not affiliated with official shadcn/ui
Gift Breakdown Footer Block for React
A footer for a conservation charity with a framed stacked bar showing where a gift goes (programs, fundraising, admin) with a legend, a Donate button, the registered charity number and two link groups.
Installation
Overview
A footer for a charity for React with Base UI, split by a divider. At the start sit the wordmark, one sentence and a framed figure titled "Where your gift goes": a stacked bar of programs, fundraising and admin in three weights of the text colour, a legend that repeats the shares as text, the one Shine Button ("Donate") and the registered charity number. At the end two link groups share a nav labelled Footer. A legal band under both closes the page. The shares and the charity number are invented example data: publish only the figures from your own audited accounts. It's built from Guides, a CSS stacked bar, ShineButton and your theme's tokens.
FAQ
How do I change the breakdown?
Edit the SHARES array at the top of the file: each entry has a label, a percent and a fill class (the foreground colour at 100, 50 and 20 percent). Keep the percentages adding up to 100; the bar's widths and the legend both read from the same array, and the screen-reader summary is built from it too.
Why is the bar not coloured?
The three segments differ by weight, not hue, so the bar reads in any theme and for colour-blind visitors, and the legend names every segment with its number. The legend dots use the same fills so the two match.
Where does Donate go, and what is the charity number?
The button is a link (href="#"): point it at your donation page. The number is example data in a left-to-right isolate; replace it with your registration, and keep it next to the donate action because regulators and donors look for it there.
What happens on a phone?
The parts stack: the brand, the figure, the button and number, then a rule with the two link groups side by side, then the legal band. Nothing scrolls sideways at 320 pixels.
How do screen readers move through it?
The bar is an image with a text summary ("Programs 82%, Fundraising 11%, Admin 7%"), and the legend is a description list with the same numbers. The figure's heading is an h2, the groups are one nav labelled Footer with h2s, and the legal links are a labelled list.
Related
- Pro
Call To Action Cell Footer
Calls to actionA footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.
- Pro
Stat Cells Footer
Social proofA footer for an observability tool with four stat cells (events a day, uptime, regions, rating) above the brand and three link groups, with a legal band closing the page.
- Pro
Customer Result Footer
Social proofA footer for a dock-scheduling tool with one customer result: a big 38% figure beside a before and after bar pair in a framed figure, a Read the story button, and two link groups.
- Pro
Level Cells Footer
Products and catalogsA footer for a coding school with three level cells (Foundations, Professional, Advanced) each with a duration badge and three course links, and an accreditation line with a drawn seal in the legal band.
- Pro
Brand Split Footer
Brand-ledA brand-first split footer for a design tool: a display wordmark, a tagline and the Shine Button on one half, three link columns and the legal row on the other.
- Pro
Link Columns Footer
Link gridsThe classic link-column footer for an email API: a brand column with the wordmark, one sentence and four social links, four groups of links behind a split divider, and a legal band with the copyright and the policy links.