Design patterns · Section 06 of 14

Causes & programmes

Ten ways to present the five causes: food distribution, clean water, medical assistance, education and emergency relief. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Causes & programmes · Design 01

Three-up photo cards

Five photo cards in a three-column grid, finished by a dark card that offers a general donation or Zakat.

Our causes

Five ways to give practical help

Five areas of practical work in Pakistan and the UK, from immediate needs to lasting foundations.

How each cause works

Immediate needs

Food distribution

Food parcels with staple items for families who cannot afford them.

Give to this cause: Food distribution
Lasting foundations

Clean water

Hand pumps that give households a safe and reliable water supply close to home.

Give to this cause: Clean water
Immediate needs

Medical assistance

Help with treatment costs, medicines and access to care for people who cannot pay for them.

Give to this cause: Medical assistance
Lasting foundations

Education

Support that keeps children and young people learning, from fees and materials to practical school needs.

Give to this cause: Education
Immediate needs

Emergency relief

Practical help when floods, extreme weather or sudden hardship put families at risk.

Give to this cause: Emergency relief
Wherever it is needed

Not sure which cause to choose?

A general donation is used wherever the need is greatest. Zakat and Sadaqah can also be given directly and are kept separate from other funds.
- Give once or set up a monthly gift
- Gift Aid adds 25p to every £1 for UK taxpayers
Give a general donation Give Zakat

<section aria-labelledby="causes-01-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-6">
      <div class="max-w-[60ch]">
        <p class="t-label text-water">Our causes</p>
        <h2 id="causes-01-title" class="t-h2 mt-3">Five ways to give practical help</h2>
        <p class="t-lead mt-4 text-slate">Five areas of practical work in Pakistan and the UK, from immediate needs to lasting foundations.</p>
      </div>
      <a class="link t-label" href="causes.html">How each cause works</a>
    </div>
    <ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
      <li class="group card card-hover flex flex-col overflow-hidden">
        <div class="aspect-[4/3] overflow-hidden bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" style="object-position: 50% 60%"></div>
        <div class="flex flex-1 flex-col p-6 sm:p-7">
          <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</p>
          <h3 class="t-h3 mt-2">Food distribution</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Food parcels with staple items for families who cannot afford them.</p>
          <p class="mt-5"><a class="link t-label inline-flex items-center gap-1.5" href="donate.html?fund=food">Give to this cause<span class="sr-only">: Food distribution</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></p>
        </div>
      </li>
      <li class="group card card-hover flex flex-col overflow-hidden">
        <div class="aspect-[4/3] overflow-hidden bg-mist"><img src="images/water-hand-pump-man.jpg" srcset="images/webp/water-hand-pump-man-640.webp 640w, images/webp/water-hand-pump-man-1080.webp 1080w" sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw" alt="A man in shalwar kameez working the handle of a hand pump in a field" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" style="object-position: 50% 30%"></div>
        <div class="flex flex-1 flex-col p-6 sm:p-7">
          <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Lasting foundations</p>
          <h3 class="t-h3 mt-2">Clean water</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Hand pumps that give households a safe and reliable water supply close to home.</p>
          <p class="mt-5"><a class="link t-label inline-flex items-center gap-1.5" href="donate.html?fund=water">Give to this cause<span class="sr-only">: Clean water</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></p>
        </div>
      </li>
      <li class="group card card-hover flex flex-col overflow-hidden">
        <div class="aspect-[4/3] overflow-hidden bg-mist"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw" alt="A doctor taking a patient's blood pressure in a small clinic" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" style="object-position: 50% 40%"></div>
        <div class="flex flex-1 flex-col p-6 sm:p-7">
          <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</p>
          <h3 class="t-h3 mt-2">Medical assistance</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Help with treatment costs, medicines and access to care for people who cannot pay for them.</p>
          <p class="mt-5"><a class="link t-label inline-flex items-center gap-1.5" href="donate.html?fund=medical">Give to this cause<span class="sr-only">: Medical assistance</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></p>
        </div>
      </li>
      <li class="group card card-hover flex flex-col overflow-hidden">
        <div class="aspect-[4/3] overflow-hidden bg-mist"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw" alt="Students at wooden desks listening to a teacher writing on the board" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]"></div>
        <div class="flex flex-1 flex-col p-6 sm:p-7">
          <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Lasting foundations</p>
          <h3 class="t-h3 mt-2">Education</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Support that keeps children and young people learning, from fees and materials to practical school needs.</p>
          <p class="mt-5"><a class="link t-label inline-flex items-center gap-1.5" href="donate.html?fund=education">Give to this cause<span class="sr-only">: Education</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></p>
        </div>
      </li>
      <li class="group card card-hover flex flex-col overflow-hidden">
        <div class="aspect-[4/3] overflow-hidden bg-mist"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw" alt="People wading through floodwater carrying belongings past submerged trees" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" style="object-position: 50% 60%"></div>
        <div class="flex flex-1 flex-col p-6 sm:p-7">
          <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</p>
          <h3 class="t-h3 mt-2">Emergency relief</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Practical help when floods, extreme weather or sudden hardship put families at risk.</p>
          <p class="mt-5"><a class="link t-label inline-flex items-center gap-1.5" href="donate.html?fund=crisis">Give to this cause<span class="sr-only">: Emergency relief</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></p>
        </div>
      </li>
      <li class="flex flex-col justify-between rounded-xl bg-ink p-6 text-white sm:p-8">
        <div>
          <p class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Wherever it is needed</p>
          <h3 class="t-h3 mt-2">Not sure which cause to choose?</h3>
          <p class="mt-3 text-[15px] leading-relaxed text-white/80">A general donation is used wherever the need is greatest. Zakat and Sadaqah can also be given directly and are kept separate from other funds.</p>
          <ul class="mt-6 grid gap-2.5 border-t border-white/15 pt-6">
            <li class="flex items-start gap-3 font-display text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Give once or set up a monthly gift</li>
            <li class="flex items-start gap-3 font-display text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Gift Aid adds 25p to every £1 for UK taxpayers</li>
          </ul>
        </div>
        <div class="mt-8 flex flex-wrap items-center gap-x-5 gap-y-3">
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px]" href="donate.html?fund=general">Give a general donation</a>
          <a class="link-on-dark t-label" href="donate.html?fund=zakat">Give Zakat</a>
        </div>
      </li>
    </ul>
  </div>
</section>

Causes & programmes · Design 02

Five-cause bento

A bento grid that mixes photo tiles with teal, white and marigold tiles, led by a large Food distribution feature.

Every donation can be directed to a cause

Five areas of practical work, from a family's immediate needs to foundations that keep helping.

Men cooking a large pot of food over an open fire outdoors

Immediate needs

