Design patterns · Section 03 of 14

Page headers

Ten title areas for inner pages such as About, Causes or Contact, with breadcrumbs and introductions. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Page headers · Design 01

Photo with bottom scrim

The site's own page header: a full-width photo darkened towards the bottom, with breadcrumb, title and one-line introduction.

Children walking through a narrow alley between brick walls

About the foundation

Supporting people. Strengthening communities. Creating opportunities.

<section aria-labelledby="page-hero-01-title" class="relative isolate flex min-h-[380px] items-end overflow-hidden bg-ink text-white sm:min-h-[420px] lg:min-h-[460px]">
  <div class="absolute inset-0 -z-10">
    <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="100vw" alt="Children walking through a narrow alley between brick walls" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%">
    <div class="page-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-10 pt-24 sm:pb-12 lg:pb-14">
    <nav aria-label="Breadcrumb example 1" class="mb-4">
      <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-white/85">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-white hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-white/60"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-white">About the foundation</li>
      </ol>
    </nav>
    <h2 id="page-hero-01-title" class="t-display max-w-[16ch]">About the foundation</h2>
    <p class="t-lead mt-4 max-w-[52ch] text-white/90">Supporting people. Strengthening communities. Creating opportunities.</p>
  </div>
</section>

Page headers · Design 02

Plain smoke header

No photo: a quiet smoke band with breadcrumb, title, introduction and a last-updated tag, plus a small on-this-page list for policy pages.

Privacy policy

How Zafar Foundation collects, uses and protects personal information when you use this website or support our work.

Last updated 12 September 2026

<section aria-labelledby="page-hero-02-title" class="border-b border-line bg-smoke text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid gap-10 py-12 sm:py-16 lg:grid-cols-12 lg:items-end lg:gap-16 lg:py-20">
    <div class="lg:col-span-8">
    <nav aria-label="Breadcrumb example 2" class="mb-5">
      <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-ink">Privacy policy</li>
      </ol>
    </nav>
    <h2 id="page-hero-02-title" class="t-display max-w-[18ch]">Privacy policy</h2>
    <p class="t-lead mt-4 max-w-[56ch] text-slate">How Zafar Foundation collects, uses and protects personal information when you use this website or support our work.</p>
    <p class="t-caption mt-7 inline-flex items-center gap-2 rounded-full border border-line bg-white px-3.5 py-1.5 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="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>Last updated <span class="font-semibold text-ink">12 September 2026</span></p>
    </div>
    <nav aria-label="Privacy policy sections" class="rounded-xl border border-line bg-white p-5 sm:p-6 lg:col-span-4">
      <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">On this page</p>
      <ul class="mt-2 divide-y divide-line">
        <li><a class="group flex items-center justify-between gap-3 py-2.5 font-display text-[15px] font-medium text-ink transition-colors hover:text-water" href="privacy-policy.html#who-we-are">Who we are<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-line-strong transition-transform group-hover:translate-x-0.5 group-hover:text-water"><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></li>
        <li><a class="group flex items-center justify-between gap-3 py-2.5 font-display text-[15px] font-medium text-ink transition-colors hover:text-water" href="privacy-policy.html#the-information-we-collect">The information we collect<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-line-strong transition-transform group-hover:translate-x-0.5 group-hover:text-water"><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></li>
        <li><a class="group flex items-center justify-between gap-3 py-2.5 font-display text-[15px] font-medium text-ink transition-colors hover:text-water" href="privacy-policy.html#how-we-use-it">How we use it<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-line-strong transition-transform group-hover:translate-x-0.5 group-hover:text-water"><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></li>
        <li><a class="group flex items-center justify-between gap-3 py-2.5 font-display text-[15px] font-medium text-ink transition-colors hover:text-water" href="privacy-policy.html#your-rights">Your rights<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-line-strong transition-transform group-hover:translate-x-0.5 group-hover:text-water"><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></li>
      </ul>
    </nav>
  </div>
</section>

Page headers · Design 03

Split title and photo

Breadcrumb, title and introduction beside a rounded photo, with the page's causes grouped under their two headings.

Our causes

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

Immediate needs

Lasting foundations

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

