Design patterns · Section 08 of 14

Impact & facts

Ten impact layouts that use only real facts (charity number, causes, Gift Aid, Zakat) and the reporting commitments. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Impact & facts · Design 01

Big-number row

Four oversized facts in a ruled row (causes, countries, Gift Aid, Zakat) under a short note that verified figures will follow.

At a glance

Zafar Foundation in facts

We publish what has been done, not what we hope to do. Verified project figures will be added as work is completed. Until then, these are the facts.

Causes you can give toFrom food parcels to school costs: 5
CountriesPakistan and the United Kingdom: 2
Gift Aid on every £1For UK taxpayers, at no cost to you: 25p
ZakatOf qualifying wealth above nisab: 2.5%

Registered charity 1215863, England and Wales · Registered 20 November 2025

About the foundation

<section aria-labelledby="stats-01-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-16">
      <div class="lg:col-span-6">
        <p class="t-label text-water">At a glance</p>
        <h2 id="stats-01-title" class="t-h2 mt-3">Zafar Foundation in facts</h2>
      </div>
      <p class="t-lead text-slate lg:col-span-6">We publish what has been done, not what we hope to do. Verified project figures will be added as work is completed. Until then, these are the facts.</p>
    </div>
    <dl class="mt-12 grid grid-cols-2 gap-x-6 gap-y-10 border-t border-line pt-10 lg:grid-cols-4 lg:gap-0">
      <div class="flex flex-col-reverse justify-end lg:pr-8">
        <dt class="mt-3"><span class="block font-display text-[16px] font-semibold">Causes you can give to</span><span class="mt-1 block text-[15px] leading-relaxed text-slate">From food parcels to school costs</span></dt>
        <dd class="font-display text-[3rem] font-bold leading-none tracking-tight text-water sm:text-[4.5rem]">5</dd>
      </div>
      <div class="flex flex-col-reverse justify-end lg:border-l lg:border-line lg:px-8">
        <dt class="mt-3"><span class="block font-display text-[16px] font-semibold">Countries</span><span class="mt-1 block text-[15px] leading-relaxed text-slate">Pakistan and the United Kingdom</span></dt>
        <dd class="font-display text-[3rem] font-bold leading-none tracking-tight text-water sm:text-[4.5rem]">2</dd>
      </div>
      <div class="flex flex-col-reverse justify-end lg:border-l lg:border-line lg:px-8">
        <dt class="mt-3"><span class="block font-display text-[16px] font-semibold">Gift Aid on every £1</span><span class="mt-1 block text-[15px] leading-relaxed text-slate">For UK taxpayers, at no cost to you</span></dt>
        <dd class="font-display text-[3rem] font-bold leading-none tracking-tight text-water sm:text-[4.5rem]">25p</dd>
      </div>
      <div class="flex flex-col-reverse justify-end lg:border-l lg:border-line lg:pl-8">
        <dt class="mt-3"><span class="block font-display text-[16px] font-semibold">Zakat</span><span class="mt-1 block text-[15px] leading-relaxed text-slate">Of qualifying wealth above nisab</span></dt>
        <dd class="font-display text-[3rem] font-bold leading-none tracking-tight text-water sm:text-[4.5rem]">2.5%</dd>
      </div>
    </dl>
    <div class="mt-12 flex flex-wrap items-center justify-between gap-4 rounded-xl bg-smoke px-6 py-5">
      <p class="font-display text-[15px] text-slate"><span class="font-semibold text-ink">Registered charity 1215863</span>, England and Wales · Registered 20 November 2025</p>
      <a class="link t-label" href="about.html">About the foundation</a>
    </div>
  </div>
</section>

Impact & facts · Design 02

Giving facts on teal

Six translucent cards on the brand teal covering preset amounts, monthly giving, Gift Aid, Zakat and nisab.

Giving, in facts

Give once or monthly, to the current appeal, a specific cause, or as Zakat or Sadaqah.

Donate now Zakat calculator

£25–£250

One-time presets

Choose £25, £50, £100 or £250 for a single gift, or enter another amount.
£10–£100

Monthly presets

£10, £25, £50 or £100 a month. Monthly gifts can be cancelled at any time.
+25p

Gift Aid on every £1

Added at no cost to you, if you pay UK tax.
2.5%

Zakat

Of qualifying wealth held for a lunar year, once it is above the nisab threshold.
87.48g

Nisab in gold

Or 612.36g of silver. Compare your wealth with today's value of either.
5

Causes to choose from

Or give to the current appeal, or wherever the need is greatest. Zakat and Sadaqah are kept separate.

