Design patterns · Section 02 of 14

Home heroes

Ten opening sections for the homepage: the current appeal, the charity’s purpose and the main donate actions. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Home heroes · Design 01

Full-bleed appeal

A static version of the site hero: full-width photo with the left-to-right scrim, the current appeal, a donate button and a trust line.

Women and a child drawing water from a hand pump beside their home in a village

Current appeal

Essential support for families in Pakistan

Our current appeal funds practical help for vulnerable families in Pakistan: food parcels, hand pumps for clean water, and support with medical and other essential needs.

Donate now Learn about our work

Registered charity 1215863
Gift Aid adds 25p to every £1
Zakat and Sadaqah kept separate

<section aria-labelledby="hero-01-title" class="relative isolate flex min-h-[600px] items-end overflow-hidden bg-ink text-white sm:min-h-[640px] lg:min-h-[min(78vh,800px)] lg:items-center">
  <div class="absolute inset-0 -z-10">
    <img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="100vw" alt="Women and a child drawing water from a hand pump beside their home in a village" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 60% 50%">
    <div class="hero-scrim absolute inset-0" aria-hidden="true"></div>
  </div>
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 pb-12 pt-32 sm:pb-16 lg:py-24">
    <div class="max-w-[40rem]">
      <p class="t-label inline-flex items-center gap-2.5 text-white/90"><span class="size-2 rounded-full bg-marigold" aria-hidden="true"></span>Current appeal</p>
      <h2 id="hero-01-title" class="t-display mt-4">Essential support for families in Pakistan</h2>
      <p class="t-lead mt-6 max-w-[44ch] text-white/90">Our current appeal funds practical help for vulnerable families in Pakistan: food parcels, hand pumps for clean water, and support with medical and other essential needs.</p>
      <div class="mt-8 flex flex-wrap items-center gap-x-8 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-14 px-7 text-[17px]" href="donate.html?fund=current-appeal">Donate now</a>
        <a class="link-on-dark t-label" href="about.html">Learn about our work</a>
      </div>
      <ul class="t-caption mt-12 flex flex-wrap gap-x-6 gap-y-2.5 border-t border-white/20 pt-5 text-white/85">
        <li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-marigold"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>Registered charity 1215863</li>
        <li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="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</li>
        <li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="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>Zakat and Sadaqah kept separate</li>
      </ul>
    </div>
  </div>
</section>

Home heroes · Design 02

Split with framed photo

Copy and two buttons on the left; a large rounded photo on the right, set on a marigold block with a floating charity-number card.

Pakistan and the United Kingdom

Supporting people and communities facing hardship

Zafar Foundation is a UK-registered charity giving practical help with essential needs: food, clean water, medical care, education and emergency relief.

Donate now Our causes

Three children walking together along an unpaved road in morning light

Registered charity 1215863, England and Wales

<section aria-labelledby="hero-02-title" class="bg-white text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-12 py-14 sm:py-20 lg:grid-cols-12 lg:gap-16 lg:py-24">
    <div class="lg:col-span-6">
      <p class="t-caption inline-flex items-center gap-2 rounded-full bg-water-tint px-3 py-1.5 font-semibold text-water"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg>Pakistan and the United Kingdom</p>
      <h2 id="hero-02-title" class="t-display mt-5 max-w-[15ch]">Supporting people and communities facing hardship</h2>
      <p class="t-lead mt-6 max-w-[46ch] text-slate">Zafar Foundation is a UK-registered charity giving practical help with essential needs: food, clean water, medical care, education and emergency relief.</p>
      <div class="mt-8 flex flex-wrap gap-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-14 px-7 text-[17px]" href="donate.html">Donate now</a>
        <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-14 px-7 text-[17px]" href="causes.html">Our causes</a>
      </div>
    </div>
    <div class="lg:col-span-6">
      <div class="relative pb-8 pl-6 sm:pb-10 sm:pl-10">
        <div class="absolute bottom-0 left-0 h-3/4 w-3/4 rounded-2xl bg-marigold" aria-hidden="true"></div>
        <div class="relative aspect-[4/3] overflow-hidden rounded-2xl bg-mist shadow-[var(--shadow-card-hover)] lg:aspect-[6/5]">
          <img src="images/children-walking-road.jpg" srcset="images/webp/children-walking-road-640.webp 640w, images/webp/children-walking-road-1080.webp 1080w" sizes="(min-width: 1024px) 45vw, 100vw" alt="Three children walking together along an unpaved road in morning light" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%">
        </div>
        <div class="card absolute bottom-0 right-3 flex max-w-[19rem] items-center gap-3 p-3.5 sm:right-6 sm:p-4">
          <span class="grid size-10 shrink-0 place-items-center rounded-md bg-water-tint text-water sm:size-11"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
          <span class="min-w-0">
            <span class="t-caption block text-slate">Registered charity</span>
            <span class="block font-display text-[15px] font-semibold leading-snug text-ink">1215863, England and Wales</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</section>

