Design patterns · Section 04 of 14

About & intro

Ten ways to introduce Zafar Foundation: who it is, where it works and how it is governed. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

About & intro · Design 01

Split Text and Photo

Introduction copy with a button and a text link on the left, a large captioned photo on the right.

About the foundation

Who we are

Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.

We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation was registered with the Charity Commission for England and Wales on 20 November 2025, and is run from Sheffield.

About the foundation See our causes

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

<section aria-labelledby="about-01-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
    <div>
      <p class="t-label text-water">About the foundation</p>
      <h2 id="about-01-title" class="t-h2 mt-3">Who we are</h2>
      <p class="t-lead mt-5 max-w-[48ch] text-ink">Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
      <p class="mt-4 max-w-[60ch] text-slate">We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation was registered with the Charity Commission for England and Wales on 20 November 2025, and is run from Sheffield.</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-ink text-white hover:bg-water-deep h-12 px-6 text-base" href="about.html">About the foundation</a>
        <a class="link t-label" href="causes.html">See our causes</a>
      </div>
    </div>
    <figure class="m-0">
      <div class="aspect-[4/3] overflow-hidden rounded-2xl 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) 50vw, 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 mt-3 text-slate">Working in Pakistan: Kandiaro, Sindh</figcaption>
    </figure>
  </div>
</section>

About & intro · Design 02

Photo With Fact Card

A large photo on the left with a teal card of registration facts overlapping its corner, copy on the right.

Three children walking together along an unpaved road in morning light

Registered charity: 1215863, England and Wales
Registered: 20 November 2025
Registered office: 94 Glen Road, Sheffield, S7 1RB

Who we are

Practical help for people facing hardship

Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.

We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation is a charitable incorporated organisation, and is run from Sheffield.

About the foundation

<section aria-labelledby="about-02-title" class="bg-smoke py-16 sm:py-20 lg:py-28">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
    <div class="relative lg:col-span-7">
      <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist lg:aspect-[5/4]">
        <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) 55vw, 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="relative mx-4 -mt-16 rounded-xl bg-water p-6 text-white shadow-[var(--shadow-card-hover)] sm:mx-8 sm:p-7 lg:absolute lg:-bottom-10 lg:-right-10 lg:mx-0 lg:mt-0 lg:w-[21rem]">
        <dl class="grid gap-4 font-display">
          <div>
            <dt class="t-caption text-white/80">Registered charity</dt>
            <dd class="mt-0.5 text-[17px] font-semibold">1215863, England and Wales</dd>
          </div>
          <div class="border-t border-white/20 pt-4">
            <dt class="t-caption text-white/80">Registered</dt>
            <dd class="mt-0.5 text-[17px] font-semibold">20 November 2025</dd>
          </div>
          <div class="border-t border-white/20 pt-4">
            <dt class="t-caption text-white/80">Registered office</dt>
            <dd class="mt-0.5 text-[17px] font-semibold">94 Glen Road, Sheffield, S7 1RB</dd>
          </div>
        </dl>
      </div>
    </div>
    <div class="lg:col-span-5">
      <p class="t-label text-water">Who we are</p>
      <h2 id="about-02-title" class="t-h2 mt-3">Practical help for people facing hardship</h2>
      <p class="t-lead mt-5 text-ink">Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
      <p class="mt-4 text-slate">We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation is a charitable incorporated organisation, and is run from Sheffield.</p>
      <a class="link t-label mt-7 inline-flex items-center gap-1.5" href="about.html">About the foundation <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></a>
    </div>
  </div>
</section>

About & intro · Design 03

Mission Statement

The foundation's own three-part statement set in very large type, with two short paragraphs underneath.

Who we are

Supporting people. Strengthening communities. Creating opportunities.

Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.

We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation is registered with the Charity Commission for England and Wales and run from Sheffield.

Donate now About the foundation

