Skip to content
Zafar Foundation
Donate
Zafar Foundation

Design patterns · Section 07 of 14

How it works

Ten layouts showing how a donation becomes practical help, step by step. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

How it works · Design 01

Numbered row

Four steps side by side with large teal numbers and thin dividers, with a donate button beside the title.

How it works

How your support becomes practical help

From the moment you give to the moment you see what happened.

Donate now

  1. Step 1: You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2: Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3: Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4: You see what happened

    Updates on completed work are published on the Impact page as they are verified.

How it works · Design 02

Vertical timeline

A photo and introduction on the left; on the right, step cards hang from a vertical line with round icon markers.

From your gift to practical help

Four steps, from the moment you give to the moment you see what happened.

A man riding a motorcycle loaded with sacks along a rural road lined with trees
Rural road in Sindh, Pakistan

  1. Step 1

    You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2

    Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3

    Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4

    You see what happened

    Updates on completed work are published on the Impact page as they are verified.

    Visit the impact page

How it works · Design 03

Cards joined by arrows

Four white cards on a pale teal background, linked by round arrow badges that point down on mobile and across on desktop.

Four steps from gift to help

From the moment you give to the moment you see what happened.

  1. Step 1: You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2: Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3: Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4: You see what happened

    Updates on completed work are published on the Impact page as they are verified.

Donate now Visit the impact page

How it works · Design 04

Circles on teal

Large icon circles on the brand teal, joined by a dashed line on desktop, each with a marigold step number.

How your support becomes practical help

From the moment you give to the moment you see what happened.

  1. Step 1: You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2: Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3: Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4: You see what happened

    Updates on completed work are published on the Impact page as they are verified.

Donate now See our impact

How it works · Design 05

Zigzag photo steps

Each step gets its own photo, alternating left and right, with a large teal number and a short explanation.

What happens after you give

Four steps, from your donation to an update that shows what it became.

  1. The Sheffield city skyline under a cloudy sky

    Step 1: You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

    See the five causes
  2. Men cooking a large pot of food over an open fire outdoors

    Step 2: Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. A man riding a motorcycle loaded with sacks along a rural road lined with trees

    Step 3: Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. A boy pumping water from a green hand pump into a bucket

    Step 4: You see what happened

    Updates on completed work are published on the Impact page as they are verified.

    Visit the impact page

How it works · Design 06

List beside a photo

A tall photo with a caption chip next to a ruled, numbered list of the four steps and two buttons.

Two children working a hand pump in a hazy field
Working in Pakistan: Kandiaro, Sindh

How it works

Where your donation goes, step by step

From the moment you give to the moment you see what happened.

  1. Step 1: You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2: Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3: Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4: You see what happened

    Updates on completed work are published on the Impact page as they are verified.

Donate now Give Zakat

How it works · Design 07

Accordion steps

An introduction beside four expandable steps built with details and summary; the first step starts open.

How it works

Follow your gift, step by step

Open each step to see what happens between your donation and the update that shows what it became.

Donate now Ask us about the work
1 You choose where your gift goes

The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate. UK taxpayers can add Gift Aid, which adds 25p to every £1.

See the five causes
2 Support becomes practical items and services

Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

What each cause funds
3 Help reaches people directly

Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

4 You see what happened

Updates on completed work are published on the Impact page as they are verified. Each figure is published with its period and its source.

Visit the impact page

How it works · Design 08

Progress stepper

Numbered nodes on a connecting line, horizontal on desktop and vertical on mobile, ending in a marigold check.

From giving to seeing the result

Your gift moves through four steps. Updates on completed work are published as they are verified.

  1. Step 1 of 4

    You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2 of 4

    Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3 of 4

    Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4 of 4

    You see what happened

    Updates on completed work are published on the Impact page as they are verified.

Ready for step one?

Give monthly Donate now

How it works · Design 09

Ink numbered grid

A dark section with a two-by-two grid of steps divided by hairlines, each led by an outlined marigold number.

How it works

Your gift, in four steps

From the moment you give to the moment you see what happened.

Donate now Give monthly

  1. Step 1: You choose where your gift goes

    The current appeal, a specific cause, or a general donation. Zakat and Sadaqah are kept separate.

  2. Step 2: Support becomes practical items and services

    Food parcels, hand pumps, medicines, school costs or emergency supplies, bought for the people who need them.

  3. Step 3: Help reaches people directly

    Delivered to families and communities in Pakistan and the UK, with dignity and without conditions.

  4. Step 4: You see what happened

    Updates on completed work are published on the Impact page as they are verified.

How it works · Design 10

Compact inline steps

A slim marigold band with the four steps in one row and a donate button, for use between larger sections.

How your gift becomes help

Donate now
  1. 1 You choose where your gift goes
  2. 2 It becomes practical items and services
  3. 3 Help reaches people directly
  4. 4 You see what happened, on the Impact page