Home heroes · Design 03

Centred over photo

Centred copy over a full-width photo that darkens towards the bottom, with the five causes listed underneath.

A large group of children and adults gathered for an outdoor class, some seated with books

Education

Keeping children in school

Fees, uniforms, books and stationery: the practical costs that decide whether a child keeps learning.

Give to education See all our causes

<section aria-labelledby="hero-03-title" class="relative isolate overflow-hidden bg-ink text-white">
  <div class="absolute inset-0 -z-10">
    <img src="images/outdoor-class.jpg" srcset="images/webp/outdoor-class-640.webp 640w, images/webp/outdoor-class-1080.webp 1080w" sizes="100vw" 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" style="object-position: 50% 40%">
    <div class="absolute inset-0 bg-linear-to-t from-ink via-ink/75 to-ink/20" aria-hidden="true"></div>
  </div>
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex min-h-[580px] flex-col items-center justify-end pb-12 pt-32 text-center sm:min-h-[640px] sm:pb-16 lg:min-h-[700px]">
    <p class="t-label rounded-full border border-white/30 bg-white/10 px-4 py-1.5 text-white">Education</p>
    <h2 id="hero-03-title" class="t-display mt-5 max-w-[16ch]">Keeping children in school</h2>
    <p class="t-lead mt-5 max-w-[46ch] text-white/90">Fees, uniforms, books and stationery: the practical costs that decide whether a child keeps learning.</p>
    <div class="mt-8 flex flex-wrap justify-center gap-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-14 px-7 text-[17px]" href="donate.html?fund=education">Give to education</a>
      <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-white/70 text-white hover:border-white hover:bg-white/10 h-14 px-7 text-[17px]" href="causes.html">See all our causes</a>
    </div>
    <nav aria-label="Hero 3 causes" class="mt-12 w-full border-t border-white/20 pt-6">
      <ul class="t-caption flex flex-wrap justify-center gap-x-6 gap-y-2 text-white/80">
        <li><a class="hover:text-white hover:underline" href="causes.html#food-distribution">Food distribution</a></li>
        <li><a class="hover:text-white hover:underline" href="causes.html#clean-water">Clean water</a></li>
        <li><a class="hover:text-white hover:underline" href="causes.html#medical-assistance">Medical assistance</a></li>
        <li><a class="font-semibold text-marigold hover:underline" href="causes.html#education" aria-current="true">Education</a></li>
        <li><a class="hover:text-white hover:underline" href="causes.html#emergency-relief">Emergency relief</a></li>
      </ul>
    </nav>
  </div>
</section>

Home heroes · Design 04

Copy and photo collage

Copy on the left; a three-photo collage on the right, each photo labelled with the cause it shows.

In Pakistan and the UK

Practical help, delivered with dignity

Food parcels, hand pumps, medicines, school costs and emergency supplies, bought for the people who need them and delivered without conditions.

Donate now How we work

A boy pumping water from a green hand pump into a bucket — Clean water

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

A doctor taking a patient's blood pressure in a small clinic — Medical help

