DENTAL & CLINICS

Elm Dental. Free dental practice HTML & Astro template

A free eight-page dental practice template with treatment categories, sample fees and appointment enquiries, in HTML and Astro.

Elm Dental website template preview

Elm Dental 1.0.0 — desktop homepage screenshot. Open the live demo for the current design

About Elm Dental

Elm Dental is an eight-page dental practice template with a calm, conventional clinic layout: contact strip, white navigation, pale-blue introduction and large treatment-room photography. Treatment categories, practical visit information and a searchable fee table give the inner pages a clear purpose. The check-up detail is grounded in NHS guidance; appointment enquiries stay non-clinical.

Best suited to: Small dental practices and clinics that need clear service information, visit preparation, fee context and a reception contact route.

Desktop and mobile screenshots

Captured from version 1.0.0 on 30 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 8-page design. Neither requires an account, subscription, or license key.

Compare the HTML and Astro downloads
Edition Included files and requirements
Plain HTML ZIP
0.60 MiB
8 HTML pages, CSS, JavaScript, local images/fonts, manifest, licenses and setup notes.
Requires: Any static host; no Node or build step required.
Standalone Astro source ZIP
0.65 MiB
8 editable Astro pages, components, data, styles, JavaScript, vendored kit, local assets, standalone lockfile and documentation.
Requires: Node.js >=22.23.4 and npm >=9.6.5. No factory workspace, hosted service, account or API key required.

What’s in the design

  • Home has a contact strip, white navigation, pale-blue split hero, three treatment cards, clinic introduction, new-patient steps and a fee overview. Lato typography and restrained blue accents follow a familiar practice-website structure.
  • Treatments includes six services, with two routine, two restorative and two cosmetic examples. Category buttons update the visible cards and announce the result count. The dental check-up has one separate detail page; the other five have descriptive cards and enquiry links.
  • Fees contains a captioned six-service table with starting-price and per-tooth labels. Text and category filters combine; empty states, result counts and reset are included. Values are illustrative private fees, not current offers or NHS fees.
  • The practice page has practical reception, access and appointment information plus a two-image keyboard viewer. New Patients explains preparation, first-visit questions and FAQs without collecting medical details.
  • Treatment links preselect the contact form. Name/email validation and preferred day/time controls prepare a non-clinical email draft. An optional HTTPS booking-provider setting replaces the form and changes the header action.
  • The check-up overview links to NHS guidance. The template avoids invented clinical credentials, reviews, before/after photographs and treatment outcomes. Two licensed images and local Lato fonts are included.

Verified page layouts

These 8 pages are included in both archives. Each link opens the live preview.

How appointment enquiries and booking links work

The form validates name and email, preselects an allowed treatment and includes preferred day/time. It omits free-text symptoms and medical history. The action builds an encoded email draft; nothing is sent, stored or booked. Visitors review and send the draft themselves in their email app.

[email protected] is reserved sample data and cannot receive email. Replace it before launch. In Astro, a valid HTTPS appointmentURL in src/site.ts replaces the form and header action with a booking-provider link. The provider handles its own availability and terms; this static template does not check appointments.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

  • Choose HTML for direct editing or Astro for shared layouts and source-driven content.
  • Replace the fictional identity, reserved .example email, office details and all sample fees and service information with verified practice content.
  • Edit src/site.ts, page compositions in src/pages/, src/theme.css and src/browser.js. Configure and test appointmentURL if using an external HTTPS booking provider.
  • Replace imagery with licensed photographs; update image variants, src/images.json, alt text and ASSETS.md together.
  • Set PUBLIC_SITE_URL to the real domain/folder URL with a trailing slash to generate canonical/social metadata and a 7-page sitemap. Leave PUBLIC_PREVIEW unset for production.
  • Upload the full HTML folder or Astro dist/. Configure unknown paths to return 404.html with HTTP 404. Test email drafts or connect a separately tested delivery backend.

A static practice website. No patient records, diagnosis, medical-history intake, confirmed appointments or delivery backend. One treatment has a separate detail page; five others use detailed service cards. Sample fees require replacement.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

Clinic photographs are by Kari Bjorn Photography and Katarzyna Zygnerska under the Unsplash License. They show separate illustrative clinical spaces, not Elm premises, clinicians or patients. Lato is SIL OFL; the original leaf mark and code are MIT. Unsplash License. Full asset credits.

Release verification

All 8 pages were checked at 320px without horizontal document overflow. Filters, reset/empty states, allowed enquiry preselection, native field validation, email-draft encoding and keyboard image viewing were tested. Both extracted source downloads passed independent install, type-check and production builds with exact HTML parity. Automated audit evidence is recorded with the source; laboratory scores do not establish full accessibility compliance or guarantee performance after customization.

Version 1.0.0, reviewed 30 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Elm is a fictional practice. Fees, address, hours and services are illustrative; no care or confirmed appointments are provided.

GOOD DESIGN, OCCASIONALLY.

Your next idea
could start here.

New templates, useful guides, and updates from us.
A little inspiration for whatever you’re building.