<section aria-labelledby="stats-02-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="flex flex-wrap items-end justify-between gap-6">
      <div class="max-w-[56ch]">
        <h2 id="stats-02-title" class="t-h2">Giving, in facts</h2>
        <p class="t-lead mt-4 text-white/85">Give once or monthly, to the current appeal, a specific cause, or as Zakat or Sadaqah.</p>
      </div>
      <div class="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">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="donate.html#zakat-calculator">Zakat calculator</a>
      </div>
    </div>
    <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
      <li class="rounded-xl border border-white/15 bg-white/10 p-6 sm:p-7">
        <p class="font-display text-[2.25rem] font-bold leading-none tracking-tight">£25–£250</p>
        <h3 class="t-label mt-4">One-time presets</h3>
        <p class="mt-1.5 text-[15px] leading-relaxed text-white/80">Choose £25, £50, £100 or £250 for a single gift, or enter another amount.</p>
      </li>
      <li class="rounded-xl border border-white/15 bg-white/10 p-6 sm:p-7">
        <p class="font-display text-[2.25rem] font-bold leading-none tracking-tight">£10–£100</p>
        <h3 class="t-label mt-4">Monthly presets</h3>
        <p class="mt-1.5 text-[15px] leading-relaxed text-white/80">£10, £25, £50 or £100 a month. Monthly gifts can be cancelled at any time.</p>
      </li>
      <li class="rounded-xl border border-white/15 bg-white/10 p-6 sm:p-7">
        <p class="font-display text-[2.25rem] font-bold leading-none tracking-tight text-marigold">+25p</p>
        <h3 class="t-label mt-4">Gift Aid on every £1</h3>
        <p class="mt-1.5 text-[15px] leading-relaxed text-white/80">Added at no cost to you, if you pay UK tax.</p>
      </li>
      <li class="rounded-xl border border-white/15 bg-white/10 p-6 sm:p-7">
        <p class="font-display text-[2.25rem] font-bold leading-none tracking-tight">2.5%</p>
        <h3 class="t-label mt-4">Zakat</h3>
        <p class="mt-1.5 text-[15px] leading-relaxed text-white/80">Of qualifying wealth held for a lunar year, once it is above the nisab threshold.</p>
      </li>
      <li class="rounded-xl border border-white/15 bg-white/10 p-6 sm:p-7">
        <p class="font-display text-[2.25rem] font-bold leading-none tracking-tight">87.48g</p>
        <h3 class="t-label mt-4">Nisab in gold</h3>
        <p class="mt-1.5 text-[15px] leading-relaxed text-white/80">Or 612.36g of silver. Compare your wealth with today's value of either.</p>
      </li>
      <li class="rounded-xl border border-white/15 bg-white/10 p-6 sm:p-7">
        <p class="font-display text-[2.25rem] font-bold leading-none tracking-tight">5</p>
        <h3 class="t-label mt-4">Causes to choose from</h3>
        <p class="mt-1.5 text-[15px] leading-relaxed text-white/80">Or give to the current appeal, or wherever the need is greatest. Zakat and Sadaqah are kept separate.</p>
      </li>
    </ul>
  </div>
</section>

Impact & facts · Design 03

Photo and register record

A portrait photo of Sheffield beside the charity's public registration details, led by the charity number in large type.

A statue in Weston Park in front of a red-brick university building — Registered in Sheffield, England

A registered UK charity

Zafar Foundation is registered with the Charity Commission for England and Wales and run from Sheffield. Every detail below is public and can be checked on the register.

Registered charity number

1215863

Registered: 20 November 2025
Organisation type: Charitable Incorporated Organisation (Foundation)
Areas of operation: England and Wales, and Pakistan
Registered office: 94 Glen Road, Sheffield, S7 1RB

How the foundation is governed

<section aria-labelledby="stats-03-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content items-center gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <figure class="relative lg:col-span-5">
      <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist sm:aspect-[16/10] lg:aspect-[4/5]"><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) 480px, 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% 40%"></div>
      <figcaption class="t-caption absolute bottom-4 left-4 rounded-full bg-white px-3 py-1.5 font-semibold text-ink shadow-[var(--shadow-card)]">Registered in Sheffield, England</figcaption>
    </figure>
    <div class="lg:col-span-7">
      <h2 id="stats-03-title" class="t-h2">A registered UK charity</h2>
      <p class="t-lead mt-4 text-slate">Zafar Foundation is registered with the Charity Commission for England and Wales and run from Sheffield. Every detail below is public and can be checked on the register.</p>
      <div class="mt-8 rounded-2xl bg-water-tint p-6 sm:p-8">
        <p class="t-label text-water-deep">Registered charity number</p>
        <p class="mt-2 font-display text-[3rem] font-bold leading-none tracking-tight text-water sm:text-[4.5rem]">1215863</p>
      </div>
      <dl class="mt-6 grid gap-x-8 sm:grid-cols-2">
        <div class="border-b border-line py-4"><dt class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Registered</dt><dd class="mt-1 font-display text-[17px] font-semibold">20 November 2025</dd></div>
        <div class="border-b border-line py-4"><dt class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Organisation type</dt><dd class="mt-1 font-display text-[17px] font-semibold">Charitable Incorporated Organisation (Foundation)</dd></div>
        <div class="border-b border-line py-4"><dt class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Areas of operation</dt><dd class="mt-1 font-display text-[17px] font-semibold">England and Wales, and Pakistan</dd></div>
        <div class="border-b border-line py-4"><dt class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Registered office</dt><dd class="mt-1 font-display text-[17px] font-semibold">94 Glen Road, Sheffield, S7 1RB</dd></div>
      </dl>
      <a class="link t-label mt-6" href="about.html">How the foundation is governed</a>
    </div>
  </div>