<section aria-labelledby="hero-04-title" class="bg-smoke text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-12 py-14 sm:py-20 lg:grid-cols-12 lg:gap-14 lg:py-24">
    <div class="lg:col-span-5">
      <p class="t-label text-water">In Pakistan and the UK</p>
      <h2 id="hero-04-title" class="t-display mt-4 max-w-[14ch]">Practical help, delivered with dignity</h2>
      <p class="t-lead mt-6 max-w-[44ch] text-slate">Food parcels, hand pumps, medicines, school costs and emergency supplies, bought for the people who need them and delivered without conditions.</p>
      <div class="mt-8 flex flex-wrap items-center gap-x-7 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-14 px-7 text-[17px]" href="donate.html">Donate now</a>
        <a class="link t-label" href="about.html">How we work</a>
      </div>
    </div>
    <div class="lg:col-span-7">
      <div class="grid grid-cols-2 gap-3 sm:gap-4 lg:gap-5">
        <figure class="relative row-span-2 m-0 overflow-hidden rounded-xl 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) 28vw, 50vw" alt="A boy pumping water from a green hand pump into a bucket" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover" style="object-position: 50% 45%">
          <figcaption class="t-caption absolute bottom-3 left-3 rounded-full bg-white px-3 py-1 font-semibold text-ink shadow-[var(--shadow-card)]">Clean water</figcaption>
        </figure>
        <figure class="relative m-0 aspect-[4/3] overflow-hidden rounded-xl 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) 28vw, 50vw" 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%">
          <figcaption class="t-caption absolute bottom-3 left-3 rounded-full bg-white px-3 py-1 font-semibold text-ink shadow-[var(--shadow-card)]">Food distribution</figcaption>
        </figure>
        <figure class="relative m-0 aspect-[4/3] overflow-hidden rounded-xl 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) 28vw, 50vw" 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%">
          <figcaption class="t-caption absolute bottom-3 left-3 rounded-full bg-white px-3 py-1 font-semibold text-ink shadow-[var(--shadow-card)]">Medical help</figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>

Home heroes · Design 05

Hero with quick donate

Appeal copy on teal with a real quick-donate form on the right: frequency, fund and amount, opening the donate page.

Current appeal

Give to the current appeal

Practical help for vulnerable families in Pakistan: food parcels, hand pumps for clean water, and support with medical and other essential needs.

Give once or set up a monthly gift
Zakat and Sadaqah are kept separate
Gift Aid adds 25p to every £1 for UK taxpayers

<section aria-labelledby="hero-05-title" class="bg-water text-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-10 py-14 sm:py-20 lg:grid-cols-12 lg:gap-14 lg:py-24">
    <div class="lg:col-span-6 xl:col-span-7">
      <p class="t-label text-white/85">Current appeal</p>
      <h2 id="hero-05-title" class="t-display mt-4 max-w-[14ch]">Give to the current appeal</h2>
      <p class="t-lead mt-6 max-w-[46ch] text-white/90">Practical help for vulnerable families in Pakistan: food parcels, hand pumps for clean water, and support with medical and other essential needs.</p>
      <ul class="mt-8 grid gap-3 border-t border-white/20 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>Zakat and Sadaqah are kept separate</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="lg:col-span-6 xl:col-span-5">
      <form action="donate.html" method="get" aria-labelledby="hero-05-form-title" class="card p-5 text-ink sm:p-8">
        <h3 id="hero-05-form-title" class="t-h3">Make a donation</h3>
        <fieldset class="mt-5">
          <legend class="sr-only">How often</legend>
          <div class="grid grid-cols-2 gap-1.5 rounded-md bg-smoke p-1.5">
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="frequency" value="one-time" checked><span class="flex h-11 items-center justify-center rounded-sm font-display text-[15px] font-semibold text-ink transition-colors hover:bg-white peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">One-time</span></label>
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="frequency" value="monthly"><span class="flex h-11 items-center justify-center rounded-sm font-display text-[15px] font-semibold text-ink transition-colors hover:bg-white peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">Monthly</span></label>
          </div>
        </fieldset>
        <fieldset class="mt-5">
          <legend class="t-label text-ink">Give to</legend>
          <div class="mt-2.5 grid grid-cols-3 gap-2">
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="fund" value="current-appeal" checked><span class="flex h-11 items-center justify-center rounded-sm border border-line-strong px-2 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-water peer-checked:bg-water-tint peer-checked:text-water peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">Appeal</span></label>
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="fund" value="zakat"><span class="flex h-11 items-center justify-center rounded-sm border border-line-strong px-2 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-water peer-checked:bg-water-tint peer-checked:text-water peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">Zakat</span></label>
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="fund" value="sadaqah"><span class="flex h-11 items-center justify-center rounded-sm border border-line-strong px-2 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-water peer-checked:bg-water-tint peer-checked:text-water peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">Sadaqah</span></label>
          </div>
        </fieldset>
        <fieldset class="mt-5">
          <legend class="t-label text-ink">Amount</legend>
          <div class="mt-2.5 grid grid-cols-4 gap-2">
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="amount" value="25"><span class="flex h-12 items-center justify-center rounded-sm border border-line-strong font-display text-[17px] font-semibold tabular-nums text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">£25</span></label>
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="amount" value="50" checked><span class="flex h-12 items-center justify-center rounded-sm border border-line-strong font-display text-[17px] font-semibold tabular-nums text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">£50</span></label>
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="amount" value="100"><span class="flex h-12 items-center justify-center rounded-sm border border-line-strong font-display text-[17px] font-semibold tabular-nums text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">£100</span></label>
            <label class="cursor-pointer"><input class="peer sr-only" type="radio" name="amount" value="250"><span class="flex h-12 items-center justify-center rounded-sm border border-line-strong font-display text-[17px] font-semibold tabular-nums text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water">£250</span></label>
          </div>
        </fieldset>
        <button type="submit" 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-14 px-7 text-[17px] mt-6 w-full">Donate now</button>
        <p class="t-caption mt-4 flex items-center justify-center gap-2 text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>Registered charity 1215863</p>
      </form>
    </div>
  </div>