<section aria-labelledby="page-hero-03-title" class="bg-white text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-10 py-12 sm:py-16 lg:grid-cols-12 lg:gap-16 lg:py-20">
    <div class="lg:col-span-6">
      <nav aria-label="Breadcrumb example 3" class="mb-5">
        <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
          <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
          <li aria-current="page" class="font-semibold text-ink">Our causes</li>
        </ol>
      </nav>
      <h2 id="page-hero-03-title" class="t-display">Our causes</h2>
      <p class="t-lead mt-4 max-w-[48ch] text-slate">Five areas of practical work, from a family's immediate needs to foundations that keep helping. Every donation can be directed to one of them.</p>
      <div class="mt-8 grid gap-6 border-t border-line pt-6 sm:grid-cols-2">
        <div>
          <h3 class="t-label font-semibold text-water">Immediate needs</h3>
          <ul class="mt-3 grid gap-2 font-display text-[15px]">
            <li class="flex items-center gap-2.5"><span class="size-1.5 shrink-0 rounded-full bg-marigold" aria-hidden="true"></span><a class="hover:text-water hover:underline" href="causes.html#food-distribution">Food distribution</a></li>
            <li class="flex items-center gap-2.5"><span class="size-1.5 shrink-0 rounded-full bg-marigold" aria-hidden="true"></span><a class="hover:text-water hover:underline" href="causes.html#medical-assistance">Medical assistance</a></li>
            <li class="flex items-center gap-2.5"><span class="size-1.5 shrink-0 rounded-full bg-marigold" aria-hidden="true"></span><a class="hover:text-water hover:underline" href="causes.html#emergency-relief">Emergency relief</a></li>
          </ul>
        </div>
        <div>
          <h3 class="t-label font-semibold text-water">Lasting foundations</h3>
          <ul class="mt-3 grid gap-2 font-display text-[15px]">
            <li class="flex items-center gap-2.5"><span class="size-1.5 shrink-0 rounded-full bg-water" aria-hidden="true"></span><a class="hover:text-water hover:underline" href="causes.html#clean-water">Clean water</a></li>
            <li class="flex items-center gap-2.5"><span class="size-1.5 shrink-0 rounded-full bg-water" aria-hidden="true"></span><a class="hover:text-water hover:underline" href="causes.html#education">Education</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="lg:col-span-6">
      <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist lg:aspect-[5/4]">
        <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) 45vw, 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>
    </div>
  </div>
</section>

Page headers · Design 04

Centred ink band

A centred title on ink over a faint monochrome photo, with the three things the page will publish as small tags.

Impact, documented as it happens

We publish what has been done, not what we hope to do. Updates appear here as work is completed and verified.

Project updates
Verified figures
Annual reports

<section aria-labelledby="page-hero-04-title" class="relative isolate overflow-hidden bg-ink text-white">
  <div class="absolute inset-0 -z-10" aria-hidden="true">
    <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="100vw" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover opacity-15 mix-blend-luminosity" style="object-position: 50% 50%">
  </div>
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-16 text-center sm:py-20 lg:py-24">
    <nav aria-label="Breadcrumb example 4" class="mb-6">
      <ol class="flex flex-wrap items-center justify-center gap-1.5 font-display text-[14px] text-white/80">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-white hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-white/50"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-white">Impact</li>
      </ol>
    </nav>
    <h2 id="page-hero-04-title" class="t-display mx-auto max-w-[18ch]">Impact, documented as it happens</h2>
    <p class="t-lead mx-auto mt-5 max-w-[52ch] text-white/85">We publish what has been done, not what we hope to do. Updates appear here as work is completed and verified.</p>
    <ul class="t-caption mt-8 flex flex-wrap justify-center gap-2">
      <li class="rounded-full border border-white/25 bg-white/10 px-3.5 py-1.5 text-white/90">Project updates</li>
      <li class="rounded-full border border-white/25 bg-white/10 px-3.5 py-1.5 text-white/90">Verified figures</li>
      <li class="rounded-full border border-white/25 bg-white/10 px-3.5 py-1.5 text-white/90">Annual reports</li>
    </ul>
  </div>
</section>

Page headers · Design 05