<section aria-labelledby="causes-02-title" class="bg-smoke py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-4 lg:grid-cols-2 lg:items-end lg:gap-16">
      <h2 id="causes-02-title" class="t-h2 max-w-[18ch]">Every donation can be directed to a cause</h2>
      <p class="t-lead text-slate lg:max-w-[48ch]">Five areas of practical work, from a family's immediate needs to foundations that keep helping.</p>
    </div>
    <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
      <a class="group relative flex min-h-[380px] flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:col-span-2 sm:p-8 lg:row-span-2 lg:min-h-[560px]" href="donate.html?fund=food">
        <img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 66vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]" style="object-position: 50% 60%">
        <span class="absolute inset-0 bg-linear-to-t from-ink via-ink/60 to-ink/0" aria-hidden="true"></span>
        <div class="relative max-w-[46ch]">
          <span class="t-caption inline-flex rounded-full bg-marigold px-3 py-1 font-semibold text-ink">Immediate needs</span>
          <h3 class="t-h2 mt-4">Food distribution</h3>
          <span class="mt-3 block text-[15px] leading-relaxed text-white/85 sm:text-base">Each food parcel holds the staples a household cooks with every day: flour, rice, sugar, cooking oil, dates and pulses.</span>
          <span class="t-label mt-5 inline-flex items-center gap-1.5 underline decoration-white/50 underline-offset-4 group-hover:decoration-white">Give to food distribution<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </div>
      </a>
      <a class="group flex flex-col rounded-2xl bg-water p-6 text-white transition-colors hover:bg-water-deep sm:p-7" href="donate.html?fund=water">
        <span class="t-caption font-semibold uppercase tracking-[0.08em] text-white/75">Lasting foundations</span>
        <h3 class="t-h3 mt-2">Clean water</h3>
        <span class="mt-2 flex-1 text-[15px] leading-relaxed text-white/85">Hand pumps giving households a safe and reliable water supply close to home.</span>
        <span class="t-label mt-6 inline-flex items-center gap-1.5">Give to this cause<span class="sr-only">: Clean water</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
      </a>
      <a class="group flex flex-col rounded-2xl border border-line bg-white p-6 transition-colors hover:border-water sm:p-7" href="donate.html?fund=medical">
        <span class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</span>
        <h3 class="t-h3 mt-2 group-hover:text-water">Medical assistance</h3>
        <span class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Consultations, medicines, tests and treatment for people who would otherwise go without.</span>
        <span class="t-label mt-6 inline-flex items-center gap-1.5 text-water">Give to this cause<span class="sr-only">: Medical assistance</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
      </a>
      <a class="group flex flex-col rounded-2xl bg-marigold p-6 text-ink transition-colors hover:bg-marigold-deep sm:p-7" href="donate.html?fund=education">
        <span class="t-caption font-semibold uppercase tracking-[0.08em] text-ink/75">Lasting foundations</span>
        <h3 class="t-h3 mt-2">Education</h3>
        <span class="mt-2 flex-1 text-[15px] leading-relaxed text-ink/85">The practical costs that keep children in school: fees, uniforms, books and stationery.</span>
        <span class="t-label mt-6 inline-flex items-center gap-1.5">Give to this cause<span class="sr-only">: Education</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
      </a>
      <a class="group relative flex min-h-[320px] flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:p-7 lg:col-span-2" href="donate.html?fund=crisis">
        <img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="(min-width: 1024px) 66vw, (min-width: 640px) 50vw, 100vw" alt="People wading through floodwater carrying belongings past submerged trees" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]" style="object-position: 50% 60%">
        <span class="absolute inset-0 bg-linear-to-t from-ink from-15% via-ink/75 via-55% to-ink/10 lg:bg-linear-to-r lg:from-ink lg:via-ink/70 lg:to-ink/0" aria-hidden="true"></span>
        <div class="relative max-w-[40ch]">
          <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Immediate needs</span>
          <h3 class="t-h3 mt-2">Emergency relief</h3>
          <span class="mt-2 block text-[15px] leading-relaxed text-white/85">Food, clean water, shelter and medicine, delivered quickly when a flood or sudden hardship hits.</span>
          <span class="t-label mt-5 inline-flex items-center gap-1.5">Give to this cause<span class="sr-only">: Emergency relief</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-0.5"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </div>
      </a>
    </div>
  </div>
</section>

Causes & programmes · Design 03

Cause tabs

CSS-only tabs on an ink background: pick a cause to see its photo, description and what support is used for.

Our causes

Choose a cause to read about

Five areas of practical work. Every donation can be directed to one of them.

Food distribution Clean water Medical assistance Education Emergency relief