</section>

Home heroes · Design 06

Typographic on ink

Very large three-part headline on ink with a marigold highlight, a short lead and a strip of four small cause photos.

Zafar Foundation

Supporting people. Strengthening communities. Creating opportunities.

A UK-registered charity giving practical help to people and communities facing poverty and hardship, in Pakistan and in the UK.

Donate now About us

<section aria-labelledby="hero-06-title" class="bg-ink text-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-16 sm:py-20 lg:py-28">
    <p class="t-label flex items-center gap-3 text-on-dark-muted"><span class="h-px w-10 bg-marigold" aria-hidden="true"></span>Zafar Foundation</p>
    <h2 id="hero-06-title" class="t-display mt-6 sm:text-[3.5rem] lg:text-[4.25rem] xl:text-[5.25rem] xl:leading-[0.98]"><span class="block">Supporting people.</span> <span class="block">Strengthening communities.</span> <span class="block text-marigold">Creating opportunities.</span></h2>
    <div class="mt-12 grid gap-10 border-t border-white/15 pt-10 lg:mt-16 lg:grid-cols-12 lg:items-end lg:gap-12">
      <div class="lg:col-span-5">
        <p class="t-lead max-w-[44ch] text-white/85">A UK-registered charity giving practical help to people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
        <div class="mt-8 flex flex-wrap gap-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-14 px-7 text-[17px]" href="donate.html">Donate now</a>
          <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-white/70 text-white hover:border-white hover:bg-white/10 h-14 px-7 text-[17px]" href="about.html">About us</a>
        </div>
      </div>
      <ul class="-mx-5 flex snap-x snap-mandatory gap-3 overflow-x-auto px-5 scroll-px-5 pb-1 [scrollbar-width:none] sm:mx-0 sm:grid sm:grid-cols-4 sm:overflow-visible sm:px-0 lg:col-span-7">
        <li class="w-[38%] shrink-0 snap-start sm:w-auto">
          <a class="group block" href="causes.html#food-distribution">
            <span class="block aspect-[4/5] overflow-hidden rounded-lg 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) 13vw, (min-width: 640px) 25vw, 50vw" 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.05]" style="object-position: 50% 60%"></span>
            <span class="t-caption mt-2.5 block text-on-dark-muted group-hover:text-white">Food distribution</span>
          </a>
        </li>
        <li class="w-[38%] shrink-0 snap-start sm:w-auto">
          <a class="group block" href="causes.html#clean-water">
            <span class="block aspect-[4/5] 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) 13vw, (min-width: 640px) 25vw, 50vw" 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.05]" style="object-position: 50% 30%"></span>
            <span class="t-caption mt-2.5 block text-on-dark-muted group-hover:text-white">Clean water</span>
          </a>
        </li>
        <li class="w-[38%] shrink-0 snap-start sm:w-auto">
          <a class="group block" href="causes.html#medical-assistance">
            <span class="block aspect-[4/5] overflow-hidden rounded-lg 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) 13vw, (min-width: 640px) 25vw, 50vw" 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.05]" style="object-position: 50% 40%"></span>
            <span class="t-caption mt-2.5 block text-on-dark-muted group-hover:text-white">Medical assistance</span>
          </a>
        </li>
        <li class="w-[38%] shrink-0 snap-start sm:w-auto">
          <a class="group block" href="causes.html#education">
            <span class="block aspect-[4/5] 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) 13vw, (min-width: 640px) 25vw, 50vw" 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.05]" style="object-position: 50% 50%"></span>
            <span class="t-caption mt-2.5 block text-on-dark-muted group-hover:text-white">Education</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Home heroes · Design 07

