Horizon Aid theme

Vartheme BS5 Horizon Aid is the Bootstrap 5.3 front-end theme for the Horizon Aid site template, cloned from Vartheme BS5. It carries the Horizon Aid design for NGOs, nonprofits and humanitarian aid.

It is a starter kit rather than a base theme, so the components ship inside the theme and you edit them directly instead of overriding someone else's markup.

What is in it

• 136 Single Directory Components, laid out as atoms, molecules, organisms and page templates. Sixteen kinds of card, the programs tab switcher, the country cards and their slider, the map and its info cards, the heroes and sliders, the navbar and menus, the page header and footer, breadcrumbs, pagination, share, the views displays and the rest.
• A design system, not a palette. Plus Jakarta Sans for headings and interface, DM Mono for code, a brand gold primary over a deep navy secondary with a blue tertiary carrying the links, pill buttons, and a heading scale running 52px down to 14px at weight 700 on a 140% line height.
• Drupal Canvas ready. Every component declares its props, so an editor picks and configures them in Canvas without touching Twig. Icon props are opted into the Canvas Icon Picker, and the components that carry a title take its heading level as a prop.
• Storybook for building and reviewing components on their own, away from a page. 81 of them ship stories.
• Bootstrap 5.3 underneath, with the usual variables and utilities, so the parts you do not restyle behave the way Bootstrap does.

How to use it

Install the Horizon Aid site template and you get this theme with it. If you want to take the design somewhere of your own, copy the theme, rename it, and edit the components in place. That is what a starter kit is for.

Requires Drupal 11.4. Initial building, ongoing maintenance and development by Vardot.

Horizon Aid documentation

Check out Horizon Aid documentation for more details.

Automated Functional Acceptance Testing Features

Sponsored and developed by Vardot.