<section aria-labelledby="about-03-title" class="bg-white py-16 sm:py-20 lg:py-28">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <p class="t-label flex items-center gap-3 text-water"><span class="h-0.5 w-10 rounded-full bg-marigold" aria-hidden="true"></span>Who we are</p>
    <h2 id="about-03-title" class="t-display mt-6 lg:text-[4.5rem] lg:leading-[1.02]">
      <span class="block">Supporting people.</span>
      <span class="block text-water">Strengthening communities.</span>
      <span class="block">Creating opportunities.</span>
    </h2>
    <div class="mt-12 grid gap-8 border-t border-line pt-10 md:grid-cols-12 lg:mt-16">
      <p class="t-lead text-ink md:col-span-6 lg:col-span-5">Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
      <div class="md:col-span-6 lg:col-span-5 lg:col-start-8">
        <p class="text-slate">We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation is registered with the Charity Commission for England and Wales and run from Sheffield.</p>
        <div class="mt-7 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-12 px-6 text-base" href="donate.html?fund=current-appeal">Donate now</a>
          <a class="link t-label" href="about.html">About the foundation</a>
        </div>
      </div>
    </div>
  </div>
</section>

About & intro · Design 04

Three Fact Strip

A teal section with a split heading and three joined fact panels: charity number, Sheffield office and where the work happens.

About Zafar Foundation

A UK-registered charity giving practical help with food, clean water, medical care, education and emergency relief to people and communities facing poverty and hardship.

Registered charity no.

1215863

Charity Commission for England and Wales, registered 20 November 2025.
Run from

Sheffield

Registered office at 94 Glen Road, Sheffield, S7 1RB, United Kingdom.
Working in

Pakistan and the UK

Help goes to the families and communities who need it, without conditions attached.

About the foundation

<section aria-labelledby="about-04-title" class="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="grid gap-5 lg:grid-cols-12 lg:items-end lg:gap-10">
      <h2 id="about-04-title" class="t-h2 max-w-[14ch] lg:col-span-5">About Zafar Foundation</h2>
      <p class="t-lead max-w-[56ch] text-white/85 lg:col-span-7">A UK-registered charity giving practical help with food, clean water, medical care, education and emergency relief to people and communities facing poverty and hardship.</p>
    </div>
    <ul class="mt-12 grid gap-px overflow-hidden rounded-xl bg-white/15 md:grid-cols-3 lg:mt-14">
      <li class="bg-water-deep p-6 sm:p-8">
        <span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-11.55,39.29c-4.79,5-9.75,10.17-12.38,16.52-2.52,6.1-2.63,13.07-2.73,19.82-.1,7-.21,14.33-3.32,17.43s-10.39,3.22-17.43,3.32c-6.75.1-13.72.21-19.82,2.73-6.35,2.63-11.52,7.59-16.52,12.38S132,224,128,224s-9.15-4.92-14.11-9.69-10.17-9.75-16.52-12.38c-6.1-2.52-13.07-2.63-19.82-2.73-7-.1-14.33-.21-17.43-3.32s-3.22-10.39-3.32-17.43c-.1-6.75-.21-13.72-2.73-19.82-2.63-6.35-7.59-11.52-12.38-16.52S32,132,32,128s4.92-9.15,9.69-14.11,9.75-10.17,12.38-16.52c2.52-6.1,2.63-13.07,2.73-19.82.1-7,.21-14.33,3.32-17.43S70.51,56.9,77.55,56.8c6.75-.1,13.72-.21,19.82-2.73,6.35-2.63,11.52-7.59,16.52-12.38S124,32,128,32s9.15,4.92,14.11,9.69,10.17,9.75,16.52,12.38c6.1,2.52,13.07,2.63,19.82,2.73,7,.1,14.33.21,17.43,3.32s3.22,10.39,3.32,17.43c.1,6.75.21,13.72,2.73,19.82,2.63,6.35,7.59,11.52,12.38,16.52S224,124,224,128,219.08,137.15,214.31,142.11ZM173.66,98.34a8,8,0,0,1,0,11.32l-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,173.66,98.34Z"></path></svg></span>
        <p class="t-caption mt-6 text-white/75">Registered charity no.</p>
        <p class="mt-1 font-display text-[2.25rem] font-bold leading-none tracking-[-0.02em] tabular-nums">1215863</p>
        <p class="mt-3 text-[15px] leading-relaxed text-white/80">Charity Commission for England and Wales, registered 20 November 2025.</p>
      </li>
      <li class="bg-water-deep p-6 sm:p-8">
        <span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><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></span>
        <p class="t-caption mt-6 text-white/75">Run from</p>
        <p class="mt-1 font-display text-[2.25rem] font-bold leading-none tracking-[-0.02em]">Sheffield</p>
        <p class="mt-3 text-[15px] leading-relaxed text-white/80">Registered office at 94 Glen Road, Sheffield, <span class="whitespace-nowrap">S7 1RB</span>, United Kingdom.</p>
      </li>
      <li class="bg-water-deep p-6 sm:p-8">
        <span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><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></span>
        <p class="t-caption mt-6 text-white/75">Working in</p>
        <p class="mt-1 font-display text-[2.25rem] font-bold leading-none tracking-[-0.02em]">Pakistan and the UK</p>
        <p class="mt-3 text-[15px] leading-relaxed text-white/80">Help goes to the families and communities who need it, without conditions attached.</p>
      </li>
    </ul>
    <p class="mt-8"><a class="link-on-dark t-label" href="about.html">About the foundation</a></p>
  </div>
