faq search filter accordion help-center faq search filter accordion help questions support FAQ with search and filters help center FAQ section
FAQ with Search
Fetch pattern JSON:
curl https://webspire.de/patterns/faq/search.json search.html
<section class="ws-faq bg-[var(--ws-faq-bg)] py-20">
<div class="mx-auto max-w-3xl px-6">
<div class="mb-10 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-faq-text)] sm:text-4xl">How can we help?</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-faq-text-soft)]">Search our FAQ or browse common questions below.</p>
<div class="relative mx-auto mt-8 max-w-lg">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
<svg class="h-5 w-5 text-[var(--ws-faq-icon)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
</div>
<input type="search" placeholder="Search questions..." class="block w-full rounded-xl border border-[var(--ws-faq-border)] bg-[var(--ws-faq-bg)] py-3 pl-12 pr-4 text-sm text-[var(--ws-faq-text)] placeholder:text-[var(--ws-faq-icon)] focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-color-primary)]">
</div>
</div>
<!-- Category tabs -->
<div class="mb-8 flex flex-wrap justify-center gap-2">
<button type="button" class="rounded-full bg-[var(--ws-color-primary)] px-4 py-1.5 text-sm font-medium text-[var(--ws-color-primary-text)]">All</button>
<button type="button" class="rounded-full border border-[var(--ws-faq-border)] bg-[var(--ws-faq-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-faq-text-soft)] transition hover:opacity-80">Getting started</button>
<button type="button" class="rounded-full border border-[var(--ws-faq-border)] bg-[var(--ws-faq-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-faq-text-soft)] transition hover:opacity-80">Billing</button>
<button type="button" class="rounded-full border border-[var(--ws-faq-border)] bg-[var(--ws-faq-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-faq-text-soft)] transition hover:opacity-80">Technical</button>
</div>
<div class="divide-y divide-[var(--ws-faq-border)] rounded-2xl border border-[var(--ws-faq-border)] bg-[var(--ws-faq-bg)]">
<details class="group">
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left font-semibold text-[var(--ws-faq-text)]">
What is included in the free plan?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-5 text-[var(--ws-faq-text-soft)]">The free plan includes access to all core patterns, the CSS effects library, and community support. You can use everything in personal and commercial projects.</div>
</details>
<details class="group">
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left font-semibold text-[var(--ws-faq-text)]">
How do I install patterns in my project?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-5 text-[var(--ws-faq-text-soft)]">Three ways: copy HTML directly from the website, use the CLI (<code class="rounded bg-[var(--ws-color-surface-alt)] px-1.5 py-0.5 text-sm">npx @webspire/cli add hero/base</code>), or fetch from the JSON API endpoint.</div>
</details>
<details class="group">
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left font-semibold text-[var(--ws-faq-text)]">
Can I use these patterns with frameworks other than Astro?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-5 text-[var(--ws-faq-text-soft)]">Absolutely. All patterns are plain HTML + Tailwind utilities. They work in React, Vue, Svelte, Next.js, Nuxt, or any framework that supports HTML and Tailwind CSS.</div>
</details>
<details class="group">
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left font-semibold text-[var(--ws-faq-text)]">
Do you offer refunds?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-5 text-[var(--ws-faq-text-soft)]">Yes. We offer a 14-day money-back guarantee on all paid plans. No questions asked — simply contact support.</div>
</details>
<details class="group">
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left font-semibold text-[var(--ws-faq-text)]">
How often are new patterns added?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-5 text-[var(--ws-faq-text-soft)]">We ship new pattern families and variants every two weeks. The changelog and newsletter keep you updated on every release.</div>
</details>
</div>
<div class="mt-10 text-center">
<p class="text-sm text-[var(--ws-faq-text-soft)]">Still have questions?</p>
<a href="#" class="mt-2 inline-block text-sm font-semibold text-[var(--ws-color-primary)] hover:opacity-80">Contact support →</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
faqsearchfilteraccordionhelp-center
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and description. |
| search | Yes | Search input for filtering questions. |
| categories | No | Category filter pill buttons. |
| questions | Yes | Accordion FAQ items inside a card. |
| support | No | Contact support CTA below questions. |
FAQ section with search input, category filter pills, and accordion questions inside a bordered card. Uses native <details>/<summary> for zero-JS accordion. Chevron rotates on open. Support CTA at the bottom. Add JS for search/filter functionality.