</section>

Impact & facts · Design 04

What we will publish

Four icon cards for the reporting promise: project updates, verified figures, stories shared with consent and annual reports.

What we publish

Our impact stories and verified project updates will be added as work is completed.

Project updates

Each update says where and when the work happened, so supporters can see what their gifts became.

Dates and locations
Verified figures

A figure is published with its period and its source, once the work it describes is complete.

With their source
Stories shared with consent

People are named or pictured only when they have agreed to it, and never in a way that trades on hardship.

Consent first
Annual reports and accounts

The year's work and accounts, alongside before and after documentation.

Each year

Verified before published. Nothing appears until the work it describes is complete.

Visit the impact page

<section aria-labelledby="stats-04-title" class="bg-smoke py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <h2 id="stats-04-title" class="t-h2">What we publish</h2>
      <p class="t-lead mt-4 text-slate">Our impact stories and verified project updates will be added as work is completed.</p>
    </div>
    <ul class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
      <li class="card flex flex-col p-6">
        <span class="grid size-12 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M216,48H56A16,16,0,0,0,40,64V184a8,8,0,0,1-16,0V88A8,8,0,0,0,8,88v96.11A24,24,0,0,0,32,208H208a24,24,0,0,0,24-24V64A16,16,0,0,0,216,48ZM176,152H96a8,8,0,0,1,0-16h80a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h80a8,8,0,0,1,0,16Z"></path></svg></span>
        <h3 class="mt-5 font-display text-lg font-semibold leading-snug">Project updates</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Each update says where and when the work happened, so supporters can see what their gifts became.</p>
        <p class="t-caption mt-5 self-start rounded-full bg-water-tint px-3 py-1 font-semibold text-water-deep">Dates and locations</p>
      </li>
      <li class="card flex flex-col p-6">
        <span class="grid size-12 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1,0-16h8V136a8,8,0,0,1,8-8H72a8,8,0,0,1,8,8v64H96V88a8,8,0,0,1,8-8h32a8,8,0,0,1,8,8V200h16V40a8,8,0,0,1,8-8h40a8,8,0,0,1,8,8V200h8A8,8,0,0,1,232,208Z"></path></svg></span>
        <h3 class="mt-5 font-display text-lg font-semibold leading-snug">Verified figures</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">A figure is published with its period and its source, once the work it describes is complete.</p>
        <p class="t-caption mt-5 self-start rounded-full bg-water-tint px-3 py-1 font-semibold text-water-deep">With their source</p>
      </li>
      <li class="card flex flex-col p-6">
        <span class="grid size-12 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M64.12,147.8a4,4,0,0,1-4,4.2H16a8,8,0,0,1-7.8-6.17,8.35,8.35,0,0,1,1.62-6.93A67.79,67.79,0,0,1,37,117.51a40,40,0,1,1,66.46-35.8,3.94,3.94,0,0,1-2.27,4.18A64.08,64.08,0,0,0,64,144C64,145.28,64,146.54,64.12,147.8Zm182-8.91A67.76,67.76,0,0,0,219,117.51a40,40,0,1,0-66.46-35.8,3.94,3.94,0,0,0,2.27,4.18A64.08,64.08,0,0,1,192,144c0,1.28,0,2.54-.12,3.8a4,4,0,0,0,4,4.2H240a8,8,0,0,0,7.8-6.17A8.33,8.33,0,0,0,246.17,138.89Zm-89,43.18a48,48,0,1,0-58.37,0A72.13,72.13,0,0,0,65.07,212,8,8,0,0,0,72,224H184a8,8,0,0,0,6.93-12A72.15,72.15,0,0,0,157.19,182.07Z"></path></svg></span>
        <h3 class="mt-5 font-display text-lg font-semibold leading-snug">Stories shared with consent</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">People are named or pictured only when they have agreed to it, and never in a way that trades on hardship.</p>
        <p class="t-caption mt-5 self-start rounded-full bg-water-tint px-3 py-1 font-semibold text-water-deep">Consent first</p>
      </li>
      <li class="card flex flex-col p-6">
        <span class="grid size-12 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,176H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm-8-56V44l44,44Z"></path></svg></span>
        <h3 class="mt-5 font-display text-lg font-semibold leading-snug">Annual reports and accounts</h3>
        <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">The year's work and accounts, alongside before and after documentation.</p>
        <p class="t-caption mt-5 self-start rounded-full bg-water-tint px-3 py-1 font-semibold text-water-deep">Each year</p>
      </li>
    </ul>
    <div class="mt-10 flex flex-col items-start gap-4 rounded-xl border border-line bg-white p-6 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-[15px] leading-relaxed text-slate"><span class="font-display font-semibold text-ink">Verified before published.</span> Nothing appears until the work it describes is complete.</p>
      <a class="link t-label shrink-0" href="impact.html">Visit the impact page</a>
    </div>
  </div>
