Home
Templates
Community & Nonprofit
Refugee & Migration Nonprofit
Passage - Humanitarian Refugee Landing Page Template
Passage is a masonry-style humanitarian fundraising landing page built for refugee and migration organizations. It combines documentary photography, neighborhood-specific story cards, live funding progress bars, and an amber-accented donation overlay to help donors feel connected to a specific place and a specific need. The result is a page that earns trust before it asks for money.
by Rocket studio
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.
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.
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.
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.




Theme
Civic Service
Creative direction
Local & Neighborhood
Color system
Teal Catalyst
Style
Masonry/Pinterest
Direction
Donation/Fundraising
Page Sections
Split-panel Documentary Hero
Masonry Story Card Grid
Live Funding Progress Banners
Neighborhood Donation Overlay
Mobile Floating Donation Bar
Scroll-reveal Animation System
Can I replace the progress bar campaigns with my own funding goals?
How many story cards does the masonry grid support?
Does the donation overlay support both one-time and recurring gifts?
Can I edit the preset donation amounts and their outcome labels?
Is this template suitable for a small local organization or only large international NGOs?
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.
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.
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.
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.
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.
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.
| Section | Purpose |
|---|---|
| Hero split panel | Anchors emotion with documentary photo and serif headline |
| Primary masonry grid | Cascades neighborhood story cards with photos, quotes, and stats |
| Progress Banner 1 | Shows live funding progress for the Thessaloniki winter shelter |
| Masonry grid continued | Extends field dispatches with more city-specific program cards |
| Progress Banner 2 | Shows live funding progress for the Kakuma SIM distribution |
| Single-row footer | Closes the page with a clean linear footer pattern |
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.
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.
The page is engineered around one insight: donors give when they feel like participants in something already moving, not founders of something uncertain.
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.