Teal with section chips

A teal band with title and introduction side by side, and icon chips that jump to each section of the page.

Get involved

Giving is one way to support the work. There are others, and each of them helps families in Pakistan and the UK.

<section aria-labelledby="page-hero-05-title" class="bg-water text-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-12 sm:py-16 lg:py-20">
    <nav aria-label="Breadcrumb example 5" class="mb-5">
      <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-white/85">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-white hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-white/60"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-white">Get involved</li>
      </ol>
    </nav>
    <div class="grid gap-5 lg:grid-cols-12 lg:items-end lg:gap-10">
      <h2 id="page-hero-05-title" class="t-display lg:col-span-6">Get involved</h2>
      <p class="t-lead max-w-[52ch] text-white/90 lg:col-span-6">Giving is one way to support the work. There are others, and each of them helps families in Pakistan and the UK.</p>
    </div>
    <nav aria-label="Get involved sections" class="mt-10 border-t border-white/20 pt-6">
      <ul class="flex flex-wrap gap-2.5">
        <li><a class="inline-flex h-11 items-center gap-2 rounded-full border border-white/35 bg-white/10 px-4 font-display text-[15px] font-medium text-white transition-colors hover:border-white hover:bg-white hover:text-water" href="get-involved.html#monthly"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><path d="M230.33,141.06a24.43,24.43,0,0,0-21.24-4.23l-41.84,9.62A28,28,0,0,0,140,112H89.94a31.82,31.82,0,0,0-22.63,9.37L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9ZM164,96a36,36,0,0,0,5.9-.48,36,36,0,1,0,28.22-47A36,36,0,1,0,164,96Zm60-12a20,20,0,1,1-20-20A20,20,0,0,1,224,84ZM164,40a20,20,0,0,1,19.25,14.61,36,36,0,0,0-15,24.93A20.42,20.42,0,0,1,164,80a20,20,0,0,1,0-40Z"></path></svg>Give monthly</a></li>
        <li><a class="inline-flex h-11 items-center gap-2 rounded-full border border-white/35 bg-white/10 px-4 font-display text-[15px] font-medium text-white transition-colors hover:border-white hover:bg-white hover:text-water" href="get-involved.html#fundraise"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"></path></svg>Fundraise for us</a></li>
        <li><a class="inline-flex h-11 items-center gap-2 rounded-full border border-white/35 bg-white/10 px-4 font-display text-[15px] font-medium text-white transition-colors hover:border-white hover:bg-white hover:text-water" href="get-involved.html#volunteer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg>Volunteer</a></li>
        <li><a class="inline-flex h-11 items-center gap-2 rounded-full border border-white/35 bg-white/10 px-4 font-display text-[15px] font-medium text-white transition-colors hover:border-white hover:bg-white hover:text-water" href="get-involved.html#partner"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"></path></svg>Partner with us</a></li>
        <li><a class="inline-flex h-11 items-center gap-2 rounded-full border border-white/35 bg-white/10 px-4 font-display text-[15px] font-medium text-white transition-colors hover:border-white hover:bg-white hover:text-water" href="get-involved.html#share"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0"><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"></path></svg>Share the appeal</a></li>
      </ul>
    </nav>
  </div>
</section>

Page headers · Design 06

Title with tab nav

Title, introduction and a donate button, closed by a numbered underline tab bar that links to each part of the page.

Make a donation

Give once or monthly, to the current appeal, a specific cause, or as Zakat or Sadaqah. UK taxpayers can add Gift Aid at no extra cost.

Start your donation

