# Donate impact tiers

> Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/donate-impact-tiers.html
Section: Pricing
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, group, heading, paragraph
Keywords: donate, charity, giving, impact, appeal, gift aid, fundraising

## Variations (2)

### Four gifts (the default)

Identical markup in every theme.

Four ruled cards on your base ground, the most given one inverted to contrast, each closed by a Donate button that takes your theme's button colours.

### Peach and teal

This variation states its own colours and states its own type: identical in every theme.

Peach ground, dark brown ink, warm white cards and a deep teal plate for the most given gift, soft teal Donate buttons, in Georgia over Helvetica.


---

## The signature moment: every amount is named by the thing it buys

**The amount is the biggest thing on each card and the sentence under it is
the thing it buys, so the grid reads as a row of outcomes rather than a price
list.** The amounts are a bare `clamp(3rem, 4.6vw, 4.5rem)`: their size is the
composition, so they sit off the type ladder on purpose. The mark survives
colourlessness because it is made of scale and position: the four amounts sit
on one line across the grid, the "buys" line is on the `large` rung under each,
and the most given gift is set apart by inversion, not by a colour.

## What it inherits from your theme

- The ground is `base` and every line of type is `contrast`, each a two-rung
  chain; the most given card inverts them. Text is at 4.5:1 or better in the
  stock themes, and the amounts are display type.
- The card borders are `currentColor` (the inverted card borders in
  `contrast`), so they follow your text.
- The labels start on `role-label` and the "Give another amount" link on
  `role-link`, both falling through to `contrast`.
- The Donate buttons state no colour, so your theme's button paints them; the
  one on the inverted card is `base` with `contrast` type so it stays visible.
  Every button states its padding, so the tap target holds in any theme.
- The heading is on the `x-large` rung, the "buys" lines on `large`, body
  copy on `medium`. The typeface is your theme's.

## What it decides for itself

- The cards are a grid with a 16rem minimum column: four across at 1280 and
  above, two by two at 820, one column on a phone.
- Each card is a vertical flex group with its content pushed apart, so the
  Donate buttons line up along the foot of the row.

## The Styled look

`peach-and-teal` states a peach ground `#fbe6d4`, dark brown ink `#2b1d16`,
warm white cards `#fffaf4` with 14px corners and a deep teal `#0e5a5a` plate
for the most given gift. The Donate buttons are teal with warm white type and
a 10px corner (the one on the teal plate reverses it), and the amounts and
headings are Georgia over a Helvetica body at weight 400. It is for a food
bank, a hospice or a local appeal that wants to look warm and trusted.

## What to change first

The four amounts, what each one buys, the charity name and number, and the
`#donate` links on every button.