<section aria-labelledby="causes-03-title" class="bg-ink py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="max-w-[60ch]">
      <p class="t-label text-marigold">Our causes</p>
      <h2 id="causes-03-title" class="t-h2 mt-3">Choose a cause to read about</h2>
      <p class="t-lead mt-4 text-white/80">Five areas of practical work. Every donation can be directed to one of them.</p>
    </div>
    <div class="mt-10 flex flex-wrap gap-2">
      <input type="radio" name="causes-03-tab" id="causes-03-food" class="peer/food sr-only" checked>
      <input type="radio" name="causes-03-tab" id="causes-03-water" class="peer/water sr-only">
      <input type="radio" name="causes-03-tab" id="causes-03-medical" class="peer/medical sr-only">
      <input type="radio" name="causes-03-tab" id="causes-03-education" class="peer/education sr-only">
      <input type="radio" name="causes-03-tab" id="causes-03-crisis" class="peer/crisis sr-only">
      <label for="causes-03-food" class="cursor-pointer rounded-full border border-white/25 px-4 py-2.5 font-display text-[15px] font-semibold text-white/85 transition-colors hover:border-white hover:text-white peer-checked/food:border-marigold peer-checked/food:bg-marigold peer-checked/food:text-ink peer-focus-visible/food:outline-2 peer-focus-visible/food:outline-offset-2 peer-focus-visible/food:outline-marigold">Food distribution</label>
      <label for="causes-03-water" class="cursor-pointer rounded-full border border-white/25 px-4 py-2.5 font-display text-[15px] font-semibold text-white/85 transition-colors hover:border-white hover:text-white peer-checked/water:border-marigold peer-checked/water:bg-marigold peer-checked/water:text-ink peer-focus-visible/water:outline-2 peer-focus-visible/water:outline-offset-2 peer-focus-visible/water:outline-marigold">Clean water</label>
      <label for="causes-03-medical" class="cursor-pointer rounded-full border border-white/25 px-4 py-2.5 font-display text-[15px] font-semibold text-white/85 transition-colors hover:border-white hover:text-white peer-checked/medical:border-marigold peer-checked/medical:bg-marigold peer-checked/medical:text-ink peer-focus-visible/medical:outline-2 peer-focus-visible/medical:outline-offset-2 peer-focus-visible/medical:outline-marigold">Medical assistance</label>
      <label for="causes-03-education" class="cursor-pointer rounded-full border border-white/25 px-4 py-2.5 font-display text-[15px] font-semibold text-white/85 transition-colors hover:border-white hover:text-white peer-checked/education:border-marigold peer-checked/education:bg-marigold peer-checked/education:text-ink peer-focus-visible/education:outline-2 peer-focus-visible/education:outline-offset-2 peer-focus-visible/education:outline-marigold">Education</label>
      <label for="causes-03-crisis" class="cursor-pointer rounded-full border border-white/25 px-4 py-2.5 font-display text-[15px] font-semibold text-white/85 transition-colors hover:border-white hover:text-white peer-checked/crisis:border-marigold peer-checked/crisis:bg-marigold peer-checked/crisis:text-ink peer-focus-visible/crisis:outline-2 peer-focus-visible/crisis:outline-offset-2 peer-focus-visible/crisis:outline-marigold">Emergency relief</label>
      <div class="mt-8 hidden w-full items-center gap-8 peer-checked/food:grid lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-white/10"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 600px, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
        <div>
          <p class="t-label text-marigold">Immediate needs</p>
          <h3 class="t-h2 mt-2">Food distribution</h3>
          <p class="t-lead mt-4 text-white/80">Each food parcel holds the staples a household cooks with every day: flour, rice, sugar, cooking oil, dates and pulses. Support for this cause goes towards parcels for families facing hunger.</p>
          <ul class="mt-6 grid gap-2.5 border-t border-white/15 pt-6">
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Staple food parcels</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Cooked meals where a kitchen is not possible</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Seasonal food support</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=food">Give to food distribution</a>
        </div>
      </div>
      <div class="mt-8 hidden w-full items-center gap-8 peer-checked/water:grid lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-white/10"><img src="images/water-hand-pump-man.jpg" srcset="images/webp/water-hand-pump-man-640.webp 640w, images/webp/water-hand-pump-man-1080.webp 1080w" sizes="(min-width: 1024px) 600px, 100vw" alt="A man in shalwar kameez working the handle of a hand pump in a field" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 30%"></div>
        <div>
          <p class="t-label text-marigold">Lasting foundations</p>
          <h3 class="t-h2 mt-2">Clean water</h3>
          <p class="t-lead mt-4 text-white/80">Each hand pump is drilled down to a clean water table. One pump can serve a household or a cluster of homes and removes the daily walk for water.</p>
          <ul class="mt-6 grid gap-2.5 border-t border-white/15 pt-6">
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Hand pump installation</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Repairs to existing pumps</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Water storage and access</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=water">Give to clean water</a>
        </div>
      </div>
      <div class="mt-8 hidden w-full items-center gap-8 peer-checked/medical:grid lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-white/10"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="(min-width: 1024px) 600px, 100vw" alt="A doctor taking a patient's blood pressure in a small clinic" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 40%"></div>
        <div>
          <p class="t-label text-marigold">Immediate needs</p>
          <h3 class="t-h2 mt-2">Medical assistance</h3>
          <p class="t-lead mt-4 text-white/80">Illness is one of the fastest routes into hardship. Support for this cause goes towards consultations, medicines, tests and treatment for people who would otherwise go without.</p>
          <ul class="mt-6 grid gap-2.5 border-t border-white/15 pt-6">
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Medicines and prescriptions</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Treatment and hospital costs</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Mobility and medical equipment</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=medical">Give to medical assistance</a>
        </div>
      </div>
      <div class="mt-8 hidden w-full items-center gap-8 peer-checked/education:grid lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-white/10"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="(min-width: 1024px) 600px, 100vw" alt="Students at wooden desks listening to a teacher writing on the board" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
        <div>
          <p class="t-label text-marigold">Lasting foundations</p>
          <h3 class="t-h2 mt-2">Education</h3>
          <p class="t-lead mt-4 text-white/80">Support for this cause goes towards the practical costs that keep children in school: fees, uniforms, books and stationery.</p>
          <ul class="mt-6 grid gap-2.5 border-t border-white/15 pt-6">
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>School fees</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Uniforms, books and stationery</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Practical school needs</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=education">Give to education</a>
        </div>
      </div>
      <div class="mt-8 hidden w-full items-center gap-8 peer-checked/crisis:grid lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-white/10"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="(min-width: 1024px) 600px, 100vw" alt="People wading through floodwater carrying belongings past submerged trees" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
        <div>
          <p class="t-label text-marigold">Immediate needs</p>
          <h3 class="t-h2 mt-2">Emergency relief</h3>
          <p class="t-lead mt-4 text-white/80">When a flood, extreme weather or a sudden loss of income hits, the first need is practical: food, clean water, shelter and medicine, delivered quickly.</p>
          <ul class="mt-6 grid gap-2.5 border-t border-white/15 pt-6">
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Emergency food and water</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Shelter and essential items</li>
            <li class="flex items-start gap-3 text-[15px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Recovery after a disaster</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=crisis">Give to emergency relief</a>
        </div>
      </div>
    </div>
  </div>
</section>

Causes & programmes · Design 04

Thumbnail list

An intro column beside a ruled list of causes, each row with a photo thumbnail, its group and an arrow.

Where your donation can go

Five areas of practical work, from a family's immediate needs to foundations that keep helping. Every donation can be directed to one of them.

Not sure which cause to choose?

A general donation is used wherever the need is greatest. Zakat and Sadaqah are kept separate.

Give a general donation