<section aria-labelledby="page-hero-06-title" class="bg-white text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 pt-12 sm:pt-16 lg:pt-20">
    <nav aria-label="Breadcrumb example 6" class="mb-5">
      <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-ink">Make a donation</li>
      </ol>
    </nav>
    <div class="grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-10">
      <div class="lg:col-span-8">
        <h2 id="page-hero-06-title" class="t-display">Make a donation</h2>
        <p class="t-lead mt-4 max-w-[54ch] text-slate">Give once or monthly, to the current appeal, a specific cause, or as Zakat or Sadaqah. UK taxpayers can add Gift Aid at no extra cost.</p>
      </div>
      <div class="lg:col-span-4 lg:justify-self-end">
        <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#donation-form">Start your donation</a>
      </div>
    </div>
    <nav aria-label="Donation page sections" class="-mx-5 mt-10 overflow-x-auto border-b border-line px-5 [scrollbar-width:none] sm:mx-0 sm:px-0 lg:mt-12">
      <ul class="flex min-w-max gap-7 sm:gap-10">
        <li><a class="-mb-px flex items-center gap-2.5 border-b-2 border-water pb-4 font-display text-[15px] font-semibold text-water" href="donate.html#donation-form" aria-current="true"><span class="grid size-6 place-items-center rounded-full bg-water text-[12px] text-white">1</span>Donation form</a></li>
        <li><a class="-mb-px flex items-center gap-2.5 border-b-2 border-transparent pb-4 font-display text-[15px] font-semibold text-slate transition-colors hover:border-line-strong hover:text-ink" href="donate.html#zakat-calculator"><span class="grid size-6 place-items-center rounded-full bg-smoke text-[12px] text-ink">2</span>Zakat calculator</a></li>
        <li><a class="-mb-px flex items-center gap-2.5 border-b-2 border-transparent pb-4 font-display text-[15px] font-semibold text-slate transition-colors hover:border-line-strong hover:text-ink" href="donate.html#gift-aid"><span class="grid size-6 place-items-center rounded-full bg-smoke text-[12px] text-ink">3</span>Gift Aid</a></li>
        <li><a class="-mb-px flex items-center gap-2.5 border-b-2 border-transparent pb-4 font-display text-[15px] font-semibold text-slate transition-colors hover:border-line-strong hover:text-ink" href="donate.html#other-ways-heading"><span class="grid size-6 place-items-center rounded-full bg-smoke text-[12px] text-ink">4</span>Other ways to give</a></li>
      </ul>
    </nav>
  </div>
</section>

Page headers · Design 07

Photo with overlapping card

A wide photo band with a white card overlapping its lower edge, holding the title, introduction and three contact details.

The Sheffield city skyline under a cloudy sky

Contact us

Questions about a donation, Gift Aid, volunteering or the work itself: email, call, or send a message.

Emailinfo@zafarfoundation.org.uk
Phone07940 040010
Registered office94 Glen Road, Sheffield, S7 1RB

<section aria-labelledby="page-hero-07-title" class="bg-smoke text-ink">
  <div class="h-[220px] bg-mist sm:h-[300px] lg:h-[380px]">
    <img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="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="mx-auto w-full max-w-content px-5 sm:px-8 relative -mt-20 pb-12 sm:-mt-28 sm:pb-16 lg:-mt-36 lg:pb-20">
    <div class="card grid gap-8 p-6 sm:p-10 lg:grid-cols-12 lg:gap-10 lg:p-12">
      <div class="lg:col-span-7">
        <nav aria-label="Breadcrumb example 7" class="mb-5">
          <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
            <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
            <li aria-current="page" class="font-semibold text-ink">Contact us</li>
          </ol>
        </nav>
        <h2 id="page-hero-07-title" class="t-display">Contact us</h2>
        <p class="t-lead mt-4 max-w-[46ch] text-slate">Questions about a donation, Gift Aid, volunteering or the work itself: email, call, or send a message.</p>
      </div>
      <ul class="grid content-center gap-5 border-t border-line pt-6 lg:col-span-5 lg:border-l lg:border-t-0 lg:pl-10 lg:pt-0">
        <li class="flex min-w-0 gap-3.5">
          <span class="grid size-10 shrink-0 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg></span>
          <span class="min-w-0"><span class="t-caption block text-slate">Email</span><a class="link font-display text-[15px] font-semibold [overflow-wrap:anywhere]" href="mailto:info@zafarfoundation.org.uk">info@zafarfoundation.org.uk</a></span>
        </li>
        <li class="flex min-w-0 gap-3.5">
          <span class="grid size-10 shrink-0 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg></span>
          <span><span class="t-caption block text-slate">Phone</span><a class="link font-display text-[15px] font-semibold" href="tel:+447940040010">07940 040010</a></span>
        </li>
        <li class="flex min-w-0 gap-3.5">
          <span class="grid size-10 shrink-0 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
          <span><span class="t-caption block text-slate">Registered office</span><span class="block font-display text-[15px] font-semibold">94 Glen Road, Sheffield, S7 1RB</span></span>
        </li>
      </ul>
    </div>
  </div>