</section>

About & intro · Design 05

Two Places Split

"Two places, one purpose": tall Sheffield and Pakistan photo panels with text on a dark fade, joined by the logo mark.

Two places, one purpose

Registered and run from Sheffield, working with families and communities in Pakistan.

The Sheffield city skyline under a cloudy sky

Registered in

Sheffield, England

The foundation is registered in England and Wales and based at its registered office in Sheffield, where donations are received and the work is organised.

Children watching a flock of sheep being led through a village street

Working in

Pakistan

Support is delivered to people and communities in Pakistan: food parcels, hand pumps, medical help, school costs and help in a crisis.

<section aria-labelledby="about-05-title" class="bg-smoke py-16 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="about-05-title" class="t-h2">Two places, one purpose</h2>
      <p class="t-lead mt-4 text-slate">Registered and run from Sheffield, working with families and communities in Pakistan.</p>
    </div>
    <div class="relative mt-12 grid gap-5 md:grid-cols-2 md:gap-6">
      <article class="relative isolate flex min-h-[400px] flex-col justify-end overflow-hidden rounded-2xl p-6 text-white sm:p-8 lg:min-h-[520px]">
        <div class="absolute inset-0 -z-10"><img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="(min-width: 768px) 50vw, 100vw" alt="The Sheffield city skyline under a cloudy sky" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
        <div class="absolute inset-0 -z-10 bg-linear-to-t from-ink/95 via-ink/50 to-ink/0" aria-hidden="true"></div>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Registered in</p>
        <h3 class="mt-2 font-display text-[1.75rem] font-bold leading-tight">Sheffield, England</h3>
        <p class="mt-3 max-w-[44ch] text-[15px] leading-relaxed text-white/85">The foundation is registered in England and Wales and based at its registered office in Sheffield, where donations are received and the work is organised.</p>
      </article>
      <article class="relative isolate flex min-h-[400px] flex-col justify-end overflow-hidden rounded-2xl p-6 text-white sm:p-8 md:text-right lg:min-h-[520px]">
        <div class="absolute inset-0 -z-10"><img src="images/village-sheep-street.jpg" srcset="images/webp/village-sheep-street-640.webp 640w, images/webp/village-sheep-street-1080.webp 1080w" sizes="(min-width: 768px) 50vw, 100vw" alt="Children watching a flock of sheep being led through a village street" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%"></div>
        <div class="absolute inset-0 -z-10 bg-linear-to-t from-ink/95 via-ink/50 to-ink/0" aria-hidden="true"></div>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Working in</p>
        <h3 class="mt-2 font-display text-[1.75rem] font-bold leading-tight">Pakistan</h3>
        <p class="mt-3 max-w-[44ch] text-[15px] leading-relaxed text-white/85 md:ml-auto">Support is delivered to people and communities in Pakistan: food parcels, hand pumps, medical help, school costs and help in a crisis.</p>
      </article>
      <span aria-hidden="true" class="absolute left-1/2 top-1/2 hidden size-16 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border-[6px] border-smoke bg-brand font-display text-[22px] font-bold text-white md:grid"><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>
    </div>
  </div>
</section>

About & intro · Design 06

Fact Timeline

A vertical timeline of real milestones, from registration on 20 November 2025 to the current appeal, beside a portrait photo.