</section>

Impact & facts · Design 05

Reporting timeline

Five reporting steps grouped under two phase bars: as work is completed, and once a year.

How results get reported

We publish what has been done, not what we hope to do. This is the path from finished work to a published figure.

As work is completed

The work is completed
Updates follow finished work, not plans or hopes.
Figures are verified
Each figure is given its period and its source before it is published.
An update is published
With dates and locations, and before and after documentation.
Stories, with consent
People are named or pictured only when they have agreed to it.

Every year

Annual report and accounts

The year's work, brought together in one report.

See what has been published

<section aria-labelledby="stats-05-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-16">
      <h2 id="stats-05-title" class="t-h2 lg:col-span-6">How results get reported</h2>
      <p class="t-lead text-slate lg:col-span-6">We publish what has been done, not what we hope to do. This is the path from finished work to a published figure.</p>
    </div>
    <div class="mt-12 grid gap-12 lg:grid-cols-5 lg:gap-8">
      <div class="lg:col-span-4">
        <div class="h-1.5 rounded-full bg-water" aria-hidden="true"></div>
        <h3 class="t-label mt-3 text-water">As work is completed</h3>
        <ol class="mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8">
          <li class="flex gap-4 sm:block">
            <span class="grid size-9 shrink-0 place-items-center rounded-full border-2 border-water font-display text-[14px] font-bold text-water" aria-hidden="true">1</span>
            <div><h4 class="font-display text-[17px] font-semibold mt-1.5 leading-snug sm:mt-4">The work is completed</h4><p class="mt-1.5 text-[15px] leading-relaxed text-slate">Updates follow finished work, not plans or hopes.</p></div>
          </li>
          <li class="flex gap-4 sm:block">
            <span class="grid size-9 shrink-0 place-items-center rounded-full border-2 border-water font-display text-[14px] font-bold text-water" aria-hidden="true">2</span>
            <div><h4 class="font-display text-[17px] font-semibold mt-1.5 leading-snug sm:mt-4">Figures are verified</h4><p class="mt-1.5 text-[15px] leading-relaxed text-slate">Each figure is given its period and its source before it is published.</p></div>
          </li>
          <li class="flex gap-4 sm:block">
            <span class="grid size-9 shrink-0 place-items-center rounded-full border-2 border-water font-display text-[14px] font-bold text-water" aria-hidden="true">3</span>
            <div><h4 class="font-display text-[17px] font-semibold mt-1.5 leading-snug sm:mt-4">An update is published</h4><p class="mt-1.5 text-[15px] leading-relaxed text-slate">With dates and locations, and before and after documentation.</p></div>
          </li>
          <li class="flex gap-4 sm:block">
            <span class="grid size-9 shrink-0 place-items-center rounded-full border-2 border-water font-display text-[14px] font-bold text-water" aria-hidden="true">4</span>
            <div><h4 class="font-display text-[17px] font-semibold mt-1.5 leading-snug sm:mt-4">Stories, with consent</h4><p class="mt-1.5 text-[15px] leading-relaxed text-slate">People are named or pictured only when they have agreed to it.</p></div>
          </li>
        </ol>
      </div>
      <div>
        <div class="h-1.5 rounded-full bg-marigold" aria-hidden="true"></div>
        <h3 class="t-label mt-3 text-ink">Every year</h3>
        <div class="mt-8 flex gap-4 sm:block">
          <span class="grid size-9 shrink-0 place-items-center rounded-full bg-marigold font-display text-[14px] font-bold text-ink" aria-hidden="true">5</span>
          <div><h4 class="font-display text-[17px] font-semibold mt-1.5 leading-snug sm:mt-4">Annual report and accounts</h4><p class="mt-1.5 text-[15px] leading-relaxed text-slate">The year's work, brought together in one report.</p></div>
        </div>
      </div>
    </div>
    <p class="mt-12 border-t border-line pt-6"><a class="link t-label" href="impact.html">See what has been published</a></p>
  </div>
</section>

Impact & facts · Design 06

Gift Aid and Zakat maths

Two panels that explain the numbers: what Gift Aid adds to each preset amount, and how Zakat and nisab work.

The numbers behind your gift

Two figures worth knowing before you give: what Gift Aid adds, and how Zakat is worked out.

Gift Aid

£125p£1.25

Gift Aid adds 25p to every £1 you give, at no cost to you, if you pay UK tax.

With the preset amounts

£25 gift: £31.25
£50 gift: £62.50
£100 gift: £125
£250 gift: £312.50

How Gift Aid works

Zakat

2.5%

Zakat is 2.5% of qualifying wealth held for a lunar year, once it is above the nisab threshold.

Qualifying wealth × 2.5% = Zakat due

Nisab is the value of