</section>

Page headers · Design 08

Compact title bar

A short header bar with a marigold top rule: breadcrumb and a smaller title on the left, charity number and phone on the right.

Make a donation

Registered charity 1215863
07940 040010
Gift Aid

<section aria-labelledby="page-hero-08-title" class="border-b border-line bg-white text-ink">
  <div class="h-1 bg-marigold" aria-hidden="true"></div>
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex flex-col gap-5 py-7 sm:py-9 lg:flex-row lg:items-end lg:justify-between lg:gap-10">
    <div>
      <nav aria-label="Breadcrumb example 8" class="mb-2.5">
        <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
          <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
          <li aria-current="page" class="font-semibold text-ink">Make a donation</li>
        </ol>
      </nav>
      <h2 id="page-hero-08-title" class="t-display text-[2rem] sm:text-[2.5rem]">Make a donation</h2>
    </div>
    <ul class="flex flex-wrap items-center gap-x-6 gap-y-3 font-display text-[15px] lg:pb-1.5">
      <li class="flex items-center gap-2 text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water"><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 <span class="font-semibold text-ink">1215863</span></li>
      <li><a class="flex items-center gap-2 font-semibold text-ink transition-colors hover:text-water" href="tel:+447940040010"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>07940 040010</a></li>
      <li><a class="flex items-center gap-2 font-semibold text-ink transition-colors hover:text-water" href="donate.html#gift-aid"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="shrink-0 text-water"><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>Gift Aid</a></li>
    </ul>
  </div>
</section>

Page headers · Design 09

Title with facts row

Title and introduction above a dark row of four registration facts, each one public on the charity register.

About the foundation

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

Registered charity: 1215863; England and Wales
Registered: 20 November 2025; Charity Commission
Organisation type: Charitable incorporated organisation
Registered office: Sheffield, S7 1RB; 94 Glen Road, United Kingdom

<section aria-labelledby="page-hero-09-title" class="bg-white text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-12 sm:py-16 lg:py-20">
    <nav aria-label="Breadcrumb example 9" class="mb-5">
      <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-ink">About the foundation</li>
      </ol>
    </nav>
    <div class="grid gap-5 lg:grid-cols-12 lg:items-end lg:gap-10">
      <h2 id="page-hero-09-title" class="t-display max-w-[14ch] lg:col-span-6">About the foundation</h2>
      <p class="t-lead max-w-[50ch] text-slate lg:col-span-6">A UK-registered charity supporting people and communities facing poverty and hardship, in Pakistan and in the UK.</p>
    </div>
    <dl class="mt-10 grid gap-px overflow-hidden rounded-2xl bg-slate sm:grid-cols-2 lg:mt-12 lg:grid-cols-4">
      <div class="bg-ink p-6 text-white sm:p-7">
        <dt class="t-caption text-on-dark-muted">Registered charity</dt>
        <dd class="mt-1.5 font-display text-[1.75rem] font-bold leading-none tabular-nums text-marigold">1215863</dd>
        <dd class="t-caption mt-2 text-white/75">England and Wales</dd>
      </div>
      <div class="bg-ink p-6 text-white sm:p-7">
        <dt class="t-caption text-on-dark-muted">Registered</dt>
        <dd class="mt-1.5 font-display text-[1.25rem] font-semibold leading-tight">20 November 2025</dd>
        <dd class="t-caption mt-2 text-white/75">Charity Commission</dd>
      </div>
      <div class="bg-ink p-6 text-white sm:p-7">
        <dt class="t-caption text-on-dark-muted">Organisation type</dt>
        <dd class="mt-1.5 font-display text-[1.25rem] font-semibold leading-tight">Charitable incorporated organisation</dd>
      </div>
      <div class="bg-ink p-6 text-white sm:p-7">
        <dt class="t-caption text-on-dark-muted">Registered office</dt>
        <dd class="mt-1.5 font-display text-[1.25rem] font-semibold leading-tight">Sheffield, S7 1RB</dd>
        <dd class="t-caption mt-2 text-white/75">94 Glen Road, United Kingdom</dd>
      </div>
    </dl>
  </div>
