Donate impact tiers, Pattern Paste Canonical: https://patternpaste.com/pattern/donate-impact-tiers.html Core Patterns (https://patternpaste.com/patterns/) Pricing (https://patternpaste.com/patterns/pricing/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first The four amounts, what each one buys, the charity name and number, and the #donate links on every button. 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. Theme handoff ## What comes from where ### 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. ### Set by this pattern - 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. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview Four ways to give to a charity, each named by what it pays for. A tracked label, a heading and one line of context sit above four cards; each card carries a short label, the amount at display size, what that amount buys, one plain line of how, and a Donate button on its foot. The third card is the most given gift and is inverted. Under the cards one note line holds the charity number and Gift Aid, beside a link to give another amount. ### 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. Make it yoursVariations and the edits to make first ### What to change first The four amounts, what each one buys, the charity name and number, and the #donate links on every button. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Donate impact tiers: common questions Does Donate impact tiers need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Donate impact tiers match my theme? Choose by variation. Four gifts takes your theme’s palette; Peach and teal brings its own colours. How many variations does Donate impact tiers have? 2: Four gifts and Peach and teal. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Donate impact tiers free? It is included with a subscription, with every Core Pattern and variation. 56 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 22KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with FAQ FAQ bento An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. The featured card holds the core question with an expanded answer, key feature takeaways and an action link; the right column packs four bordered cards answering quick practical concerns. States no colour and no font of its own. (https://patternpaste.com/pattern/faq-bento.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Pricing Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph Presets color 6, spacing 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in Pricing Explore all 12 Pricing patterns (https://patternpaste.com/patterns/pricing/)Also in Call to action (https://patternpaste.com/patterns/cta/) Shot in Twenty Twenty-Five Pricing No plugin needed ### Website care Website care: service scopes beside prices, expandable plan scopes. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-website-care.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Price list treatments A salon, spa or clinic price list in three ruled columns. Pricing Preview pattern (https://patternpaste.com/pattern/price-list-treatments.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-cover-menu.html)