<section aria-labelledby="causes-04-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:grid-rows-[auto_1fr] lg:gap-x-16 lg:gap-y-8">
    <div class="lg:col-span-4">
      <h2 id="causes-04-title" class="t-h2">Where your donation can go</h2>
      <p class="t-lead mt-4 text-slate">Five areas of practical work, from a family's immediate needs to foundations that keep helping. Every donation can be directed to one of them.</p>
    </div>
    <ul class="divide-y divide-line border-y border-line lg:col-span-8 lg:col-start-5 lg:row-span-2 lg:row-start-1">
      <li>
        <a class="group flex items-start gap-4 py-5 sm:items-center sm:gap-6 sm:py-6" href="donate.html?fund=food">
          <span class="block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-mist sm:h-24 sm:w-32"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="128px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></span>
          <div class="min-w-0 flex-1">
            <span class="t-caption block font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</span>
            <h3 class="mt-1 font-display text-xl font-semibold leading-tight transition-colors group-hover:text-water sm:text-2xl">Food distribution</h3>
            <span class="mt-1.5 block text-[15px] leading-relaxed text-slate">Food parcels with staple items for families who cannot afford them.</span>
          </div>
          <span class="hidden size-11 shrink-0 place-items-center rounded-full border border-line transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white sm:grid" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li>
        <a class="group flex items-start gap-4 py-5 sm:items-center sm:gap-6 sm:py-6" href="donate.html?fund=water">
          <span class="block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-mist sm:h-24 sm:w-32"><img src="images/water-pump-children-sindh.jpg" srcset="images/webp/water-pump-children-sindh-640.webp 640w, images/webp/water-pump-children-sindh-1080.webp 1080w" sizes="128px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span>
          <div class="min-w-0 flex-1">
            <span class="t-caption block font-semibold uppercase tracking-[0.08em] text-water">Lasting foundations</span>
            <h3 class="mt-1 font-display text-xl font-semibold leading-tight transition-colors group-hover:text-water sm:text-2xl">Clean water</h3>
            <span class="mt-1.5 block text-[15px] leading-relaxed text-slate">Hand pumps giving households a safe and reliable water supply close to home.</span>
          </div>
          <span class="hidden size-11 shrink-0 place-items-center rounded-full border border-line transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white sm:grid" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li>
        <a class="group flex items-start gap-4 py-5 sm:items-center sm:gap-6 sm:py-6" href="donate.html?fund=medical">
          <span class="block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-mist sm:h-24 sm:w-32"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="128px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 40%"></span>
          <div class="min-w-0 flex-1">
            <span class="t-caption block font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</span>
            <h3 class="mt-1 font-display text-xl font-semibold leading-tight transition-colors group-hover:text-water sm:text-2xl">Medical assistance</h3>
            <span class="mt-1.5 block text-[15px] leading-relaxed text-slate">Treatment costs, medicines and access to care for people who cannot pay for them.</span>
          </div>
          <span class="hidden size-11 shrink-0 place-items-center rounded-full border border-line transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white sm:grid" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li>
        <a class="group flex items-start gap-4 py-5 sm:items-center sm:gap-6 sm:py-6" href="donate.html?fund=education">
          <span class="block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-mist sm:h-24 sm:w-32"><img src="images/children-walking-to-school.jpg" srcset="images/webp/children-walking-to-school-640.webp 640w, images/webp/children-walking-to-school-1080.webp 1080w" sizes="128px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 55%"></span>
          <div class="min-w-0 flex-1">
            <span class="t-caption block font-semibold uppercase tracking-[0.08em] text-water">Lasting foundations</span>
            <h3 class="mt-1 font-display text-xl font-semibold leading-tight transition-colors group-hover:text-water sm:text-2xl">Education</h3>
            <span class="mt-1.5 block text-[15px] leading-relaxed text-slate">Fees, uniforms, books and stationery that keep children in school.</span>
          </div>
          <span class="hidden size-11 shrink-0 place-items-center rounded-full border border-line transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white sm:grid" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li>
        <a class="group flex items-start gap-4 py-5 sm:items-center sm:gap-6 sm:py-6" href="donate.html?fund=crisis">
          <span class="block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-mist sm:h-24 sm:w-32"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="128px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></span>
          <div class="min-w-0 flex-1">
            <span class="t-caption block font-semibold uppercase tracking-[0.08em] text-water">Immediate needs</span>
            <h3 class="mt-1 font-display text-xl font-semibold leading-tight transition-colors group-hover:text-water sm:text-2xl">Emergency relief</h3>
            <span class="mt-1.5 block text-[15px] leading-relaxed text-slate">Practical help when floods, extreme weather or sudden hardship put families at risk.</span>
          </div>
          <span class="hidden size-11 shrink-0 place-items-center rounded-full border border-line transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white sm:grid" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
    </ul>
    <div class="self-start rounded-xl bg-smoke p-6 lg:col-span-4 lg:row-start-2">
      <h3 class="font-display text-[17px] font-semibold">Not sure which cause to choose?</h3>
      <p class="mt-2 text-[15px] leading-relaxed text-slate">A general donation is used wherever the need is greatest. Zakat and Sadaqah are kept separate.</p>
      <a class="link t-label mt-4" href="donate.html?fund=general">Give a general donation</a>
    </div>
  </div>
</section>

Causes & programmes · Design 05

Scroll-snap row

A teal section with a swipeable row of cause cards that snap into place, showing about three at a time on desktop.

Five causes, one purpose

Practical help with essential needs in Pakistan and the UK: food, clean water, medical care, education and emergency relief.

Scroll to see all five

Food distribution

Staple food parcels, cooked meals where a kitchen is not possible, and seasonal food support.
Give to this cause: Food distribution
Clean water

Hand pump installation, repairs to existing pumps, and water storage and access.
Give to this cause: Clean water
Medical assistance

Medicines and prescriptions, treatment and hospital costs, and mobility and medical equipment.
Give to this cause: Medical assistance
Education

School fees, uniforms, books and stationery, and other practical school needs.
Give to this cause: Education
Emergency relief

Emergency food and water, shelter and essential items, and recovery after a disaster.
Give to this cause: Emergency relief

<section aria-labelledby="causes-05-title" class="overflow-hidden bg-water py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-6">
      <div class="max-w-[56ch]">
        <h2 id="causes-05-title" class="t-h2">Five causes, one purpose</h2>
        <p class="t-lead mt-4 text-white/85">Practical help with essential needs in Pakistan and the UK: food, clean water, medical care, education and emergency relief.</p>
      </div>
      <p class="t-label inline-flex items-center gap-2 text-white/80">Scroll to see all five<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></p>
    </div>
    <ul class="relative -mx-5 mt-10 flex snap-x snap-mandatory scroll-px-5 gap-4 overflow-x-auto px-5 pb-4 sm:-mx-8 sm:scroll-px-8 sm:px-8 lg:gap-6" tabindex="0" aria-label="Causes, scrolls sideways">
      <li class="flex w-[82%] shrink-0 snap-start sm:w-[46%] lg:w-[31%]">
        <article class="flex w-full flex-col overflow-hidden rounded-xl bg-white text-ink">
          <div class="aspect-[3/2] overflow-hidden bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 400px, 80vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
          <div class="flex flex-1 flex-col p-6">
            <h3 class="t-h3">Food distribution</h3>
            <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Staple food parcels, cooked meals where a kitchen is not possible, and seasonal food support.</p>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mt-6 self-start" href="donate.html?fund=food">Give to this cause<span class="sr-only">: Food distribution</span></a>
          </div>
        </article>
      </li>
      <li class="flex w-[82%] shrink-0 snap-start sm:w-[46%] lg:w-[31%]">
        <article class="flex w-full flex-col overflow-hidden rounded-xl bg-white text-ink">
          <div class="aspect-[3/2] overflow-hidden bg-mist"><img src="images/water-hand-pump-boy.jpg" srcset="images/webp/water-hand-pump-boy-640.webp 640w, images/webp/water-hand-pump-boy-1080.webp 1080w" sizes="(min-width: 1024px) 400px, 80vw" alt="A boy pumping water from a green hand pump into a bucket" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 45%"></div>
          <div class="flex flex-1 flex-col p-6">
            <h3 class="t-h3">Clean water</h3>
            <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Hand pump installation, repairs to existing pumps, and water storage and access.</p>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mt-6 self-start" href="donate.html?fund=water">Give to this cause<span class="sr-only">: Clean water</span></a>
          </div>
        </article>
      </li>
      <li class="flex w-[82%] shrink-0 snap-start sm:w-[46%] lg:w-[31%]">
        <article class="flex w-full flex-col overflow-hidden rounded-xl bg-white text-ink">
          <div class="aspect-[3/2] overflow-hidden bg-mist"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="(min-width: 1024px) 400px, 80vw" alt="A doctor taking a patient's blood pressure in a small clinic" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 40%"></div>
          <div class="flex flex-1 flex-col p-6">
            <h3 class="t-h3">Medical assistance</h3>
            <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Medicines and prescriptions, treatment and hospital costs, and mobility and medical equipment.</p>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mt-6 self-start" href="donate.html?fund=medical">Give to this cause<span class="sr-only">: Medical assistance</span></a>
          </div>
        </article>
      </li>
      <li class="flex w-[82%] shrink-0 snap-start sm:w-[46%] lg:w-[31%]">
        <article class="flex w-full flex-col overflow-hidden rounded-xl bg-white text-ink">
          <div class="aspect-[3/2] overflow-hidden bg-mist"><img src="images/outdoor-class.jpg" srcset="images/webp/outdoor-class-640.webp 640w, images/webp/outdoor-class-1080.webp 1080w" sizes="(min-width: 1024px) 400px, 80vw" alt="A large group of children and adults gathered for an outdoor class, some seated with books" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
          <div class="flex flex-1 flex-col p-6">
            <h3 class="t-h3">Education</h3>
            <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">School fees, uniforms, books and stationery, and other practical school needs.</p>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mt-6 self-start" href="donate.html?fund=education">Give to this cause<span class="sr-only">: Education</span></a>
          </div>
        </article>
      </li>
      <li class="flex w-[82%] shrink-0 snap-start sm:w-[46%] lg:w-[31%]">
        <article class="flex w-full flex-col overflow-hidden rounded-xl bg-white text-ink">
          <div class="aspect-[3/2] overflow-hidden bg-mist"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="(min-width: 1024px) 400px, 80vw" alt="People wading through floodwater carrying belongings past submerged trees" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
          <div class="flex flex-1 flex-col p-6">
            <h3 class="t-h3">Emergency relief</h3>
            <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Emergency food and water, shelter and essential items, and recovery after a disaster.</p>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mt-6 self-start" href="donate.html?fund=crisis">Give to this cause<span class="sr-only">: Emergency relief</span></a>
          </div>
        </article>
      </li>
    </ul>
  </div>