Who we are

The foundation so far

A UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.

A statue in Weston Park in front of a red-brick university building

20 November 2025

Registered with the Charity Commission

Zafar Foundation was registered with the Charity Commission for England and Wales as a charitable incorporated organisation, charity number 1215863.
Sheffield

Run from a registered office in Sheffield

Donations are received and the work is organised from 94 Glen Road, Sheffield, S7 1RB.
Now

Essential support for families in Pakistan

The 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.
Support the current appeal
As work is completed

Updates on the impact page

Project updates, verified figures, stories shared with consent and annual reports are published as the work is completed.
Visit the impact page

<section aria-labelledby="about-06-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid gap-12 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-5">
      <p class="t-label text-water">Who we are</p>
      <h2 id="about-06-title" class="t-h2 mt-3">The foundation so far</h2>
      <p class="t-lead mt-5 text-slate">A UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
      <div class="mt-8 aspect-[16/10] overflow-hidden rounded-2xl bg-mist lg:aspect-square">
        <img src="images/sheffield-weston-park.jpg" srcset="images/webp/sheffield-weston-park-640.webp 640w, images/webp/sheffield-weston-park-1080.webp 1080w" sizes="(min-width: 1024px) 36vw, 100vw" alt="A statue in Weston Park in front of a red-brick university building" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 45%">
      </div>
    </div>
    <ol class="relative grid content-start gap-10 self-start border-l-2 border-line pl-8 sm:pl-10 lg:col-span-7 lg:mt-2">
      <li class="relative">
        <span aria-hidden="true" class="absolute -left-[41px] top-1 size-4 rounded-full border-[3px] border-white bg-water ring-2 ring-water sm:-left-[49px]"></span>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">20 November 2025</p>
        <h3 class="t-h3 mt-2">Registered with the Charity Commission</h3>
        <p class="mt-2 max-w-[56ch] text-slate">Zafar Foundation was registered with the Charity Commission for England and Wales as a charitable incorporated organisation, charity number 1215863.</p>
      </li>
      <li class="relative">
        <span aria-hidden="true" class="absolute -left-[41px] top-1 size-4 rounded-full border-[3px] border-white bg-water ring-2 ring-water sm:-left-[49px]"></span>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Sheffield</p>
        <h3 class="t-h3 mt-2">Run from a registered office in Sheffield</h3>
        <p class="mt-2 max-w-[56ch] text-slate">Donations are received and the work is organised from 94 Glen Road, Sheffield, S7 1RB.</p>
      </li>
      <li class="relative">
        <span aria-hidden="true" class="absolute -left-[41px] top-1 size-4 rounded-full border-[3px] border-white bg-marigold ring-2 ring-marigold sm:-left-[49px]"></span>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Now</p>
        <h3 class="t-h3 mt-2">Essential support for families in Pakistan</h3>
        <p class="mt-2 max-w-[56ch] text-slate">The 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>
        <a class="link t-label mt-4" href="donate.html?fund=current-appeal">Support the current appeal</a>
      </li>
      <li class="relative">
        <span aria-hidden="true" class="absolute -left-[41px] top-1 size-4 rounded-full border-[3px] border-white bg-line-strong ring-2 ring-line sm:-left-[49px]"></span>
        <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">As work is completed</p>
        <h3 class="t-h3 mt-2">Updates on the impact page</h3>
        <p class="mt-2 max-w-[56ch] text-slate">Project updates, verified figures, stories shared with consent and annual reports are published as the work is completed.</p>
        <a class="link t-label mt-4" href="impact.html">Visit the impact page</a>
      </li>
    </ol>
  </div>
</section>

About & intro · Design 07

Intro With Checklist

A white card on smoke: a photo fills one side, the other pairs a short introduction with a checklist of how the foundation works.

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

Who we are and how we work

A UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK. Four commitments shape every decision.

Dignity first
People are helped, photographed and described with respect.
Practical help
A food parcel, a hand pump, medicine, school fees, emergency supplies.
Directly delivered
Help goes to those who need it, without conditions attached.
Open about our work
Registration details are public, and updates are published as they are verified.

About the foundation See our impact

