Passage - Humanitarian Refugee Landing Page Template

Quick summary

Passage is a single-page fundraising template designed for international humanitarian organizations that support refugees and displaced families. It uses a Pinterest-style masonry card layout, a split-panel hero, and two full-width funding progress banners to build cumulative, place-specific evidence that the work is real and the money lands somewhere concrete.

Who this template is for

This template is built for mission-driven teams that need to turn donor skepticism into confident, recurring giving. It works best when your organization has real field stories to tell and specific programs to fund.

• Refugee and migration nonprofits running neighborhood-level programs across multiple cities
• Humanitarian aid organizations that want to frame donations around tangible, place-specific outcomes
• Development and communications teams managing fundraising campaigns with recurring-gift goals

What problem this template solves

Most humanitarian fundraising pages leave donors feeling like they are contributing to a faceless fund. The problem is not generosity but distance. Donors need to see a specific street corner, read a specific name, and understand exactly what their money does before they click.

• Generic donation pages lose trust because they feel abstract and hard to verify
• Single-column layouts cannot carry the volume of micro-stories that build cumulative proof
• Static pages with no progress indicators make donors feel like late arrivals rather than active participants

What you get with this template

You get a fully structured, single-page fundraising layout ready to populate with your organization's field content. Every section is purposefully sequenced to move a skeptical reader toward a confident monthly gift.

• A documentary-style split hero with a serif headline and a primary amber donation call-to-action button
• A cascading masonry grid built to hold photos, pull quotes, stat blocks, and hand-illustrated neighborhood maps
• Two full-width funding progress banners with live goal bars and city-specific campaign labels
• A donation overlay with preset amounts, labeled impact outcomes, a monthly/one-time toggle, and a neighborhood dropdown
• A fixed floating donation bar for mobile visitors so the call to action never leaves the screen

Feature list

Split-Panel Documentary Hero

The header divides the screen into two zones. The left side holds a single eye-level documentary photograph. The right side carries a three-line serif headline set in Fraunces, a one-sentence context statement, and the first amber "Give Now" button. The layout creates immediate emotional grounding before the donor scrolls a single pixel.

Masonry Story Card Grid

The core of the page is a Pinterest-style cascading grid of cards in varying heights. Cards mix photography, first-name volunteer and refugee pull quotes, short stat blocks, and hand-illustrated neighborhood maps. The rhythm feels like dispatches pinned to a corkboard, each fragment adding to a growing body of field evidence.

Live Funding Progress Banners

Every third row, a full-width amber banner interrupts the masonry grid with a labeled funding goal and an animated progress bar. Each banner names a specific city and campaign, such as the Thessaloniki winter shelter or the Kakuma SIM distribution point. Donors see exactly how far a real effort has come and how close it is to completion.

Neighborhood-Targeted Donation Overlay

Clicking any donation call-to-action opens a streamlined overlay. It presents four preset giving amounts, each paired with a tangible outcome label. A monthly/one-time toggle defaults to monthly. A single optional field, a dropdown of active program cities, lets the donor choose which neighborhood their gift supports tonight.

Scroll-Reveal Animation System

Cards stagger into view as the visitor scrolls, using a medium-weight reveal sequence. Progress bars animate on entry. The masonry grid staggers its columns so the layout feels alive rather than static. The effect rewards reading without overwhelming the content.

Mobile Floating Donation Bar

On smaller screens, a fixed bar sits at the bottom of the viewport at all times. It carries the primary donation call to action so mobile visitors never have to scroll back to give. The bar appears after the hero and persists through the entire masonry experience.

Page sections overview

Design & branding system

The visual identity follows a Civic Service theme. The palette pairs institutional authority with neighborhood warmth, so first-time visitors trust the organization before they read a single statistic.

• Deep service teal (#0D7377) anchors the header, navigation, and primary buttons; warm civic cream (#FDF5E6) fills card backgrounds and open space; charcoal documentary gray (#2C3E50) handles body text and captions
• Signal amber (#E8A838) appears exclusively on donation calls-to-action and funding banners, training the eye to treat amber as the action color
• Typography uses Fraunces for all serif display headlines and DM Sans for body copy, balancing editorial weight with everyday readability

Mobile & speed optimization

The template is built mobile-first, with the floating donation bar as the primary conversion mechanism on small screens. Desktop visitors get the full masonry column experience.

• CSS columns drive the masonry layout, keeping the grid performant without requiring a heavy JavaScript library
• Intersection Observer powers scroll-reveal animations, so cards and progress bars only animate when they enter the viewport
• Optimized image handling is baked into the layout structure, keeping the visual-heavy page from feeling slow on mobile connections

How this template helps you convert

The page is engineered around one insight: donors give when they feel like participants in something already moving, not founders of something uncertain.

1. The masonry grid builds cumulative, place-specific credibility across every card, so by the time a visitor reaches a funding banner they have already read a legal clinic story, a language class quote, and a stat block that proves real scale.
2. The progress banners reframe the donation as joining an effort in motion. Seeing that $18,400 of a $25,000 goal is already raised makes the donor feel like the deciding vote, not the first dollar.
3. The overlay links each preset amount to a concrete outcome and lets the donor pick a neighborhood, making the transaction feel personal and traceable rather than administrative.

Other information about this template

This template is a strong fit for organizations running multi-city field programs who need one page to carry the full weight of their case for support. It is equally effective as a standalone campaign page or as a primary fundraising destination.

• The neighborhood dropdown in the donation overlay can be populated with any list of active program cities, making the template adaptable to organizations of varying geographic scope
• The two progress banner slots can be swapped to reflect whichever campaigns are currently closest to their funding goals, keeping the page feeling live and urgent
• The template is designed for English-language audiences using United States Dollar currency, and the preset donation amounts and outcome labels are written with that context in mind
• The Civic Service visual theme and the documentary photography approach make this layout transferable to other humanitarian categories beyond refugee support, such as disaster relief or food security campaigns

Show more