Gold: 87.48g
Silver: 612.36g

Calculate your Zakat Give Zakat

<section aria-labelledby="stats-06-title" class="bg-smoke py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <h2 id="stats-06-title" class="t-h2">The numbers behind your gift</h2>
      <p class="t-lead mt-4 text-slate">Two figures worth knowing before you give: what Gift Aid adds, and how Zakat is worked out.</p>
    </div>
    <div class="mt-12 grid gap-6 lg:grid-cols-2">
      <div class="flex flex-col rounded-2xl bg-water p-6 text-white sm:p-8 lg:p-10">
        <h3 class="t-caption self-start rounded-full bg-marigold px-3 py-1 font-semibold text-ink">Gift Aid</h3>
        <p class="mt-4 flex flex-wrap items-baseline gap-x-2 gap-y-1 font-display text-[2rem] font-bold leading-none tracking-tight sm:gap-x-3 sm:text-[3.5rem]"><span>£1</span><span class="text-white/50" aria-hidden="true">+</span><span class="text-marigold">25p</span><span class="text-white/50" aria-hidden="true">=</span><span>£1.25</span></p>
        <p class="mt-5 max-w-[44ch] text-[15px] leading-relaxed text-white/85">Gift Aid adds 25p to every £1 you give, at no cost to you, if you pay UK tax.</p>
        <p class="t-caption mt-8 font-semibold uppercase tracking-[0.08em] text-white/70">With the preset amounts</p>
        <dl class="mt-3 grid grid-cols-2 gap-3">
          <div class="rounded-lg bg-white/10 p-4"><dt class="t-caption text-white/75">£25 gift</dt><dd class="mt-1 font-display text-2xl font-bold">£31.25</dd></div>
          <div class="rounded-lg bg-white/10 p-4"><dt class="t-caption text-white/75">£50 gift</dt><dd class="mt-1 font-display text-2xl font-bold">£62.50</dd></div>
          <div class="rounded-lg bg-white/10 p-4"><dt class="t-caption text-white/75">£100 gift</dt><dd class="mt-1 font-display text-2xl font-bold">£125</dd></div>
          <div class="rounded-lg bg-white/10 p-4"><dt class="t-caption text-white/75">£250 gift</dt><dd class="mt-1 font-display text-2xl font-bold">£312.50</dd></div>
        </dl>
        <a class="link-on-dark t-label mt-8 self-start" href="donate.html#gift-aid">How Gift Aid works</a>
      </div>
      <div class="flex flex-col rounded-2xl border border-line bg-white p-6 sm:p-8 lg:p-10">
        <h3 class="t-caption self-start rounded-full bg-water-tint px-3 py-1 font-semibold text-water-deep">Zakat</h3>
        <p class="mt-4 font-display text-[2rem] font-bold leading-none tracking-tight text-water sm:text-[3.5rem]">2.5%</p>
        <p class="mt-5 max-w-[46ch] text-[15px] leading-relaxed text-slate">Zakat is 2.5% of qualifying wealth held for a lunar year, once it is above the nisab threshold.</p>
        <p class="mt-6 rounded-lg bg-smoke px-4 py-3 font-display text-[15px] font-semibold">Qualifying wealth × 2.5% = Zakat due</p>
        <p class="t-caption mt-8 font-semibold uppercase tracking-[0.08em] text-slate">Nisab is the value of</p>
        <dl class="mt-3 grid grid-cols-2 gap-3">
          <div class="rounded-lg border border-line p-4"><dt class="t-caption text-slate">Gold</dt><dd class="mt-1 font-display text-2xl font-bold">87.48g</dd></div>
          <div class="rounded-lg border border-line p-4"><dt class="t-caption text-slate">Silver</dt><dd class="mt-1 font-display text-2xl font-bold">612.36g</dd></div>
        </dl>
        <div class="mt-auto flex flex-wrap items-center gap-x-6 gap-y-3 pt-8">
          <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="donate.html#zakat-calculator">Calculate your Zakat</a>
          <a class="link t-label" href="donate.html?fund=zakat">Give Zakat</a>
        </div>
      </div>
    </div>
  </div>
</section>

Impact & facts · Design 07

Ink band of numbers

A dark band that breaks the five causes down by group, with large marigold numbers and the cause names under each.

Where a gift can go

Five causes, two groups

From a family's immediate needs to foundations that keep helping. Every donation can be directed to one of them.

Read about each cause

Causes in totalFood, water, medical, education and emergency relief: 5
Immediate needsFood distribution, Medical assistance, Emergency relief: 3
Lasting foundationsClean water, Education: 2
CountriesPakistan and the United Kingdom: 2