Teal with focus areas

Teal hero with a framed photo card and the appeal's three focus areas as numbered tiles that link to each fund.

Current appeal

Food, clean water and medical help for families in Pakistan

Your donation goes to practical help for vulnerable families: the things a household needs to get through hardship.

Donate now See all our causes

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

<section aria-labelledby="hero-07-title" class="bg-water text-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-14 sm:py-20 lg:py-24">
    <div class="grid items-center gap-10 lg:grid-cols-12 lg:gap-16">
      <div class="lg:col-span-6">
        <p class="t-label inline-flex rounded-full bg-marigold px-3.5 py-1.5 text-ink">Current appeal</p>
        <h2 id="hero-07-title" class="t-display mt-5 max-w-[16ch]">Food, clean water and medical help for families in Pakistan</h2>
        <p class="t-lead mt-6 max-w-[46ch] text-white/90">Your donation goes to practical help for vulnerable families: the things a household needs to get through hardship.</p>
        <div class="mt-8 flex flex-wrap items-center gap-x-8 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-14 px-7 text-[17px]" href="donate.html?fund=current-appeal">Donate now</a>
          <a class="link-on-dark t-label" href="causes.html">See all our causes</a>
        </div>
      </div>
      <figure class="m-0 rounded-2xl bg-white p-2.5 text-ink shadow-[var(--shadow-card-hover)] sm:p-3 lg:col-span-6">
        <div class="aspect-[4/3] overflow-hidden rounded-xl bg-mist">
          <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: 1024px) 45vw, 100vw" alt="Two children working a hand pump in a hazy field" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 40% 50%">
        </div>
        <figcaption class="t-caption flex items-center gap-2 px-2 pb-1 pt-3 text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water"><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path></svg>Working in Pakistan: Kandiaro, Sindh</figcaption>
      </figure>
    </div>
    <ul class="mt-12 grid gap-4 md:grid-cols-3 lg:mt-16 lg:gap-6">
      <li>
        <a class="group flex h-full flex-col rounded-xl border border-white/15 bg-white/10 p-5 transition-colors sm:p-6 hover:border-white/40 hover:bg-white/15" href="donate.html?fund=food">
          <span class="font-display text-[1.625rem] font-bold leading-none text-marigold sm:text-[2rem]">01</span>
          <span class="t-h3 mt-4 block">Food parcels</span>
          <span class="mt-2 block flex-1 text-[15px] leading-relaxed text-white/85">Staples a household cooks with every day: flour, rice, lentils, oil, sugar and tea.</span>
          <span class="t-label mt-5 inline-flex items-center gap-1.5">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>
        </a>
      </li>
      <li>
        <a class="group flex h-full flex-col rounded-xl border border-white/15 bg-white/10 p-5 transition-colors sm:p-6 hover:border-white/40 hover:bg-white/15" href="donate.html?fund=water">
          <span class="font-display text-[1.625rem] font-bold leading-none text-marigold sm:text-[2rem]">02</span>
          <span class="t-h3 mt-4 block">Hand pumps for clean water</span>
          <span class="mt-2 block flex-1 text-[15px] leading-relaxed text-white/85">A safe and reliable water supply close to home.</span>
          <span class="t-label mt-5 inline-flex items-center gap-1.5">Give to clean water<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>
      </li>
      <li>
        <a class="group flex h-full flex-col rounded-xl border border-white/15 bg-white/10 p-5 transition-colors sm:p-6 hover:border-white/40 hover:bg-white/15" href="donate.html?fund=medical">
          <span class="font-display text-[1.625rem] font-bold leading-none text-marigold sm:text-[2rem]">03</span>
          <span class="t-h3 mt-4 block">Medical and essential needs</span>
          <span class="mt-2 block flex-1 text-[15px] leading-relaxed text-white/85">Consultations, medicines, tests and treatment for people who would otherwise go without.</span>
          <span class="t-label mt-5 inline-flex items-center gap-1.5">Give to medical help<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>
      </li>
    </ul>
  </div>
</section>

Home heroes · Design 08

Headline and cause tiles

A two-column headline and intro, then three tall photo tiles for causes with the title on a dark gradient.

Five causes in Pakistan and the UK

From immediate needs to lasting foundations

Every donation can be directed to one of our causes, or given as a general donation where the need is greatest.