</section>

Page headers · Design 10

Typographic with photo strip

An oversized title with a marigold accent line beside the introduction, finished with an edge-to-edge strip of five cause photos.

Our causes

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

<section aria-labelledby="page-hero-10-title" class="bg-white text-ink">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 pt-12 sm:pt-16 lg:pt-20">
    <nav aria-label="Breadcrumb example 10" class="mb-4">
      <ol class="flex flex-wrap items-center gap-1.5 font-display text-[14px] text-slate">
        <li class="flex items-center gap-1.5"><a class="rounded-sm transition-colors hover:text-ink hover:underline" href="index.html">Home</a><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></li>
        <li aria-current="page" class="font-semibold text-ink">Our causes</li>
      </ol>
    </nav>
    <div class="grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-10">
      <h2 id="page-hero-10-title" class="t-display text-[3rem] leading-[0.95] tracking-[-0.035em] sm:text-[4.5rem] lg:col-span-7 lg:text-[6.5rem]">Our causes</h2>
      <div class="flex gap-5 lg:col-span-5 lg:pb-3">
        <span class="mt-3.5 h-1 w-12 shrink-0 rounded-full bg-marigold" aria-hidden="true"></span>
        <p class="t-lead text-slate">Five areas of practical work, from a family's immediate needs to foundations that keep helping.</p>
      </div>
    </div>
  </div>
  <ul class="mt-10 grid grid-cols-5 gap-1 sm:gap-1.5 lg:mt-14">
    <li><a class="group relative block h-24 overflow-hidden bg-mist sm:h-32 lg:h-40" href="causes.html#food-distribution"><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="20vw" alt="Food distribution: men cooking a large pot of food over an open fire" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.06]" style="object-position: 50% 60%"><span class="t-caption absolute inset-x-0 bottom-0 hidden bg-linear-to-t from-ink/85 to-ink/0 px-3 pb-2.5 pt-8 font-semibold text-white md:block">Food distribution</span></a></li>
    <li><a class="group relative block h-24 overflow-hidden bg-mist sm:h-32 lg:h-40" href="causes.html#medical-assistance"><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="20vw" alt="Medical assistance: 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.06]" style="object-position: 50% 40%"><span class="t-caption absolute inset-x-0 bottom-0 hidden bg-linear-to-t from-ink/85 to-ink/0 px-3 pb-2.5 pt-8 font-semibold text-white md:block">Medical assistance</span></a></li>
    <li><a class="group relative block h-24 overflow-hidden bg-mist sm:h-32 lg:h-40" href="causes.html#emergency-relief"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="20vw" alt="Emergency relief: people wading through floodwater carrying belongings" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.06]" style="object-position: 50% 60%"><span class="t-caption absolute inset-x-0 bottom-0 hidden bg-linear-to-t from-ink/85 to-ink/0 px-3 pb-2.5 pt-8 font-semibold text-white md:block">Emergency relief</span></a></li>
    <li><a class="group relative block h-24 overflow-hidden bg-mist sm:h-32 lg:h-40" href="causes.html#clean-water"><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="20vw" alt="Clean water: a man 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.06]" style="object-position: 50% 30%"><span class="t-caption absolute inset-x-0 bottom-0 hidden bg-linear-to-t from-ink/85 to-ink/0 px-3 pb-2.5 pt-8 font-semibold text-white md:block">Clean water</span></a></li>
    <li><a class="group relative block h-24 overflow-hidden bg-mist sm:h-32 lg:h-40" href="causes.html#education"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="20vw" alt="Education: 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.06]" style="object-position: 50% 50%"><span class="t-caption absolute inset-x-0 bottom-0 hidden bg-linear-to-t from-ink/85 to-ink/0 px-3 pb-2.5 pt-8 font-semibold text-white md:block">Education</span></a></li>
  </ul>
</section>