</section>

Causes & programmes · Design 06

Photo posters

Tall photo cards with a dark fade and the text laid over the image; five across on wide screens.

Choose where your gift goes

The current appeal, a specific cause, or a general donation. These are the five causes you can give to.

<section aria-labelledby="causes-06-title" class="bg-smoke py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <h2 id="causes-06-title" class="t-h2">Choose where your gift goes</h2>
      <p class="t-lead mt-4 text-slate">The current appeal, a specific cause, or a general donation. These are the five causes you can give to.</p>
    </div>
    <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:gap-5 xl:grid-cols-5">
      <li>
        <a class="group relative flex aspect-square flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:aspect-[3/4] xl:aspect-[3/5] xl:p-5" href="donate.html?fund=food">
          <img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1280px) 240px, (min-width: 640px) 50vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" style="object-position: 50% 60%">
          <span class="absolute inset-0 bg-linear-to-t from-ink from-10% via-ink/75 via-50% to-ink/0" aria-hidden="true"></span>
          <div class="relative">
            <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Immediate needs</span>
            <h3 class="mt-2 font-display text-2xl font-semibold leading-tight">Food distribution</h3>
            <span class="mt-2 block text-[15px] leading-relaxed text-white/85">Staple food parcels for families who cannot afford them.</span>
            <span class="t-label mt-4 inline-flex items-center gap-1.5">Give<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </div>
        </a>
      </li>
      <li>
        <a class="group relative flex aspect-square flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:aspect-[3/4] xl:aspect-[3/5] xl:p-5" href="donate.html?fund=water">
          <img src="images/water-pump-children-sindh.jpg" srcset="images/webp/water-pump-children-sindh-640.webp 640w, images/webp/water-pump-children-sindh-1080.webp 1080w" sizes="(min-width: 1280px) 240px, (min-width: 640px) 50vw, 100vw" alt="Two children working a hand pump in a hazy field" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          <span class="absolute inset-0 bg-linear-to-t from-ink from-10% via-ink/75 via-50% to-ink/0" aria-hidden="true"></span>
          <div class="relative">
            <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Lasting foundations</span>
            <h3 class="mt-2 font-display text-2xl font-semibold leading-tight">Clean water</h3>
            <span class="mt-2 block text-[15px] leading-relaxed text-white/85">Hand pumps that end the daily walk for water.</span>
            <span class="t-label mt-4 inline-flex items-center gap-1.5">Give<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </div>
        </a>
      </li>
      <li>
        <a class="group relative flex aspect-square flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:aspect-[3/4] xl:aspect-[3/5] xl:p-5" href="donate.html?fund=medical">
          <img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="(min-width: 1280px) 240px, (min-width: 640px) 50vw, 100vw" alt="A doctor taking a patient's blood pressure in a small clinic" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" style="object-position: 50% 40%">
          <span class="absolute inset-0 bg-linear-to-t from-ink from-10% via-ink/75 via-50% to-ink/0" aria-hidden="true"></span>
          <div class="relative">
            <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Immediate needs</span>
            <h3 class="mt-2 font-display text-2xl font-semibold leading-tight">Medical assistance</h3>
            <span class="mt-2 block text-[15px] leading-relaxed text-white/85">Medicines, tests and treatment for people who would go without.</span>
            <span class="t-label mt-4 inline-flex items-center gap-1.5">Give<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </div>
        </a>
      </li>
      <li>
        <a class="group relative flex aspect-square flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:aspect-[3/4] xl:aspect-[3/5] xl:p-5" href="donate.html?fund=education">
          <img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="(min-width: 1280px) 240px, (min-width: 640px) 50vw, 100vw" alt="Students at wooden desks listening to a teacher writing on the board" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          <span class="absolute inset-0 bg-linear-to-t from-ink from-10% via-ink/75 via-50% to-ink/0" aria-hidden="true"></span>
          <div class="relative">
            <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Lasting foundations</span>
            <h3 class="mt-2 font-display text-2xl font-semibold leading-tight">Education</h3>
            <span class="mt-2 block text-[15px] leading-relaxed text-white/85">Fees, uniforms, books and stationery that keep children in school.</span>
            <span class="t-label mt-4 inline-flex items-center gap-1.5">Give<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </div>
        </a>
      </li>
      <li class="sm:col-span-2 xl:col-span-1">
        <a class="group relative flex aspect-square flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:aspect-[2/1] xl:aspect-[3/5] xl:p-5" href="donate.html?fund=crisis">
          <img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="(min-width: 1280px) 240px, 100vw" alt="People wading through floodwater carrying belongings past submerged trees" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" style="object-position: 50% 60%">
          <span class="absolute inset-0 bg-linear-to-t from-ink from-10% via-ink/75 via-50% to-ink/0" aria-hidden="true"></span>
          <div class="relative">
            <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Immediate needs</span>
            <h3 class="mt-2 font-display text-2xl font-semibold leading-tight">Emergency relief</h3>
            <span class="mt-2 block text-[15px] leading-relaxed text-white/85">Food, water, shelter and medicine, delivered quickly.</span>
            <span class="t-label mt-4 inline-flex items-center gap-1.5">Give<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</section>

Causes & programmes · Design 07

Featured plus list

One featured cause with its photo, description and checklist, beside four compact cards for the other causes.

Our causes

Five areas of practical work in Pakistan and the UK, from immediate needs to lasting foundations.

A man in shalwar kameez working the handle of a hand pump in a field

Featured cause

Lasting foundations

Clean water