<section aria-labelledby="about-07-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="card grid overflow-hidden lg:grid-cols-12">
      <div class="relative aspect-[16/10] bg-mist lg:col-span-5 lg:aspect-auto">
        <div class="absolute inset-0"><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) 40vw, 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: 50% 50%"></div>
      </div>
      <div class="p-6 sm:p-10 lg:col-span-7 lg:p-14">
        <h2 id="about-07-title" class="t-h2">Who we are and how we work</h2>
        <p class="t-lead mt-5 text-slate">A UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK. Four commitments shape every decision.</p>
        <ul class="mt-8 grid gap-5 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6">
          <li class="flex gap-3.5">
            <span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><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></span>
            <div><h3 class="font-display text-[17px] font-semibold text-ink">Dignity first</h3><p class="mt-1 text-[15px] leading-relaxed text-slate">People are helped, photographed and described with respect.</p></div>
          </li>
          <li class="flex gap-3.5">
            <span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><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></span>
            <div><h3 class="font-display text-[17px] font-semibold text-ink">Practical help</h3><p class="mt-1 text-[15px] leading-relaxed text-slate">A food parcel, a hand pump, medicine, school fees, emergency supplies.</p></div>
          </li>
          <li class="flex gap-3.5">
            <span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><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></span>
            <div><h3 class="font-display text-[17px] font-semibold text-ink">Directly delivered</h3><p class="mt-1 text-[15px] leading-relaxed text-slate">Help goes to those who need it, without conditions attached.</p></div>
          </li>
          <li class="flex gap-3.5">
            <span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><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></span>
            <div><h3 class="font-display text-[17px] font-semibold text-ink">Open about our work</h3><p class="mt-1 text-[15px] leading-relaxed text-slate">Registration details are public, and updates are published as they are verified.</p></div>
          </li>
        </ul>
        <div class="mt-9 flex flex-wrap items-center gap-x-7 gap-y-4 border-t border-line pt-7">
          <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="about.html">About the foundation</a>
          <a class="link t-label" href="impact.html">See our impact</a>
        </div>
      </div>
    </div>
  </div>
</section>

About & intro · Design 08

Centred Narrative

A narrow centred story with the logo mark, a fact line and two buttons, finished by a wide panoramic photo.

About the foundation

Who we are

Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.

We give practical help with essential needs. Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies. The foundation was registered with the Charity Commission for England and Wales on 20 November 2025, and is run from Sheffield.

Registered charity 1215863
Sheffield, England
Pakistan and the UK

Donate now Our causes

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

<section aria-labelledby="about-08-title" class="bg-white py-16 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-[44rem] text-center">
      <span aria-hidden="true" class="mx-auto grid size-14 place-items-center rounded-lg bg-brand font-display text-[24px] font-bold 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">About the foundation</p>
      <h2 id="about-08-title" class="t-h2 mt-3">Who we are</h2>
      <p class="t-lead mt-6 text-ink">Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
      <p class="mt-5 text-slate">We give practical help with essential needs. Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies. The foundation was registered with the Charity Commission for England and Wales on 20 November 2025, and is run from Sheffield.</p>
      <ul class="t-caption mt-8 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 font-semibold text-slate">
        <li>Registered charity 1215863</li>
        <li aria-hidden="true" class="size-1 rounded-full bg-line-strong"></li>
        <li>Sheffield, England</li>
        <li aria-hidden="true" class="size-1 rounded-full bg-line-strong"></li>
        <li>Pakistan and the UK</li>
      </ul>
      <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-12 px-6 text-base" href="donate.html?fund=current-appeal">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">Our causes</a>
      </div>
    </div>
    <div class="mt-14 aspect-[16/10] overflow-hidden rounded-2xl bg-mist sm:aspect-[21/9] lg:mt-16">
      <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% 45%">
    </div>
  </div>
</section>

About & intro · Design 09

Photo Mosaic

Copy on the left and a four-photo mosaic of the work in Pakistan on the right, one image running the full height.

Who we are

Working with families in Pakistan

Registered and run from Sheffield, working with families and communities in Pakistan.

Support is delivered to people and communities in Pakistan: food parcels, hand pumps, medical help, school costs and help in a crisis. The work is for rural Sindh and Punjab: villages, schools and homes like these.

