Floodline is a hero-dominant landing page template built for flood relief charities. It opens with a cinematic survivor testimonial card, moves through a three-phase mission narrative, and closes with a postcode-based help finder and a free PDF guide download. The design uses a warm, grounded palette that feels like recovery, not crisis.
by Rocket studio
Loading preview…
Quick summary
Floodline is a single-page template for flood relief charities. It leads with an oversized survivor testimonial, walks visitors through a Respond, Rebuild, Remain mission story, then offers two clear paths: find local help or download a recovery guide. The layout is mobile-first, emotionally grounded, and built to serve flood survivors at their most urgent moments.
Who this template is for
This template is made for organisations doing real, on-the-ground flood recovery work. It speaks directly to three distinct groups of visitors who land on a flood relief page for very different reasons.
Flood survivors searching for immediate help, often from a phone, often late at night
Local volunteers with free time and physical capacity looking for a way to contribute
Corporate social responsibility managers seeking a tangible, visible cause to fund
What problem this template solves
Most charity pages lead with the organisation, not the person in crisis. A flood survivor at 2 a.m. does not need a brand story. They need to find help fast, feel reassured, and trust that someone is already on the ground.
Generic charity layouts bury calls to action beneath institutional messaging
Donation-first page structures ignore visitors who need services, not just to give
Cold, formal design fails to convey the warmth and presence that defines real relief work
What you get with this template
You get a fully structured, single-page layout that earns trust before it asks for anything. Every section is sequenced to match the emotional journey of the people most likely to find this page.
A hero testimonial card section with a survivor portrait, serif quote, and pinned-card aesthetic
A three-phase mission narrative anchored by the verbs Respond, Rebuild, and Remain
A help hub section with a postcode search field and a free PDF guide email capture form
A two-path volunteer and donate conversion section and a persistent top donation bar
Theme
Healing Space
Creative direction
Vision & Mission
Color system
Forest Trust
Style
Hero-Dominant (90/10)
Direction
Content/Resource
Page Sections
Pinned Survivor Testimonial Hero
Oversized Scale Statistic Block
Three-phase Mission Narrative
Postcode Help Finder
PDF Recovery Guide Download
Persistent Amber Donate Bar
Related questions
Who is this landing page template designed for?
Can I adapt this template for a charity that covers more than flooding?
What is the primary call to action on this page?
Does the template include the PDF recovery guide content?
Is this template suitable for visitors searching from a mobile phone?
Feature list
This template is built around one principle: serve the visitor in crisis first, convert compassion into action second. Every feature below exists to support that sequence.
Pinned Survivor Testimonial Hero
The page opens with a single oversized card floating against the cream background. It holds a portrait photograph of a flood survivor in their restored home, two lines of serif quote text, and a quiet credit line with the person's name, town, and flood year. There is no competing logo. The card has a subtle shadow that makes it feel pinned to a community notice board.
Oversized Statistics Section
A single devastating statistic is rendered in large river-silt typography immediately after the hero. This section stops the scroll and anchors the scale of the problem without needing a paragraph of explanation.
Three-Phase Mission Narrative
The Respond, Rebuild, and Remain sections each carry field photography and a short descriptive paragraph. The sequence moves visitors from urgency through recovery to resilience, with whitespace used generously so the weight of the work speaks for itself.
Postcode Help Finder
The help hub section includes a postcode search field designed to surface local flood recovery resources, emergency contacts, and active volunteer projects near the visitor. This is the primary call to action for flood-affected visitors.
PDF Guide Email Capture
A secondary conversion path offers a free downloadable flood recovery guide. Visitors provide only an email address. This gives people who are not yet ready to search by postcode a low-barrier way to receive practical support.
Persistent Donate Bar
A slim, unobtrusive top bar carries a warm amber Donate Now button visible at all times. It serves visitors who arrive already decided to give, without interrupting the recovery-focused flow of the page below.
Page sections overview
Section
Purpose
Persistent top bar
Always-visible donation entry point
Survivor testimonial hero
Builds immediate emotional trust
Scale statistic block
Communicates urgency and problem size
Respond mission section
Describes emergency response phase
Rebuild mission section
Describes physical rebuilding phase
Remain mission section
Describes long-term resilience work
Postcode help finder
Connects survivors to local resources
PDF guide download
Email capture for recovery guide
Volunteer and donate
Two-path action conversion section
Footer
Organisational and navigation links
Design & branding system
The visual identity follows a Healing Space theme. The palette is drawn from a riverbank two months after a flood, when the mud has dried, green shoots are visible, and the sky has finally cleared.
Warm shelter cream (#F5F0E1) carries the page as the dominant background, giving every section a sense of dry, stable ground
Regeneration green (#4A7C59) appears where hope and forward momentum enter the narrative
Clean water blue (#A8D0DB) is used sparingly, reclaimed as something safe rather than threatening
Deep river silt (#3B3A30) anchors headlines and the oversized statistics block; quiet amber (#D4A24E) highlights buttons and progress indicators
Typography pairs Fraunces serif headlines with DM Sans body text for a tone that is both trustworthy and readable
Mobile & speed optimization
This template is built mobile-first. Flood survivors searching for help are most likely doing so from a phone, often in difficult circumstances and at unusual hours.
The layout prioritises fast first paint so the testimonial hero loads quickly on mobile connections
Scroll-reveal animations, staggered section reveals, and subtle parallax are set at a medium intensity that does not delay critical content
The postcode search field and PDF download form are designed for easy tap interaction on small screens
How this template helps you convert
The page is structured so trust is earned before any conversion is attempted. Visitors arrive in different emotional states, and the layout serves each of them without forcing a single path.
Flood survivors find the postcode help finder prominently placed after the mission narrative, giving them a clear, immediate action that serves their need directly
Volunteers and donors are guided to a dedicated two-path section after the story has fully landed, making their next step feel natural rather than pressured
Already-decided donors see the persistent top bar amber button immediately, so they never have to scroll to give
Other information about this template
This template was designed specifically for UK-based flood relief charities. Several structural details reflect that context and are worth noting before you customise.
Localisation is set for UK English, UK postcode format, and GBP currency references
The footer uses a split layout approach suited to displaying organisational links, charity registration details, and regional contact information
Field photography is used throughout the mission sections; sourcing authentic, high-quality images of real recovery work will significantly strengthen the emotional impact
The template is well-suited to any disaster and emergency relief charity that works across multiple phases of a crisis, not just the immediate response
Social proof is built into the structure through the hero testimonial and volunteer count metrics placeholders in the conversion section
