FAQ Section HTML Template
Answer common customer questions with a clean FAQ layout that resembles collapsible cards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product FAQ</title>
<style>
body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #0f172a; margin: 0; }
header { padding: 4rem 1.5rem 2rem; text-align: center; }
header p { color: #475569; }
main { max-width: 720px; margin: 0 auto 4rem; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
details { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1.25rem 1.5rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07); }
summary { font-weight: 600; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
p { margin-top: 0.75rem; color: #475569; }
</style>
</head>
<body>
<header>
<h1>Frequently asked questions</h1>
<p>Everything you need to know about billing, onboarding, and support.</p>
</header>
<main>
<details open>
<summary>Do you offer annual billing?</summary>
<p>Yes. Save 20% when you switch any plan from monthly to annual billing inside settings.</p>
</details>
<details>
<summary>Is onboarding included?</summary>
<p>Growth and Enterprise plans include guided setup and training sessions for your team.</p>
</details>
<details>
<summary>How can I reach support?</summary>
<p>Email support is available 24/7. Live chat is staffed from 8am–8pm EST Monday–Friday.</p>
</details>
</main>
</body>
</html>