Free
FAQ
Clinova FAQ
A faq block extracted from the Clinova template, available in Tailwind CSS and Bootstrap.
0
1
clinova.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clinova FAQ | Tailwind CSS UI Block</title>
<meta name="description" content="A faq block extracted from the Clinova template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Clinova, Tailwind CSS template, HTML website template, health template, medical clinic, family doctor, preventive care, doctor profiles, responsive healthcare design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Clinova | Tailwind CSS Health Clinic Template">
<meta property="og:description" content="A calm, editorial Tailwind CSS health template for clinics, family practices, and preventive care providers with doctor profiles, health programs, membership pricing, and online booking.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Clinova template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Clinova | Tailwind CSS Health Clinic Template">
<meta name="twitter:description" content="A calm, editorial Tailwind CSS health template for clinics, family practices, and preventive care providers with doctor profiles, health programs, membership pricing, and online booking.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Clinova template preview">
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#0e1a3a',
teal: '#4b7b8a',
mist: '#f4f4f3',
frame: '#eeeff1',
ash: '#9b9b9b'
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['Archivo', 'ui-sans-serif', 'system-ui', 'sans-serif']
}
}
}
};
</script>
<style>
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
html { scroll-behavior: smooth; }
.font-display { letter-spacing: -0.035em; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
details > summary::-webkit-details-marker { display: none; }
[data-word] { transition: color .35s ease; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-word] { transition: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-frame font-sans text-navy antialiased overflow-x-hidden">
<%
nav_links = [["Services", "services.html"], ["Doctors", "doctors.html"], ["Health Programs", "health-programs.html"], ["Blog", "blog.html"]]
approach = "Lasting health stands on three things: understanding your body through regular screening, building everyday habits that protect it, and having a care team you can reach whenever you need them. Our promise is simple: check, prevent, thrive, a clear path to a longer, healthier life."
pillars = [
["Check", "https://images.unsplash.com/photo-1666887360388-93e684b6474a?auto=format&fit=crop&w=600&q=80", "Doctor in a white coat holding a stethoscope chest piece"],
["Prevent", "https://images.unsplash.com/photo-1761315600943-d8a5bb0c499f?auto=format&fit=crop&w=600&q=80", "Grilled chicken salad with avocado and tomatoes in a dark bowl"],
["Thrive", "https://images.unsplash.com/photo-1742522450616-a2cf0cba1274?auto=format&fit=crop&w=600&q=80", "Three generations of a family embracing in an autumn park"]
]
values = [
{ icon: "fa-gear", title: "Evidence-led", text: "Each recommendation follows current clinical guidelines, so the care you get is proven, measured and suited to you.", image: "https://images.unsplash.com/photo-1758691462123-8a17ae95d203?auto=format&fit=crop&w=1400&q=80", alt: "Doctor checking a patient's blood pressure with a stethoscope" },
{ icon: "fa-hand-holding-heart", title: "Compassion", text: "Longer appointments, plain language and a team that remembers your story from one visit to the next.", image: "https://images.unsplash.com/photo-1780461159717-04ebb5eb3293?auto=format&fit=crop&w=1400&q=80", alt: "Medical professional gently holding a patient's hand" },
{ icon: "fa-circle-half-stroke", title: "Accuracy", text: "In-house labs and calibrated equipment mean results you can trust, usually back within a day.", image: "https://images.unsplash.com/photo-1606206591513-adbfbdd7a177?auto=format&fit=crop&w=1400&q=80", alt: "Rows of blood collection tubes with colourful caps in a lab rack" }
]
quotes = ["A doctor who hears me!", "Quick and thorough!", "I felt looked after", "Honestly life-changing!", "No waiting room", "Trusted"]
faqs = [
["Do I need a referral to book?", "No. You can book any general appointment directly online or by phone. Specialist visits may need a note from one of our GPs, which we arrange for you."],
["Does my insurance cover Clinova?", "We work with most major insurers and offer direct billing. If your plan is not listed, we provide itemised receipts for reimbursement."],
["How do you protect my medical records?", "Records are encrypted, stored in certified data centres and only visible to the clinicians treating you. You can download or delete your data any time."],
["Can I speak to a doctor online first?", "Yes. Video consults run from 8am to 9pm, and the doctor can book any tests you need before your in-person visit."],
["What does the yearly check-up include?", "Blood work, heart and blood pressure screening, body composition, a lifestyle review and a 30-minute results consult with your doctor."]
]
doctors = [
{ name: "Dr. Selin Hart", role: "General Practitioner", image: "https://images.unsplash.com/photo-1643297654416-05795d62e39c?auto=format&fit=crop&w=900&q=80", alt: "Smiling doctor in a white coat holding a stethoscope", slug: "selin-hart" },
{ name: "Dr. Marcus Oyelaran", role: "Cardiologist", image: "https://images.unsplash.com/photo-1758691463582-11aea602cd4a?auto=format&fit=crop&w=900&q=80", alt: "Smiling doctor with glasses and stethoscope standing with arms crossed", slug: "marcus-oyelaran" },
{ name: "Lucía Ferreira", role: "Nutritionist", image: "https://images.unsplash.com/photo-1623854767648-e7bb8009f0db?auto=format&fit=crop&w=900&q=80", alt: "Smiling clinician in a white coat with a stethoscope outdoors", slug: "lucia-ferreira" },
{ name: "Dr. Arjun Mehta", role: "Pediatrician", image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=900&q=80", alt: "Doctor in glasses and a white coat with arms crossed against a grey wall", slug: "arjun-mehta" }
]
footer_links = [
[["Check-ups", "services.html#checkups"], ["Telehealth", "services.html#telehealth"], ["Vaccination", "services.html#vaccination"], ["Lab tests", "services.html#labs"]],
[["About", "index.html#approach"], ["Doctors", "doctors.html"], ["Programs", "health-programs.html"], ["Blog", "blog.html"]],
[["Membership", "membership.html"], ["Contact", "contact.html"], ["FAQs", "index.html#faq"], ["Book a visit", "contact.html"]]
]
%>
<% nav_links.each do |label, href| %>
<% end %>
<% nav_links.each do |label, href| %>
<% end %>
<% approach.split(" ").each_with_index do |word, index| %>
<% end %>
<% pillars.each_with_index do |(label, src, alt), index| %>
<% unless index == pillars.size - 1 %>
<% end %>
<% end %>
<% values.each_with_index do |value, index| %>
<% end %>
<% values.each_with_index do |value, index| %>
<% end %>
<% values.each_with_index do |value, index| %>
<% end %>
<% quotes.each_with_index do |quote, index| %>
<% end %>
<!-- block:start faq -->
<section id="faq" class="px-2 pt-3 md:px-2.5">
<div class="grid gap-10 rounded-3xl bg-mist px-6 py-14 md:grid-cols-2 md:px-12 md:py-20">
<div class="flex flex-col justify-between gap-12">
<div>
<p class="text-[11px] uppercase tracking-[0.15em] text-ash">FAQ</p>
<h2 class="mt-8 max-w-[12ch] font-display text-4xl font-medium leading-[1.05] md:text-6xl">A few things you may be asking.</h2>
</div>
<div class="h-44 w-full max-w-[370px] overflow-hidden rounded-full md:h-[220px]">
<img src="https://images.unsplash.com/photo-1567866090540-3630e49207e4?auto=format&fit=crop&w=900&q=80" alt="Woman drinking from a bottle against a blue sky" loading="lazy" class="h-full w-full object-cover">
</div>
</div>
<div class="border-t border-navy/10">
<% faqs.each do |question, answer| %>
<details class="group border-b border-navy/10 py-7">
<summary class="flex cursor-pointer list-none items-center justify-between gap-6 font-display text-xl leading-snug md:text-[28px]" aria-expanded="false">
<%= question %>
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-navy/20 bg-white transition group-open:rotate-45"><i class="fa-solid fa-plus text-sm"></i></span>
</summary>
<p class="mt-4 max-w-[52ch] leading-relaxed text-navy/70"><%= answer %></p>
</details>
<% end %>
</div>
</div>
</section>
<!-- block:end faq -->
<script>
document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
const menu = document.getElementById(button.getAttribute("aria-controls"));
if (!menu) return;
button.addEventListener("click", () => {
const open = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!open));
menu.classList.toggle("hidden", open);
});
});
document.querySelectorAll("details").forEach((item) => {
const summary = item.querySelector("summary");
item.addEventListener("toggle", () => summary?.setAttribute("aria-expanded", String(item.open)));
});
document.querySelectorAll("[data-word-reveal]").forEach((paragraph) => {
const words = [...paragraph.querySelectorAll("[data-word]")];
if (navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const paint = () => {
const rect = paragraph.getBoundingClientRect();
const progress = Math.min(1, Math.max(0, (innerHeight * 0.85 - rect.top) / (rect.height + innerHeight * 0.35)));
const lit = Math.round(words.length * progress);
words.forEach((word, index) => {
word.classList.toggle("text-navy", index < Math.max(lit, 17));
word.classList.toggle("text-ash", index >= Math.max(lit, 17));
});
};
addEventListener("scroll", paint, { passive: true });
paint();
});
document.querySelectorAll("[data-values]").forEach((section) => {
const images = [...section.querySelectorAll("[data-value-image]")];
const panels = [...section.querySelectorAll("[data-value-panel]")];
const tabs = [...section.querySelectorAll("[data-value-tab]")];
let index = 0;
const show = (next) => {
index = (next + panels.length) % panels.length;
images.forEach((image, i) => image.classList.toggle("opacity-0", i !== index));
panels.forEach((panel, i) => { panel.hidden = i !== index; });
tabs.forEach((tab, i) => tab.setAttribute("aria-selected", String(i === index)));
};
tabs.forEach((tab) => tab.addEventListener("click", () => show(Number(tab.dataset.valueTab))));
section.querySelector("[data-value-prev]")?.addEventListener("click", () => show(index - 1));
section.querySelector("[data-value-next]")?.addEventListener("click", () => show(index + 1));
});
document.querySelectorAll("[data-carousel]").forEach((carousel) => {
const track = carousel.querySelector("[data-carousel-track]");
const slides = [...track.children];
let index = 0;
const perView = () => Math.max(1, Math.round(track.clientWidth / slides[0].clientWidth));
const maxIndex = () => Math.max(0, slides.length - perView());
const render = () => { track.style.transform = `translateX(-${index * slides[0].clientWidth}px)`; };
const go = (next) => { const max = maxIndex(); index = next > max ? 0 : next < 0 ? max : next; render(); };
carousel.querySelector("[data-carousel-prev]")?.addEventListener("click", () => go(index - 1));
carousel.querySelector("[data-carousel-next]")?.addEventListener("click", () => go(index + 1));
addEventListener("resize", () => go(Math.min(index, maxIndex())));
});
document.querySelectorAll("[data-callback]").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const note = form.parentElement.querySelector("[data-callback-note]");
if (note) note.hidden = false;
form.reset();
});
});
(() => {
const counters = document.querySelectorAll("[data-count-to]");
if (!counters.length || navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (!isIntersecting) return;
observer.unobserve(target);
const end = Number(target.dataset.countTo);
const suffix = target.dataset.countSuffix || "";
const start = performance.now();
const tick = (now) => {
const progress = Math.min((now - start) / 1200, 1);
target.textContent = Math.round(end * progress).toLocaleString() + suffix;
if (progress < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
});
});
counters.forEach((counter) => observer.observe(counter));
})();
(() => {
const items = document.querySelectorAll("[data-reveal]");
const skip = navigator.webdriver || !("IntersectionObserver" in window) || matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!items.length || skip) return;
document.documentElement.classList.add("reveal-ready");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
});
}, { rootMargin: "0px 0px -10% 0px" });
items.forEach((item) => observer.observe(item));
})();
</script>
</body>
</html>
From this template
Health & Fitness
Clinova
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
$20
/ 3 months
or $60 / year
Get Unlimited Access