Donate now All five causes

<section aria-labelledby="hero-08-title" class="bg-white text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-14 sm:py-20 lg:py-24">
    <div class="grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-12">
      <div class="lg:col-span-7">
        <p class="t-label text-water">Five causes in Pakistan and the UK</p>
        <h2 id="hero-08-title" class="t-display mt-4 max-w-[17ch]">From immediate needs to lasting foundations</h2>
      </div>
      <div class="lg:col-span-5">
        <p class="t-lead max-w-[44ch] text-slate">Every donation can be directed to one of our causes, or given as a general donation where the need is greatest.</p>
        <div class="mt-6 flex flex-wrap gap-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-12 px-6 text-base" href="donate.html?fund=general">Donate now</a>
          <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-12 px-6 text-base" href="causes.html">All five causes</a>
        </div>
      </div>
    </div>
    <ul class="mt-10 grid gap-4 sm:grid-cols-3 lg:mt-14 lg:gap-6">
      <li>
        <a class="group relative block aspect-[16/10] overflow-hidden rounded-xl bg-mist text-white sm:aspect-[3/4] lg:aspect-[4/5]" href="causes.html#food-distribution">
          <img src="images/wheat-harvest.jpg" srcset="images/webp/wheat-harvest-640.webp 640w, images/webp/wheat-harvest-1080.webp 1080w" sizes="(min-width: 640px) 33vw, 100vw" alt="Farmers loading harvested wheat onto horse-drawn carts in a sunlit 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% 55%">
          <span class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0" aria-hidden="true"></span>
          <span class="absolute inset-x-0 bottom-0 p-5 sm:p-6">
            <span class="t-caption block text-white/80">Immediate needs</span>
            <span class="t-h3 mt-1 flex items-center justify-between gap-3">Food distribution<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 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>
        </a>
      </li>
      <li>
        <a class="group relative block aspect-[16/10] overflow-hidden rounded-xl bg-mist text-white sm:aspect-[3/4] lg:aspect-[4/5]" href="causes.html#clean-water">
          <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: 640px) 33vw, 100vw" alt="A boy pumping water from a green hand pump into a bucket" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" style="object-position: 50% 45%">
          <span class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0" aria-hidden="true"></span>
          <span class="absolute inset-x-0 bottom-0 p-5 sm:p-6">
            <span class="t-caption block text-white/80">Lasting foundations</span>
            <span class="t-h3 mt-1 flex items-center justify-between gap-3">Clean water<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 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>
        </a>
      </li>
      <li>
        <a class="group relative block aspect-[16/10] overflow-hidden rounded-xl bg-mist text-white sm:aspect-[3/4] lg:aspect-[4/5]" href="causes.html#education">
          <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="(min-width: 640px) 33vw, 100vw" alt="Children with school bags walking along a tree-lined path in early morning light" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" style="object-position: 50% 55%">
          <span class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0" aria-hidden="true"></span>
          <span class="absolute inset-x-0 bottom-0 p-5 sm:p-6">
            <span class="t-caption block text-white/80">Lasting foundations</span>
            <span class="t-h3 mt-1 flex items-center justify-between gap-3">Education<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 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>
        </a>
      </li>
    </ul>
  </div>
</section>

Home heroes · Design 09

Scroll-snap slider

The site's three hero slides as a CSS-only horizontal scroll-snap row with a peek of the next slide and numbered jump links.

01 · Current appeal

Essential support for families in Pakistan

Food parcels, hand pumps for clean water, and support with medical and other essential needs.

Donate now Learn about our work

02 · Education

Keeping children in school

Fees, uniforms, books and stationery: the practical costs that decide whether a child keeps learning.

Give to education See all our causes

Farmers loading harvested wheat onto horse-drawn carts in a sunlit field

03 · Food distribution

Food parcels for families facing hunger

Each food parcel holds the staples a household cooks with every day: flour, rice, sugar, cooking oil, dates and pulses.

Give to food distribution See all our causes

