Vitalis
A clean, structured HTML5 template for clinics, medical practices and healthcare providers.
About this theme
Vitalis brings general practice, dental, pediatric and specialist care together in one clean, trustworthy website. It includes a photography-led hero with a live-availability badge, department-tabbed services (General Medicine, Dental Care, Specialist Care — real interactive tabs, not static tables), a physician team section with real portrait photography, patient testimonials, a working appointment request form, an FAQ accordion, and hours & location. Built with plain HTML, CSS and vanilla JavaScript — no build step, no framework dependency. Fully responsive with a persisted dark-mode toggle and scroll-reveal animations. One brand color (teal), sharp corners, numbered indices instead of icons — restyles cleanly to match your own clinic's brand by editing a handful of CSS custom properties.
Platform compatibility
| Edition | Responsive | RTL | Translation-ready | Dark mode | Version |
|---|---|---|---|---|---|
| HTML5 (Vanilla CSS/JS) | ✓ | — | — | ✓ | 1.0.0 |
Documentation
Getting started
1. Unzip the downloaded package. 2. Open `index.html` directly in a browser to preview it, or upload the whole folder to your web host. 3. All styling lives in `assets/css/styles.css` — the brand color, borders and spacing are controlled by the CSS custom properties (variables) at the top of the file. Change `--c-primary` to restyle the whole site to your brand. 4. All interactivity — the mobile menu, dark mode toggle, department tabs, FAQ accordion and appointment form — lives in `assets/js/main.js`, plain vanilla JavaScript with no dependencies or build step. 5. Replace the placeholder doctor photos, clinic name and copy in `index.html` with your own content. The doctor and hero photos live in `assets/img/`. 6. The appointment request form is UI-only by default — wire the form submission up to your own backend or a form/booking service to receive real requests.
Editing the department tabs
The Services section's three department tabs are plain markup, not a component: each button in `.dept-tabs` carries a `data-dept` attribute matching a `.dept-panel`'s `data-panel` attribute, and `main.js` just toggles an `is-active` class on click — add, remove or rename a department by editing both the button and its matching panel, no JavaScript changes required. Each service card inside a panel uses a numbered index (`01`, `02`...) instead of an icon — this is a deliberate design choice, not a missing asset. To add a service, copy a `.service-card` block and update its index number, title and description. The photography (hero image and doctor portraits) is free-to-use stock photography sourced from Pexels — swap the files in `assets/img/` for your own clinic's photos and real staff portraits before going live.
Reviews
No reviews yet — be the first to share your experience.