<section aria-labelledby="stats-07-title" class="bg-ink py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content gap-12 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-4">
      <p class="t-label text-marigold">Where a gift can go</p>
      <h2 id="stats-07-title" class="t-h2 mt-3">Five causes, two groups</h2>
      <p class="t-lead mt-4 text-white/80">From a family's immediate needs to foundations that keep helping. Every donation can be directed to one of them.</p>
      <a class="link-on-dark t-label mt-6" href="causes.html">Read about each cause</a>
    </div>
    <dl class="grid border-t border-white/15 sm:grid-cols-2 lg:col-span-8">
      <div class="flex flex-col-reverse justify-end border-b border-white/15 py-8 sm:pr-8">
        <dt class="mt-3"><span class="block font-display text-[17px] font-semibold">Causes in total</span><span class="mt-1 block text-[15px] leading-relaxed text-white/70">Food, water, medical, education and emergency relief</span></dt>
        <dd class="font-display text-[3.5rem] font-bold leading-none text-marigold sm:text-[4.5rem]">5</dd>
      </div>
      <div class="flex flex-col-reverse justify-end border-b border-white/15 py-8 sm:border-l sm:pl-8">
        <dt class="mt-3"><span class="block font-display text-[17px] font-semibold">Immediate needs</span><span class="mt-1 block text-[15px] leading-relaxed text-white/70">Food distribution, Medical assistance, Emergency relief</span></dt>
        <dd class="font-display text-[3.5rem] font-bold leading-none text-marigold sm:text-[4.5rem]">3</dd>
      </div>
      <div class="flex flex-col-reverse justify-end border-b border-white/15 py-8 sm:border-b-0 sm:pr-8">
        <dt class="mt-3"><span class="block font-display text-[17px] font-semibold">Lasting foundations</span><span class="mt-1 block text-[15px] leading-relaxed text-white/70">Clean water, Education</span></dt>
        <dd class="font-display text-[3.5rem] font-bold leading-none text-marigold sm:text-[4.5rem]">2</dd>
      </div>
      <div class="flex flex-col-reverse justify-end py-8 sm:border-l sm:border-white/15 sm:pl-8">
        <dt class="mt-3"><span class="block font-display text-[17px] font-semibold">Countries</span><span class="mt-1 block text-[15px] leading-relaxed text-white/70">Pakistan and the United Kingdom</span></dt>
        <dd class="font-display text-[3.5rem] font-bold leading-none text-marigold sm:text-[4.5rem]">2</dd>
      </div>
    </dl>
  </div>
</section>

Impact & facts · Design 08

Places board

A map-style board without a map: Pakistan and UK place lists with photo pins on a dotted background.

Where we work

The places the work is for

Rural Sindh and Punjab in Pakistan: villages, schools and homes like these. Registered and run from Sheffield.

Countries: 2
Provinces in Pakistan: 2

Ask us about the work

Pakistan

Where support is delivered

KandiaroSindh
Jalalpur PirwalaPunjab
ManglorPakistan
Rural SindhVillages, schools and homes

United Kingdom

Where the foundation is registered and run

SheffieldRegistered office, 94 Glen Road, S7 1RB
Sheffield or remotelyVolunteering at events and packing, or with skills

Donations are received and the work is organised at the registered office in Sheffield.