Each hand pump is drilled down to a clean water table. One pump can serve a household or a cluster of homes and removes the daily walk for water.

Hand pump installation
Repairs to existing pumps
Water storage and access

Give to clean water Read about all five causes

More causes

Not sure which cause to choose?

A general donation is used wherever the need is greatest.

Give a general donation

<section aria-labelledby="causes-07-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <h2 id="causes-07-title" class="t-h2 max-w-[22ch]">Our causes</h2>
    <p class="t-lead mt-4 max-w-[60ch] text-slate">Five areas of practical work in Pakistan and the UK, from immediate needs to lasting foundations.</p>
    <div class="mt-12 grid gap-8 lg:grid-cols-12 lg:gap-10">
      <article class="card overflow-hidden lg:col-span-7">
        <div class="relative aspect-[16/10] bg-mist">
          <img src="images/water-hand-pump-man.jpg" srcset="images/webp/water-hand-pump-man-640.webp 640w, images/webp/water-hand-pump-man-1080.webp 1080w" sizes="(min-width: 1024px) 700px, 100vw" alt="A man in shalwar kameez working the handle of a hand pump in a field" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 30%">
          <span class="t-caption absolute left-4 top-4 rounded-full bg-marigold px-3 py-1 font-semibold text-ink">Featured cause</span>
        </div>
        <div class="p-6 sm:p-8">
          <p class="t-label text-water">Lasting foundations</p>
          <h3 class="t-h2 mt-2">Clean water</h3>
          <p class="mt-4 leading-relaxed text-slate">Each hand pump is drilled down to a clean water table. One pump can serve a household or a cluster of homes and removes the daily walk for water.</p>
          <ul class="mt-6 grid gap-2 sm:grid-cols-3 sm:gap-4">
            <li class="flex items-start gap-2 text-[15px] text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Hand pump installation</li>
            <li class="flex items-start gap-2 text-[15px] text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Repairs to existing pumps</li>
            <li class="flex items-start gap-2 text-[15px] text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Water storage and access</li>
          </ul>
          <div class="mt-8 flex flex-wrap items-center gap-x-6 gap-y-4">
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html?fund=water">Give to clean water</a>
            <a class="link t-label" href="causes.html">Read about all five causes</a>
          </div>
        </div>
      </article>
      <div class="lg:col-span-5">
        <h3 class="t-label text-slate">More causes</h3>
        <ul class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
          <li><a class="group block h-full rounded-xl border border-line border-l-4 border-l-water bg-white p-5 transition-colors hover:bg-smoke" href="donate.html?fund=food"><span class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Immediate needs</span><span class="mt-1 flex items-center justify-between gap-3 font-display text-lg font-semibold group-hover:text-water">Food distribution<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span><span class="mt-1 block text-[15px] leading-relaxed text-slate">Food parcels with staple items for families who cannot afford them.</span></a></li>
          <li><a class="group block h-full rounded-xl border border-line border-l-4 border-l-water bg-white p-5 transition-colors hover:bg-smoke" href="donate.html?fund=medical"><span class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Immediate needs</span><span class="mt-1 flex items-center justify-between gap-3 font-display text-lg font-semibold group-hover:text-water">Medical assistance<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span><span class="mt-1 block text-[15px] leading-relaxed text-slate">Treatment costs, medicines and access to care.</span></a></li>
          <li><a class="group block h-full rounded-xl border border-line border-l-4 border-l-marigold bg-white p-5 transition-colors hover:bg-smoke" href="donate.html?fund=education"><span class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Lasting foundations</span><span class="mt-1 flex items-center justify-between gap-3 font-display text-lg font-semibold group-hover:text-water">Education<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span><span class="mt-1 block text-[15px] leading-relaxed text-slate">Fees, materials and practical school needs.</span></a></li>
          <li><a class="group block h-full rounded-xl border border-line border-l-4 border-l-water bg-white p-5 transition-colors hover:bg-smoke" href="donate.html?fund=crisis"><span class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Immediate needs</span><span class="mt-1 flex items-center justify-between gap-3 font-display text-lg font-semibold group-hover:text-water">Emergency relief<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span><span class="mt-1 block text-[15px] leading-relaxed text-slate">Practical help when floods or sudden hardship hit.</span></a></li>
        </ul>
        <div class="mt-4 rounded-xl bg-ink p-5 text-white">
          <p class="font-display text-lg font-semibold">Not sure which cause to choose?</p>
          <p class="mt-1 text-[15px] leading-relaxed text-white/80">A general donation is used wherever the need is greatest.</p>
          <a class="link-on-dark t-label mt-3" href="donate.html?fund=general">Give a general donation</a>
        </div>
      </div>
    </div>
  </div>
</section>

Causes & programmes · Design 08

Two groups

Causes split into an Immediate needs panel and a teal Lasting foundations panel, each topped with its photos.

From today's needs to lasting foundations

Five causes in two groups. Every donation can be directed to one of them.

01 · Immediate needs

Practical help when a family cannot wait

Food distribution
Give to food distribution
Staple food parcels, cooked meals and seasonal food support.
Medical assistance
Give to medical assistance
Medicines, treatment and hospital costs, and medical equipment.
Emergency relief
Give to emergency relief
Emergency food and water, shelter, and recovery after a disaster.

02 · Lasting foundations

Support that keeps helping after the first day

Clean water
Give to clean water
Hand pump installation, repairs, and water storage and access.
Education
Give to education
School fees, uniforms, books and stationery.

Not sure which to choose?

A general donation is used wherever the need is greatest.

Give a general donation