<section aria-labelledby="hero-09-title" class="bg-ink text-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-8 sm:py-10">
    <h2 id="hero-09-title" class="sr-only">Current appeal and causes</h2>
    <div class="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1 [scrollbar-width:none] sm:gap-6">
      <article id="hero-09-slide-1" aria-labelledby="hero-09-slide-1-title" class="relative isolate flex min-h-[540px] w-[88%] shrink-0 snap-start items-end overflow-hidden rounded-2xl sm:min-h-[560px] lg:min-h-[600px] lg:w-[86%] lg:items-center">
        <div class="absolute inset-0 -z-10">
          <img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="(min-width: 1024px) 86vw, 88vw" alt="Women and a child drawing water from a hand pump beside their home in a village" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 60% 50%">
          <div class="hero-scrim absolute inset-0" aria-hidden="true"></div>
        </div>
        <div class="max-w-[38rem] p-6 sm:p-10 lg:p-14">
          <p class="t-label text-white/90"><span class="text-marigold">01</span> · Current appeal</p>
          <h3 id="hero-09-slide-1-title" class="t-display mt-4">Essential support for families in Pakistan</h3>
          <p class="t-lead mt-5 max-w-[42ch] text-white/90">Food parcels, hand pumps for clean water, and support with medical and other essential needs.</p>
          <div class="mt-8 flex flex-wrap items-center gap-x-8 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-14 px-7 text-[17px]" href="donate.html?fund=current-appeal">Donate now</a>
            <a class="link-on-dark t-label" href="about.html">Learn about our work</a>
          </div>
        </div>
      </article>
      <article id="hero-09-slide-2" aria-labelledby="hero-09-slide-2-title" class="relative isolate flex min-h-[540px] w-[88%] shrink-0 snap-start items-end overflow-hidden rounded-2xl sm:min-h-[560px] lg:min-h-[600px] lg:w-[86%] lg:items-center">
        <div class="absolute inset-0 -z-10">
          <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) 86vw, 88vw" 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" style="object-position: 50% 45%">
          <div class="hero-scrim absolute inset-0" aria-hidden="true"></div>
        </div>
        <div class="max-w-[38rem] p-6 sm:p-10 lg:p-14">
          <p class="t-label text-white/90"><span class="text-marigold">02</span> · Education</p>
          <h3 id="hero-09-slide-2-title" class="t-display mt-4">Keeping children in school</h3>
          <p class="t-lead mt-5 max-w-[42ch] text-white/90">Fees, uniforms, books and stationery: the practical costs that decide whether a child keeps learning.</p>
          <div class="mt-8 flex flex-wrap items-center gap-x-8 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-14 px-7 text-[17px]" href="donate.html?fund=education">Give to education</a>
            <a class="link-on-dark t-label" href="causes.html">See all our causes</a>
          </div>
        </div>
      </article>
      <article id="hero-09-slide-3" aria-labelledby="hero-09-slide-3-title" class="relative isolate flex min-h-[540px] w-[88%] shrink-0 snap-start items-end overflow-hidden rounded-2xl sm:min-h-[560px] lg:min-h-[600px] lg:w-[86%] lg:items-center">
        <div class="absolute inset-0 -z-10">
          <img src="images/wheat-harvest.jpg" srcset="images/webp/wheat-harvest-640.webp 640w, images/webp/wheat-harvest-1080.webp 1080w" sizes="(min-width: 1024px) 86vw, 88vw" alt="Farmers loading harvested wheat onto horse-drawn carts in a sunlit field" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 55%">
          <div class="hero-scrim absolute inset-0" aria-hidden="true"></div>
        </div>
        <div class="max-w-[38rem] p-6 sm:p-10 lg:p-14">
          <p class="t-label text-white/90"><span class="text-marigold">03</span> · Food distribution</p>
          <h3 id="hero-09-slide-3-title" class="t-display mt-4">Food parcels for families facing hunger</h3>
          <p class="t-lead mt-5 max-w-[42ch] text-white/90">Each food parcel holds the staples a household cooks with every day: flour, rice, sugar, cooking oil, dates and pulses.</p>
          <div class="mt-8 flex flex-wrap items-center gap-x-8 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-14 px-7 text-[17px]" href="donate.html?fund=food">Give to food distribution</a>
            <a class="link-on-dark t-label" href="causes.html">See all our causes</a>
          </div>
        </div>
      </article>
    </div>
    <nav aria-label="Hero 9 slides" class="mt-6 flex flex-wrap items-center justify-between gap-4">
      <ol class="flex flex-wrap gap-2">
        <li><a class="t-label inline-flex h-10 items-center gap-2 rounded-full border border-white/30 px-4 transition-colors hover:border-white hover:bg-white/10" href="#hero-09-slide-1"><span class="text-marigold">01</span>Current appeal</a></li>
        <li><a class="t-label inline-flex h-10 items-center gap-2 rounded-full border border-white/30 px-4 transition-colors hover:border-white hover:bg-white/10" href="#hero-09-slide-2"><span class="text-marigold">02</span>Education</a></li>
        <li><a class="t-label inline-flex h-10 items-center gap-2 rounded-full border border-white/30 px-4 transition-colors hover:border-white hover:bg-white/10" href="#hero-09-slide-3"><span class="text-marigold">03</span>Food distribution</a></li>
      </ol>
      <p class="t-caption inline-flex items-center gap-2 text-on-dark-muted">Swipe or scroll sideways<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><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>
    </nav>
  </div>