<section aria-labelledby="stats-08-title" class="bg-water-tint py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-4">
      <p class="t-label text-water">Where we work</p>
      <h2 id="stats-08-title" class="t-h2 mt-3">The places the work is for</h2>
      <p class="t-lead mt-4 text-slate">Rural Sindh and Punjab in Pakistan: villages, schools and homes like these. Registered and run from Sheffield.</p>
      <dl class="mt-8 grid grid-cols-2 gap-4">
        <div class="rounded-xl bg-white p-5"><dt class="t-caption font-semibold text-slate">Countries</dt><dd class="mt-1 font-display text-4xl font-bold text-water">2</dd></div>
        <div class="rounded-xl bg-white p-5"><dt class="t-caption font-semibold text-slate">Provinces in Pakistan</dt><dd class="mt-1 font-display text-4xl font-bold text-water">2</dd></div>
      </dl>
      <a class="link t-label mt-8" href="contact.html">Ask us about the work</a>
    </div>
    <div class="grid gap-5 rounded-2xl border border-line bg-white bg-[radial-gradient(var(--color-line)_1px,transparent_1px)] p-4 [background-size:18px_18px] sm:grid-cols-2 sm:p-8 lg:col-span-8">
      <div class="rounded-xl border border-line bg-white p-5 shadow-[var(--shadow-card)]">
        <h3 class="flex items-center gap-2 t-h3"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>Pakistan</h3>
        <p class="t-caption mt-1 text-slate">Where support is delivered</p>
        <ul class="mt-4 divide-y divide-line">
          <li class="flex items-center gap-3 py-3"><span class="block size-12 shrink-0 overflow-hidden rounded-md 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="48px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span><span class="block font-display text-[16px] font-semibold">Kandiaro</span><span class="t-caption block text-slate">Sindh</span></span></li>
          <li class="flex items-center gap-3 py-3"><span class="block size-12 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/alley-jalalpur-pirwala.jpg" srcset="images/webp/alley-jalalpur-pirwala-640.webp 640w, images/webp/alley-jalalpur-pirwala-1080.webp 1080w" sizes="48px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span><span class="block font-display text-[16px] font-semibold">Jalalpur Pirwala</span><span class="t-caption block text-slate">Punjab</span></span></li>
          <li class="flex items-center gap-3 py-3"><span class="block size-12 shrink-0 overflow-hidden rounded-md bg-mist"><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="48px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span><span class="block font-display text-[16px] font-semibold">Manglor</span><span class="t-caption block text-slate">Pakistan</span></span></li>
          <li class="flex items-center gap-3 pt-3"><span class="block size-12 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/delivery-motorcycle-sindh.jpg" srcset="images/webp/delivery-motorcycle-sindh-640.webp 640w, images/webp/delivery-motorcycle-sindh-1080.webp 1080w" sizes="48px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span><span class="block font-display text-[16px] font-semibold">Rural Sindh</span><span class="t-caption block text-slate">Villages, schools and homes</span></span></li>
        </ul>
      </div>
      <div class="flex flex-col gap-5">
        <div class="rounded-xl border border-line bg-white p-5 shadow-[var(--shadow-card)]">
          <h3 class="flex items-center gap-2 t-h3"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-marigold"><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>United Kingdom</h3>
          <p class="t-caption mt-1 text-slate">Where the foundation is registered and run</p>
          <ul class="mt-4 divide-y divide-line">
            <li class="flex items-center gap-3 py-3"><span class="block size-12 shrink-0 overflow-hidden rounded-md bg-mist"><img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="48px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span><span class="block font-display text-[16px] font-semibold">Sheffield</span><span class="t-caption block text-slate">Registered office, 94 Glen Road, S7 1RB</span></span></li>
            <li class="flex items-center gap-3 pt-3"><span class="block size-12 shrink-0 overflow-hidden rounded-md bg-mist"><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="48px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span><span class="block font-display text-[16px] font-semibold">Sheffield or remotely</span><span class="t-caption block text-slate">Volunteering at events and packing, or with skills</span></span></li>
          </ul>
        </div>
        <p class="rounded-xl bg-ink p-5 text-[15px] leading-relaxed text-white/85">Donations are received and the work is organised at the registered office in Sheffield.</p>
      </div>
    </div>
  </div>
</section>

Impact & facts · Design 09

Mixed bento

A bento grid of facts: a photo tile for the five causes plus ink, marigold, teal and white tiles for the other numbers.

The facts, side by side

Registration, causes and giving at a glance. Verified project figures will be added as work is completed.

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

Causes you can give to

Food distribution
Clean water
Medical
Education
Emergency relief

Registered charity

1215863

England and Wales

Gift Aid

+25p

On every £1, for UK taxpayers

Zakat

2.5%

Of qualifying wealth above nisab

Registered

2025

On 20 November, with the Charity Commission

Countries

Pakistan and the United Kingdom

Monthly presets

£10
£25
£50
£100

Monthly gifts can be cancelled at any time. Give monthly

