Donate Hero Banner

File: sections/tmi-donation-hero.liquid

Templates: page.donate.json

Description

Donate Hero Banner

Creates a donation hero banner with a background image, title, description, and an embedded donation form. Used as the main hero section on the donation page.

Features:

• Full-width background image via inline styles
• Two-column layout (content left, donation form right)
• Configurable title and description
• 501(c)(3) charitable organization notice with Candid link
• Embedded donation form via snippet

Settings:

• banner_title (text) — Hero banner title
• banner_description (textarea) — Hero banner description (supports newlines)
• banner_img (image_picker) — Background image
• charity_notice (richtext) — 501(c)(3) notice text displayed below description

Blocks: None

Snippets Used:

• donation-form — Renders the Bloomerang donation form

Dependencies:

• Tailwind CSS (application.css) for layout and styling
• Legacy CSS classes ‘donation-page-wrapper’, ‘donation-hero’, ‘give-monthly-content’, ‘give-monthly-form’, ‘rte’ from theme.css

Tailwind Status: Partial Uses Tailwind for layout (flex, container, w-full, etc.) but relies on legacy classes for wrapper and form styling.

Settings

ID	Type	Label	Default	Info
banner_title	text	Banner Title
banner_description	textarea	Banner Description
banner_img	image_picker	Banner Image
charity_notice	richtext	Charity notice	<p>The Monroe Institute is a 501(c)(3) charitable organization and your gifts are tax deductible. Please visit <a href=“https://www.guidestar.org/profile/shared/6de9f467-a589-41ce-bc8b-b68ebedbda85” target=“_blank”>Candid</a> to learn more about our Gold Transparency Rating.</p>

Usage

This section is referenced in JSON templates and cannot be added via the theme editor.

{% section 'tmi-donation-hero' %}