Educare Theme - Bootstrap 5

Educare desktop home page with the header, main menu, search mark and the Shape Your Future hero

A University Defined By Excellence achievements band with the students, instructors and graduate employment figures

Educare header with the search bar open across the menu line, showing the magnifier, the keyword field and the close mark

Vartheme BS5 Educare is the Bootstrap 5.3 front-end theme for the Educare site template, cloned from Vartheme BS5. It carries the Educare design for schools, universities, academies and e-learning.

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

131 Single Directory Components, laid out as atoms, molecules, organisms and page templates. Fourteen kinds of card, the heroes and sliders, the mega menu and navbar, the page header and footer, breadcrumbs, pagination, share, the views displays and the rest.
A design system, not a palette. Sora for headings and interface, DM Mono for code, a warm white page with deep navy text and full-bleed dark bands, a warm orange accent over cream surfaces, and a heading scale running 60px down to 16px at weight 600.
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 headings take their level as a prop.
Storybook for building and reviewing components on their own, away from a page. 75 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.

Accessibility

Headings are semantic rather than decorative: a component takes its heading level as a prop, so a card can sit at the right depth in the document outline while keeping the size the design asks for. Every change is checked in a real browser as an anonymous visitor — keyboard order, focus visibility, contrast, target sizes and reflow down to a narrow screen — and the last full sweep, across 124 pages, found no axe-core violations and no skipped heading levels. Fixes go into the markup and the stylesheet. Nothing is patched at runtime by JavaScript, because the served HTML has to be right before a script runs.

How to use it

Install the Educare 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.