<section aria-labelledby="stats-09-title" class="bg-white py-16 text-ink sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="max-w-[60ch]">
      <h2 id="stats-09-title" class="t-h2">The facts, side by side</h2>
      <p class="t-lead mt-4 text-slate">Registration, causes and giving at a glance. Verified project figures will be added as work is completed.</p>
    </div>
    <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-5">
      <div class="relative flex min-h-[340px] flex-col justify-end overflow-hidden rounded-2xl bg-ink p-6 text-white sm:col-span-2 sm:p-8 lg:row-span-2">
        <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) 640px, 100vw" alt="A large group of children and adults gathered for an outdoor class, some seated with books" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover">
        <span class="absolute inset-0 bg-linear-to-t from-ink from-10% via-ink/70 via-50% to-ink/0" aria-hidden="true"></span>
        <div class="relative">
          <p class="font-display text-[4rem] font-bold leading-none sm:text-[5rem]">5</p>
          <h3 class="t-h3 mt-2">Causes you can give to</h3>
          <ul class="mt-4 flex flex-wrap gap-2">
            <li class="t-caption rounded-full bg-white/15 px-3 py-1 font-semibold">Food distribution</li>
            <li class="t-caption rounded-full bg-white/15 px-3 py-1 font-semibold">Clean water</li>
            <li class="t-caption rounded-full bg-white/15 px-3 py-1 font-semibold">Medical</li>
            <li class="t-caption rounded-full bg-white/15 px-3 py-1 font-semibold">Education</li>
            <li class="t-caption rounded-full bg-white/15 px-3 py-1 font-semibold">Emergency relief</li>
          </ul>
        </div>
      </div>
      <div class="flex flex-col justify-between rounded-2xl bg-ink p-6 text-white">
        <p class="t-label text-marigold">Registered charity</p>
        <div class="mt-8"><p class="font-display text-[2.25rem] font-bold leading-none">1215863</p><p class="t-caption mt-2 text-on-dark-muted">England and Wales</p></div>
      </div>
      <div class="flex flex-col justify-between rounded-2xl bg-marigold p-6 text-ink">
        <p class="t-label">Gift Aid</p>
        <div class="mt-8"><p class="font-display text-[2.25rem] font-bold leading-none">+25p</p><p class="t-caption mt-2 text-ink/80">On every £1, for UK taxpayers</p></div>
      </div>
      <div class="flex flex-col justify-between rounded-2xl bg-water p-6 text-white">
        <p class="t-label text-white/85">Zakat</p>
        <div class="mt-8"><p class="font-display text-[2.25rem] font-bold leading-none">2.5%</p><p class="t-caption mt-2 text-white/80">Of qualifying wealth above nisab</p></div>
      </div>
      <div class="flex flex-col justify-between rounded-2xl bg-smoke p-6">
        <p class="t-label text-water">Registered</p>
        <div class="mt-8"><p class="font-display text-[2.25rem] font-bold leading-none">2025</p><p class="t-caption mt-2 text-slate">On 20 November, with the Charity Commission</p></div>
      </div>
      <div class="flex items-center justify-between gap-5 rounded-2xl border border-line p-6 sm:col-span-2">
        <div><p class="font-display text-[2.25rem] font-bold leading-none text-water">2</p><p class="mt-2 font-display text-[16px] font-semibold">Countries</p><p class="t-caption text-slate">Pakistan and the United Kingdom</p></div>
        <div class="flex shrink-0">
          <span class="block size-16 overflow-hidden rounded-full bg-mist ring-4 ring-white sm:size-20"><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="80px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span>
          <span class="-ml-4 block size-16 overflow-hidden rounded-full bg-mist ring-4 ring-white sm:size-20"><img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="80px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span>
        </div>
      </div>
      <div class="rounded-2xl border border-line p-6 sm:col-span-2">
        <p class="font-display text-[16px] font-semibold">Monthly presets</p>
        <ul class="mt-3 flex flex-wrap gap-2">
          <li class="rounded-sm bg-water-tint px-3 py-1.5 font-display text-[15px] font-semibold text-water-deep">£10</li>
          <li class="rounded-sm bg-water-tint px-3 py-1.5 font-display text-[15px] font-semibold text-water-deep">£25</li>
          <li class="rounded-sm bg-water-tint px-3 py-1.5 font-display text-[15px] font-semibold text-water-deep">£50</li>
          <li class="rounded-sm bg-water-tint px-3 py-1.5 font-display text-[15px] font-semibold text-water-deep">£100</li>
        </ul>
        <p class="t-caption mt-3 text-slate">Monthly gifts can be cancelled at any time. <a class="link" href="donate.html?frequency=monthly">Give monthly</a></p>
      </div>
    </div>
  </div>
</section>

Impact & facts · Design 10

Compact fact strip

A slim ruled strip of five icon facts for placing under a hero or above the footer.

Zafar Foundation at a glance

1215863Registered charity
20 Nov 2025Date registered
2 countriesPakistan and the UK
+25p per £1Gift Aid, UK taxpayers
2.5% ZakatKept separate

<section aria-labelledby="stats-10-title" class="border-y border-line bg-smoke py-8 text-ink sm:py-10">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <h2 id="stats-10-title" class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Zafar Foundation at a glance</h2>
    <ul class="mt-5 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-0 xl:divide-x xl:divide-line">
      <li class="flex items-center gap-3 xl:pr-6"><span class="grid size-10 shrink-0 place-items-center rounded-md border border-line bg-white text-water"><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-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><span><span class="block font-display text-[16px] font-semibold leading-tight">1215863</span><span class="t-caption block text-slate">Registered charity</span></span></li>
      <li class="flex items-center gap-3 xl:px-6"><span class="grid size-10 shrink-0 place-items-center rounded-md border border-line bg-white text-water"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-38.34-85.66a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L116,164.69l42.34-42.35A8,8,0,0,1,169.66,122.34Z"></path></svg></span><span><span class="block font-display text-[16px] font-semibold leading-tight">20 Nov 2025</span><span class="t-caption block text-slate">Date registered</span></span></li>
      <li class="flex items-center gap-3 xl:px-6"><span class="grid size-10 shrink-0 place-items-center rounded-md border border-line bg-white text-water"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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><span><span class="block font-display text-[16px] font-semibold leading-tight">2 countries</span><span class="t-caption block text-slate">Pakistan and the UK</span></span></li>
      <li class="flex items-center gap-3 xl:px-6"><span class="grid size-10 shrink-0 place-items-center rounded-md border border-line bg-white text-water"><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="block font-display text-[16px] font-semibold leading-tight">+25p per £1</span><span class="t-caption block text-slate">Gift Aid, UK taxpayers</span></span></li>
      <li class="flex items-center gap-3 xl:pl-6"><span class="grid size-10 shrink-0 place-items-center rounded-md border border-line bg-white text-water"><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="block font-display text-[16px] font-semibold leading-tight">2.5% Zakat</span><span class="t-caption block text-slate">Kept separate</span></span></li>
    </ul>
  </div>
</section>