</section>

Home heroes · Design 10

Minimal with trust row

No photo: logo mark, a big centred headline on smoke, donate and Zakat buttons, and a row of three charity facts.

UK-registered charity · Pakistan and the UK

Practical help for people facing hardship

Food, clean water, medical care, education and emergency relief, for families and communities in Pakistan and the UK.

Donate now Give Zakat

Registered charity1215863, England and Wales
Gift AidAdds 25p to every £1
Zakat and SadaqahKept separate from other funds

<section aria-labelledby="hero-10-title" class="bg-smoke text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-16 text-center sm:py-24 lg:py-28">
    <span aria-hidden="true" class="mx-auto grid size-12 place-items-center rounded-md bg-brand font-display text-[22px] font-bold leading-none text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="14 14 49 49" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true" class="size-[70%]"><path d="M27 56V33a11.5 11.5 0 0 1 23 0v23z"/><path d="M32 50V34a6.5 6.5 0 0 1 13 0v16z"/><path d="M27 56l5-6M50 56l-5-6"/></svg></span>
    <p class="t-label mt-6 text-water">UK-registered charity · Pakistan and the UK</p>
    <h2 id="hero-10-title" class="t-display mx-auto mt-4 max-w-[17ch] lg:text-[4rem]">Practical help for people facing hardship</h2>
    <p class="t-lead mx-auto mt-6 max-w-[50ch] text-slate">Food, clean water, medical care, education and emergency relief, for families and communities in Pakistan and the UK.</p>
    <div class="mt-9 flex flex-wrap justify-center gap-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-14 px-7 text-[17px]" href="donate.html">Donate now</a>
      <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-14 px-7 text-[17px]" href="donate.html?fund=zakat">Give Zakat</a>
    </div>
    <ul class="mx-auto mt-14 grid max-w-4xl gap-5 border-t border-line pt-8 text-left sm:grid-cols-3 sm:gap-6 lg:mt-16">
      <li class="flex items-start gap-3.5">
        <span class="grid size-11 shrink-0 place-items-center rounded-md bg-white text-water shadow-[var(--shadow-card)]"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        <span><span class="t-caption block text-slate">Registered charity</span><span class="mt-0.5 block font-display text-[15px] font-semibold">1215863, England and Wales</span></span>
      </li>
      <li class="flex items-start gap-3.5">
        <span class="grid size-11 shrink-0 place-items-center rounded-md bg-white text-water shadow-[var(--shadow-card)]"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"></path></svg></span>
        <span><span class="t-caption block text-slate">Gift Aid</span><span class="mt-0.5 block font-display text-[15px] font-semibold">Adds 25p to every £1</span></span>
      </li>
      <li class="flex items-start gap-3.5">
        <span class="grid size-11 shrink-0 place-items-center rounded-md bg-white text-water shadow-[var(--shadow-card)]"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M200,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V40A16,16,0,0,0,200,24ZM88,200a12,12,0,1,1,12-12A12,12,0,0,1,88,200Zm0-40a12,12,0,1,1,12-12A12,12,0,0,1,88,160Zm40,40a12,12,0,1,1,12-12A12,12,0,0,1,128,200Zm0-40a12,12,0,1,1,12-12A12,12,0,0,1,128,160Zm40,40a12,12,0,1,1,12-12A12,12,0,0,1,168,200Zm0-40a12,12,0,1,1,12-12A12,12,0,0,1,168,160Zm16-56a8,8,0,0,1-8,8H80a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8h96a8,8,0,0,1,8,8Z"></path></svg></span>
        <span><span class="t-caption block text-slate">Zakat and Sadaqah</span><span class="mt-0.5 block font-display text-[15px] font-semibold">Kept separate from other funds</span></span>
      </li>
    </ul>
  </div>
</section>