{ "format": 1, "slug": "donate-amount-chips", "title": "Donation amount chips", "description": "The classic amount ladder on a white card: a photo band with a heart badge, a headline that prices one night of shelter, four amount chips that each carry their amount to the donate page, an \"own amount\" link, a full-width red Donate button and a Gift Aid note. For charities and shelters running a seasonal appeal; edit the amounts and their labels in the body.", "type": "image_and_content", "categories": [ "non-profit", "engagement" ], "season": "", "requires": { "pro": false, "plugins": [] }, "preview": "preview.webp", "images": [ "photo.jpg" ], "popup": { "popup_name": "Donation amount chips", "wdpop_item_tab": { "popup_type": "image_and_content", "popup_image": "{{IMAGE:photo.jpg}}", "popup_image_layout": "top", "popup_title": "£25 keeps the night shelter open for one bed, one night", "Popup_content": "

We open on 1 November. Every bed is funded by someone reading a page like this one.

£10a hot meal£25a bed£50two beds£100a weekOr choose your own amount

UK taxpayer? Gift Aid adds 25% at no cost to you.

", "popup_close_text": "", "cta_link": { "url": "/donate/?amount=25", "text": "Donate £25", "target": "" }, "popup_display_mode": "modal", "popup_width": "modal-custom-width", "popup_custom_width": { "width": "460", "unit": "px" }, "popup_position": "wdpop_core_middle_center", "popup_style_accordions": { "style_bg": "#ffffff", "style_text": "#6b7280", "style_radius": "16", "style_padding": { "top": "0", "right": "34", "bottom": "28", "left": "34", "unit": "px" }, "style_shadow": "large", "style_overlay_color": "#0f172a", "style_overlay_opacity": "55", "style_overlay_blur": "0", "style_heading_size": "24", "style_heading_weight": "800", "style_heading_color": "#111827", "style_body_size": "14", "style_align": "center", "style_cta_bg": { "color": "#dc2626", "hover": "#b91c1c" }, "style_cta_color": { "color": "#ffffff", "hover": "#ffffff" }, "style_btn_radius": "12", "style_btn_font_size": "15", "style_btn_padding": { "top": "16", "right": "20", "bottom": "16", "left": "20", "unit": "px" }, "style_btn_width": "full", "close_btn_color": { "color": "#111827", "hover": "#dc2626" }, "close_btn_bg_color": { "color": "rgba(255,255,255,0.9)", "hover": "#ffffff" }, "close_btn_border_color": { "color": "transparent", "hover": "transparent" }, "anim_in": "zoom", "anim_out": "fade", "anim_duration": "300", "style_mobile_heading_size": "22", "custom_css": "/* Amount ladder: the photo is the top band (edge to edge, 150px), a heart badge overlaps its foot, the text column carries the Padding field. The chips and the own-amount link are plain links in the body that carry the amount to the donate page; the fine print is flex-ordered under the button. Selectors carry .wdpop-root so they outrank Pro's stylesheet, which loads after this CSS. */\n{{POPUP}}.wdpop-root .modal-content{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overflow:hidden}\n{{POPUP}}.wdpop-root .wing--popup-wrapper{padding:0}\n{{POPUP}}.wdpop-root .wing--popup-image img{display:block;width:100%;height:150px;max-width:none;object-fit:cover}\n{{POPUP}}.wdpop-root .wing--popup-content-wrap{display:flex;flex-direction:column;align-items:stretch;padding:var(--wdpop-padding,35px);text-align:var(--wdpop-align,center)}\n{{POPUP}}.wdpop-root .wing--popup-content{display:contents}\n/* Heart badge, pure decoration, drawn over the band's lower edge */\n{{POPUP}}.wdpop-root .wing--popup-content-wrap::before{content:'';order:-2;position:relative;z-index:1;width:56px;height:56px;margin:-28px auto 12px;border-radius:50%;background:#fef2f2 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E\") center/26px no-repeat;border:4px solid #fff;box-sizing:content-box}\n{{POPUP}}.wdpop-root .wing--popup-title{margin:0 0 8px;line-height:1.25;letter-spacing:-.01em}\n{{POPUP}}.wdpop-root .wing--popup-content p{margin:0 0 20px;line-height:1.65}\n{{POPUP}}.wdpop-root .wdpop-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}\n{{POPUP}}.wdpop-root .wdpop-chips a{display:block;padding:14px 0;border:2px solid #e5e7eb;border-radius:12px;font-weight:700;font-size:16px;line-height:1.2;color:#111827;text-decoration:none;text-align:center}\n{{POPUP}}.wdpop-root .wdpop-chips small{display:block;margin-top:3px;font-size:10.5px;font-weight:500;color:#9ca3af}\n{{POPUP}}.wdpop-root .wdpop-chips a.is-on,{{POPUP}}.wdpop-root .wdpop-chips a:hover{border-color:#dc2626;background:#fef2f2;color:#dc2626}\n{{POPUP}}.wdpop-root .wdpop-chips a.is-on small,{{POPUP}}.wdpop-root .wdpop-chips a:hover small{color:#f87171}\n{{POPUP}}.wdpop-root .wdpop-other{display:block;margin:0 0 18px;font-size:12.5px;color:#6b7280;text-decoration:underline}\n{{POPUP}}.wdpop-root .wdpop-cta{order:8;margin:0;font-weight:700;line-height:1.2}\n{{POPUP}}.wdpop-root .wing--popup-content .wdpop-fine{order:9;margin:14px 0 0;font-size:11.5px;color:#9ca3af}\n{{POPUP}}.wdpop-root .wing--popup-close-btn{top:12px;right:14px;width:28px;height:28px;padding:0;border:0;line-height:28px;font-size:18px;text-align:center}\n@container wdpop (max-width:400px){{{POPUP}}.wdpop-root .wdpop-chips{grid-template-columns:repeat(2,1fr)}}" }, "page_load_events": { "page_load_status": "1", "popup_delay": "0" }, "frequency_events": { "freq_mode": "always" } } } }