Design pattern library
140 ready-made sections in the Zafar Foundation style
14 sections, ten different designs each. Every design uses the same colours, font, photos and real content as the site, works from phone to desktop, and can be copied with one click.
- 10 designsHeaders & navigationTen site headers: logo, navigation, donate actions and a mobile menu that works without extra JavaScript.Open section
- 10 designsHome heroesTen opening sections for the homepage: the current appeal, the charity’s purpose and the main donate actions.Open section
- 10 designsPage headersTen title areas for inner pages such as About, Causes or Contact, with breadcrumbs and introductions.Open section
- 10 designsAbout & introTen ways to introduce Zafar Foundation: who it is, where it works and how it is governed.Open section
- 10 designsMission & valuesTen layouts for what the foundation is here to do and the principles behind the work.Open section
- 10 designsCauses & programmesTen ways to present the five causes: food distribution, clean water, medical assistance, education and emergency relief.Open section
- 10 designsHow it worksTen layouts showing how a donation becomes practical help, step by step.Open section
- 10 designsImpact & factsTen impact layouts that use only real facts (charity number, causes, Gift Aid, Zakat) and the reporting commitments.Open section
- 10 designsGet involvedTen layouts for giving monthly, fundraising, volunteering, partnering and sharing the appeal.Open section
- 10 designsTrust & credentialsTen ways to show the registered charity number, Gift Aid, Zakat handling and governance.Open section
- 10 designsCalls to actionTen banners that ask visitors to support the current appeal, give Zakat or donate monthly.Open section
- 10 designsDonation widgetsTen donation widgets. Each is a real form that opens the donate page with the chosen fund, frequency and amount.Open section
- 10 designsContact sectionsTen contact layouts with the email, phone, registered office and a message form.Open section
- 10 designsFootersTen footers with navigation, giving links, legal links, newsletter sign-up and charity details.Open section
How to use a design
- 01
Pick a design
Open a section from the list or the Design patterns menu and scroll through its ten designs.
- 02
Copy the HTML
Click Copy HTML under the design you like, or View code to read it first.
- 03
Paste and build
Paste it into any page inside <main>, then run npm run build so Tailwind adds any new classes.