<section aria-labelledby="causes-08-title" class="bg-smoke py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <h2 id="causes-08-title" class="t-h2">From today's needs to lasting foundations</h2>
      <p class="t-lead mt-4 text-slate">Five causes in two groups. Every donation can be directed to one of them.</p>
    </div>
    <div class="mt-12 grid gap-6 lg:grid-cols-2 lg:gap-8">
      <div class="rounded-2xl border border-line bg-white p-6 sm:p-8 lg:p-10">
        <div class="grid grid-cols-3 gap-2 sm:gap-3">
          <div class="aspect-square overflow-hidden rounded-lg bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 180px, 33vw" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
          <div class="aspect-square overflow-hidden rounded-lg bg-mist"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="(min-width: 1024px) 180px, 33vw" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 40%"></div>
          <div class="aspect-square overflow-hidden rounded-lg bg-mist"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="(min-width: 1024px) 180px, 33vw" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
        </div>
        <p class="t-label mt-8 text-water">01 · Immediate needs</p>
        <h3 class="t-h2 mt-2">Practical help when a family cannot wait</h3>
        <ul class="mt-6 divide-y divide-line border-t border-line">
          <li class="py-5"><div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"><h4 class="font-display text-lg font-semibold">Food distribution</h4><a class="link t-label" href="donate.html?fund=food">Give<span class="sr-only"> to food distribution</span></a></div><p class="mt-1 text-[15px] leading-relaxed text-slate">Staple food parcels, cooked meals and seasonal food support.</p></li>
          <li class="py-5"><div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"><h4 class="font-display text-lg font-semibold">Medical assistance</h4><a class="link t-label" href="donate.html?fund=medical">Give<span class="sr-only"> to medical assistance</span></a></div><p class="mt-1 text-[15px] leading-relaxed text-slate">Medicines, treatment and hospital costs, and medical equipment.</p></li>
          <li class="pt-5"><div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"><h4 class="font-display text-lg font-semibold">Emergency relief</h4><a class="link t-label" href="donate.html?fund=crisis">Give<span class="sr-only"> to emergency relief</span></a></div><p class="mt-1 text-[15px] leading-relaxed text-slate">Emergency food and water, shelter, and recovery after a disaster.</p></li>
        </ul>
      </div>
      <div class="flex flex-col rounded-2xl bg-water p-6 text-white sm:p-8 lg:p-10">
        <div class="grid grid-cols-2 gap-2 sm:gap-3">
          <div class="aspect-[3/2] overflow-hidden rounded-lg bg-white/10"><img src="images/water-hand-pump-man.jpg" srcset="images/webp/water-hand-pump-man-640.webp 640w, images/webp/water-hand-pump-man-1080.webp 1080w" sizes="(min-width: 1024px) 280px, 50vw" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 30%"></div>
          <div class="aspect-[3/2] overflow-hidden rounded-lg bg-white/10"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="(min-width: 1024px) 280px, 50vw" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
        </div>
        <p class="t-label mt-8 text-white/85">02 · Lasting foundations</p>
        <h3 class="t-h2 mt-2">Support that keeps helping after the first day</h3>
        <ul class="mt-6 divide-y divide-white/15 border-t border-white/15">
          <li class="py-5"><div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"><h4 class="font-display text-lg font-semibold">Clean water</h4><a class="link-on-dark t-label" href="donate.html?fund=water">Give<span class="sr-only"> to clean water</span></a></div><p class="mt-1 text-[15px] leading-relaxed text-white/80">Hand pump installation, repairs, and water storage and access.</p></li>
          <li class="py-5"><div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"><h4 class="font-display text-lg font-semibold">Education</h4><a class="link-on-dark t-label" href="donate.html?fund=education">Give<span class="sr-only"> to education</span></a></div><p class="mt-1 text-[15px] leading-relaxed text-white/80">School fees, uniforms, books and stationery.</p></li>
        </ul>
        <div class="mt-auto rounded-xl bg-white/10 p-5">
          <p class="font-display text-[16px] font-semibold">Not sure which to choose?</p>
          <p class="mt-1 text-[15px] leading-relaxed text-white/80">A general donation is used wherever the need is greatest.</p>
          <a class="link-on-dark t-label mt-3" href="donate.html?fund=general">Give a general donation</a>
        </div>
      </div>
    </div>
  </div>
</section>

Causes & programmes · Design 09

Numbered columns

A minimal ink section: five ruled text columns with large marigold numbers, no photos.

Five causes you can give to

From a family's immediate needs to foundations that keep helping. Choose one, or give where the need is greatest.

How each cause works

Immediate needs
Food distribution

Food parcels with the staples a household cooks with every day.
Give to food distribution
Lasting foundations
Clean water

Hand pumps that give households a safe water supply close to home.
Give to clean water
Immediate needs
Medical assistance

Consultations, medicines, tests and treatment for people who would go without.
Give to medical assistance
Lasting foundations
Education

Fees, uniforms, books and stationery that keep children in school.
Give to education
Immediate needs
Emergency relief

Food, clean water, shelter and medicine when a flood or sudden hardship hits.
Give to emergency relief

<section aria-labelledby="causes-09-title" class="bg-ink py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-16">
      <h2 id="causes-09-title" class="t-h2 lg:col-span-6">Five causes you can give to</h2>
      <div class="lg:col-span-6">
        <p class="t-lead text-white/80">From a family's immediate needs to foundations that keep helping. Choose one, or give where the need is greatest.</p>
        <a class="link-on-dark t-label mt-4" href="causes.html">How each cause works</a>
      </div>
    </div>
    <ol class="mt-14 grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-5 xl:gap-x-8">
      <li class="group flex flex-col border-t border-white/20 pt-6 transition-colors hover:border-marigold">
        <span class="font-display text-[2.75rem] font-bold leading-none text-marigold" aria-hidden="true">01</span>
        <span class="t-caption mt-5 text-on-dark-muted">Immediate needs</span>
        <h3 class="mt-1 font-display text-xl font-semibold leading-snug">Food distribution</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-white/75">Food parcels with the staples a household cooks with every day.</p>
        <a class="link-on-dark t-label mt-5 self-start" href="donate.html?fund=food">Give<span class="sr-only"> to food distribution</span></a>
      </li>
      <li class="group flex flex-col border-t border-white/20 pt-6 transition-colors hover:border-marigold">
        <span class="font-display text-[2.75rem] font-bold leading-none text-marigold" aria-hidden="true">02</span>
        <span class="t-caption mt-5 text-on-dark-muted">Lasting foundations</span>
        <h3 class="mt-1 font-display text-xl font-semibold leading-snug">Clean water</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-white/75">Hand pumps that give households a safe water supply close to home.</p>
        <a class="link-on-dark t-label mt-5 self-start" href="donate.html?fund=water">Give<span class="sr-only"> to clean water</span></a>
      </li>
      <li class="group flex flex-col border-t border-white/20 pt-6 transition-colors hover:border-marigold">
        <span class="font-display text-[2.75rem] font-bold leading-none text-marigold" aria-hidden="true">03</span>
        <span class="t-caption mt-5 text-on-dark-muted">Immediate needs</span>
        <h3 class="mt-1 font-display text-xl font-semibold leading-snug">Medical assistance</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-white/75">Consultations, medicines, tests and treatment for people who would go without.</p>
        <a class="link-on-dark t-label mt-5 self-start" href="donate.html?fund=medical">Give<span class="sr-only"> to medical assistance</span></a>
      </li>
      <li class="group flex flex-col border-t border-white/20 pt-6 transition-colors hover:border-marigold">
        <span class="font-display text-[2.75rem] font-bold leading-none text-marigold" aria-hidden="true">04</span>
        <span class="t-caption mt-5 text-on-dark-muted">Lasting foundations</span>
        <h3 class="mt-1 font-display text-xl font-semibold leading-snug">Education</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-white/75">Fees, uniforms, books and stationery that keep children in school.</p>
        <a class="link-on-dark t-label mt-5 self-start" href="donate.html?fund=education">Give<span class="sr-only"> to education</span></a>
      </li>
      <li class="group flex flex-col border-t border-white/20 pt-6 transition-colors hover:border-marigold">
        <span class="font-display text-[2.75rem] font-bold leading-none text-marigold" aria-hidden="true">05</span>
        <span class="t-caption mt-5 text-on-dark-muted">Immediate needs</span>
        <h3 class="mt-1 font-display text-xl font-semibold leading-snug">Emergency relief</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-white/75">Food, clean water, shelter and medicine when a flood or sudden hardship hits.</p>
        <a class="link-on-dark t-label mt-5 self-start" href="donate.html?fund=crisis">Give<span class="sr-only"> to emergency relief</span></a>
      </li>
    </ol>
  </div>