See our causes Our impact

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

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

Students at wooden desks listening to a teacher writing on the board

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

<section aria-labelledby="about-09-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-5">
      <p class="t-label text-water">Who we are</p>
      <h2 id="about-09-title" class="t-h2 mt-3">Working with families in Pakistan</h2>
      <p class="t-lead mt-5 text-ink">Registered and run from Sheffield, working with families and communities in Pakistan.</p>
      <p class="mt-4 text-slate">Support is delivered to people and communities in Pakistan: food parcels, hand pumps, medical help, school costs and help in a crisis. The work is for rural Sindh and Punjab: villages, schools and homes like these.</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-ink text-white hover:bg-water-deep h-12 px-6 text-base" href="causes.html">See our causes</a>
        <a class="link t-label" href="impact.html">Our impact</a>
      </div>
    </div>
    <div class="grid h-[440px] grid-cols-3 grid-rows-2 gap-3 sm:h-[560px] sm:gap-4 lg:col-span-7">
      <div class="col-span-2 overflow-hidden rounded-xl bg-mist"><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) 38vw, 66vw" 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% 50%"></div>
      <div class="row-span-2 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) 20vw, 33vw" 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: 100% 50%"></div>
      <div class="overflow-hidden rounded-xl 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) 20vw, 33vw" alt="Students at wooden desks listening to a teacher writing on the board" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%"></div>
      <div class="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) 20vw, 33vw" 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% 50%"></div>
    </div>
  </div>
</section>

About & intro · Design 10

Ink Governance About

A dark section pairing the introduction and buttons with a governance panel: charity details, trustees note and register link.

Who we are

A charity governed by its trustees

Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.

We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation is run from Sheffield.

Donate now About the foundation

Governance

Zafar Foundation is a charitable incorporated organisation (foundation) governed by its trustees, who are responsible for the charity's work, finances and compliance with the Charity Commission for England and Wales.

Charity number: 1215863
Registered: 20 November 2025

Trustee names and roles will be listed here once confirmed.

See the entry on the register

<section aria-labelledby="about-10-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 grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-6">
      <p class="t-label text-marigold">Who we are</p>
      <h2 id="about-10-title" class="t-h2 mt-3 max-w-[18ch]">A charity governed by its trustees</h2>
      <p class="t-lead mt-5 text-white/85">Zafar Foundation is a UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
      <p class="mt-4 text-on-dark-muted">We give practical help with essential needs: food, clean water, medical care, education and emergency relief. The foundation is run from Sheffield.</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-12 px-6 text-base" href="donate.html?fund=current-appeal">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-12 px-6 text-base" href="about.html">About the foundation</a>
      </div>
    </div>
    <div class="rounded-2xl border border-white/15 bg-white/5 p-6 sm:p-8 lg:col-span-6">
      <div class="flex items-center gap-4">
        <span class="grid size-12 shrink-0 place-items-center rounded-md bg-white/10 text-marigold"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></span>
        <h3 class="t-h3">Governance</h3>
      </div>
      <p class="mt-5 text-[15px] leading-relaxed text-white/80">Zafar Foundation is a charitable incorporated organisation (foundation) governed by its trustees, who are responsible for the charity's work, finances and compliance with the Charity Commission for England and Wales.</p>
      <dl class="mt-6 grid gap-5 border-t border-white/15 pt-6 font-display sm:grid-cols-2">
        <div><dt class="t-caption text-on-dark-muted">Charity number</dt><dd class="mt-0.5 text-[17px] font-semibold tabular-nums">1215863</dd></div>
        <div><dt class="t-caption text-on-dark-muted">Registered</dt><dd class="mt-0.5 text-[17px] font-semibold">20 November 2025</dd></div>
      </dl>
      <div class="mt-6 border-t border-white/15 pt-6">
        <p class="text-[15px] text-white/70">Trustee names and roles will be listed here once confirmed.</p>
        <a class="link-on-dark t-label mt-4 inline-flex items-center gap-1" href="https://register-of-charities.charitycommission.gov.uk/en/charity-search" target="_blank" rel="noreferrer">See the entry on the register<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><span class="sr-only">(opens in a new tab)</span></a>
      </div>
    </div>
  </div>
</section>