</section>

Causes & programmes · Design 10

What each cause funds

A comparison list: each row shows a cause, what support is used for, its group and a give button; rows stack into cards on mobile.

What each cause funds

Every donation can be directed to one of five causes. This is what support for each one is used for.

Food distribution
- Staple food parcels
- Cooked meals where a kitchen is not possible
- Seasonal food support
Group: Immediate needs

Give to food distribution
Clean water
- Hand pump installation
- Repairs to existing pumps
- Water storage and access
Group: Lasting foundations

Give to clean water
Medical assistance
- Medicines and prescriptions
- Treatment and hospital costs
- Mobility and medical equipment
Group: Immediate needs

Give to medical assistance
Education
- School fees
- Uniforms, books and stationery
- Practical school needs
Group: Lasting foundations

Give to education
Emergency relief
- Emergency food and water
- Shelter and essential items
- Recovery after a disaster
Group: Immediate needs

Give to emergency relief

Not sure which cause to choose? Give a general donation or give Zakat.

<section aria-labelledby="causes-10-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <h2 id="causes-10-title" class="t-h2">What each cause funds</h2>
      <p class="t-lead mt-4 text-slate">Every donation can be directed to one of five causes. This is what support for each one is used for.</p>
    </div>
    <div class="mt-12 overflow-hidden rounded-2xl border border-line">
      <div class="hidden bg-smoke px-8 py-4 lg:grid lg:grid-cols-12 lg:gap-8" aria-hidden="true">
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate lg:col-span-3">Cause</p>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate lg:col-span-5">What support is used for</p>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate lg:col-span-2">Group</p>
        <p class="t-caption text-right font-semibold uppercase tracking-[0.08em] text-slate lg:col-span-2">Give</p>
      </div>
      <ul class="divide-y divide-line">
        <li class="grid gap-4 p-5 sm:p-6 lg:grid-cols-12 lg:items-center lg:gap-8 lg:px-8">
          <div class="flex items-center gap-4 lg:col-span-3"><span class="block size-14 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></span><h3 class="font-display text-lg font-semibold leading-tight">Food distribution</h3></div>
          <ul class="flex flex-wrap gap-2 lg:col-span-5"><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Staple food parcels</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Cooked meals where a kitchen is not possible</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Seasonal food support</li></ul>
          <div class="flex items-center justify-between gap-4 border-t border-line pt-4 lg:contents">
            <p class="t-caption font-semibold text-slate lg:col-span-2"><span class="lg:hidden">Group: </span>Immediate needs</p>
            <div class="lg:col-span-2 lg:text-right"><a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-10 px-4 text-[15px]" href="donate.html?fund=food">Give<span class="sr-only"> to food distribution</span></a></div>
          </div>
        </li>
        <li class="grid gap-4 p-5 sm:p-6 lg:grid-cols-12 lg:items-center lg:gap-8 lg:px-8">
          <div class="flex items-center gap-4 lg:col-span-3"><span class="block size-14 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/water-hand-pump-man.jpg" srcset="images/webp/water-hand-pump-man-640.webp 640w, images/webp/water-hand-pump-man-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 30%"></span><h3 class="font-display text-lg font-semibold leading-tight">Clean water</h3></div>
          <ul class="flex flex-wrap gap-2 lg:col-span-5"><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Hand pump installation</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Repairs to existing pumps</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Water storage and access</li></ul>
          <div class="flex items-center justify-between gap-4 border-t border-line pt-4 lg:contents">
            <p class="t-caption font-semibold text-slate lg:col-span-2"><span class="lg:hidden">Group: </span>Lasting foundations</p>
            <div class="lg:col-span-2 lg:text-right"><a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-10 px-4 text-[15px]" href="donate.html?fund=water">Give<span class="sr-only"> to clean water</span></a></div>
          </div>
        </li>
        <li class="grid gap-4 p-5 sm:p-6 lg:grid-cols-12 lg:items-center lg:gap-8 lg:px-8">
          <div class="flex items-center gap-4 lg:col-span-3"><span class="block size-14 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 40%"></span><h3 class="font-display text-lg font-semibold leading-tight">Medical assistance</h3></div>
          <ul class="flex flex-wrap gap-2 lg:col-span-5"><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Medicines and prescriptions</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Treatment and hospital costs</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Mobility and medical equipment</li></ul>
          <div class="flex items-center justify-between gap-4 border-t border-line pt-4 lg:contents">
            <p class="t-caption font-semibold text-slate lg:col-span-2"><span class="lg:hidden">Group: </span>Immediate needs</p>
            <div class="lg:col-span-2 lg:text-right"><a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-10 px-4 text-[15px]" href="donate.html?fund=medical">Give<span class="sr-only"> to medical assistance</span></a></div>
          </div>
        </li>
        <li class="grid gap-4 p-5 sm:p-6 lg:grid-cols-12 lg:items-center lg:gap-8 lg:px-8">
          <div class="flex items-center gap-4 lg:col-span-3"><span class="block size-14 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><h3 class="font-display text-lg font-semibold leading-tight">Education</h3></div>
          <ul class="flex flex-wrap gap-2 lg:col-span-5"><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">School fees</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Uniforms, books and stationery</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Practical school needs</li></ul>
          <div class="flex items-center justify-between gap-4 border-t border-line pt-4 lg:contents">
            <p class="t-caption font-semibold text-slate lg:col-span-2"><span class="lg:hidden">Group: </span>Lasting foundations</p>
            <div class="lg:col-span-2 lg:text-right"><a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-10 px-4 text-[15px]" href="donate.html?fund=education">Give<span class="sr-only"> to education</span></a></div>
          </div>
        </li>
        <li class="grid gap-4 p-5 sm:p-6 lg:grid-cols-12 lg:items-center lg:gap-8 lg:px-8">
          <div class="flex items-center gap-4 lg:col-span-3"><span class="block size-14 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></span><h3 class="font-display text-lg font-semibold leading-tight">Emergency relief</h3></div>
          <ul class="flex flex-wrap gap-2 lg:col-span-5"><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Emergency food and water</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Shelter and essential items</li><li class="rounded-md bg-water-tint px-2.5 py-1 font-display text-[14px] leading-snug text-water-deep">Recovery after a disaster</li></ul>
          <div class="flex items-center justify-between gap-4 border-t border-line pt-4 lg:contents">
            <p class="t-caption font-semibold text-slate lg:col-span-2"><span class="lg:hidden">Group: </span>Immediate needs</p>
            <div class="lg:col-span-2 lg:text-right"><a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-10 px-4 text-[15px]" href="donate.html?fund=crisis">Give<span class="sr-only"> to emergency relief</span></a></div>
          </div>
        </li>
      </ul>
    </div>
    <p class="mt-8 text-center text-[15px] text-slate">Not sure which cause to choose? <a class="link t-label" href="donate.html?fund=general">Give a general donation</a> or <a class="link t-label" href="donate.html?fund=zakat">give Zakat</a>.</p>
  </div>
</section>