faq accordion two-column css-only no-js contact-cta peer faq accordion two-column css-only peer-checked no-js contact-cta two column FAQ with accordion FAQ section with contact CTA sidebar CSS-only accordion without JavaScript
FAQ Two Column
Fetch pattern JSON:
curl https://webspire.de/patterns/faq/two-column.json two-column.html
<section class="ws-faq bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-16 lg:grid-cols-3">
<!-- Left: heading + CTA card -->
<div class="lg:col-span-1">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-accent)]">FAQ</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Frequently asked questions</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-color-text-soft)]">Everything you need to know about the product. Can't find what you're looking for?</p>
<div class="mt-10 rounded-2xl border border-[var(--ws-color-border)] p-6">
<h3 class="text-base font-semibold text-[var(--ws-color-text)]">Still have questions?</h3>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Our team is happy to help. Reach out and we'll get back to you within one business day.</p>
<a href="#" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-[var(--ws-color-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90">
Contact support
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
</svg>
</a>
</div>
</div>
<!-- Right: accordion -->
<div class="lg:col-span-2">
<dl class="divide-y divide-[var(--ws-color-border)]">
<!-- Item 1 -->
<div class="py-5">
<dt>
<label class="flex w-full cursor-pointer items-center justify-between text-left" for="faq-1">
<span class="text-base font-semibold text-[var(--ws-color-text)]">Is there a free plan available?</span>
<input type="checkbox" id="faq-1" class="peer sr-only"/>
<span class="ml-4 shrink-0 text-[var(--ws-color-text-soft)] peer-checked:[&_.minus]:block peer-checked:[&_.plus]:hidden [&_.minus]:hidden">
<svg class="plus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="minus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
</span>
</label>
</dt>
<dd class="mt-0 max-h-0 overflow-hidden transition-all duration-300 peer-checked:mt-3 peer-checked:max-h-96" id="faq-answer-1">
<p class="text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Yes — all patterns are free to copy and use in personal and commercial projects. The free tier includes the full HTML pattern library with no restrictions.</p>
</dd>
</div>
<!-- Item 2 -->
<div class="py-5">
<dt>
<label class="flex w-full cursor-pointer items-center justify-between text-left" for="faq-2">
<span class="text-base font-semibold text-[var(--ws-color-text)]">Do I need a Tailwind CSS subscription?</span>
<input type="checkbox" id="faq-2" class="peer sr-only"/>
<span class="ml-4 shrink-0 text-[var(--ws-color-text-soft)] peer-checked:[&_.minus]:block peer-checked:[&_.plus]:hidden [&_.minus]:hidden">
<svg class="plus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="minus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
</span>
</label>
</dt>
<dd class="mt-0 max-h-0 overflow-hidden transition-all duration-300 peer-checked:mt-3 peer-checked:max-h-96">
<p class="text-sm leading-relaxed text-[var(--ws-color-text-soft)]">No. All patterns use standard Tailwind CSS utility classes — Tailwind CSS itself is free and open source. You only need a working Tailwind v4 installation in your project.</p>
</dd>
</div>
<!-- Item 3 -->
<div class="py-5">
<dt>
<label class="flex w-full cursor-pointer items-center justify-between text-left" for="faq-3">
<span class="text-base font-semibold text-[var(--ws-color-text)]">Can I use these patterns with React or Vue?</span>
<input type="checkbox" id="faq-3" class="peer sr-only"/>
<span class="ml-4 shrink-0 text-[var(--ws-color-text-soft)] peer-checked:[&_.minus]:block peer-checked:[&_.plus]:hidden [&_.minus]:hidden">
<svg class="plus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="minus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
</span>
</label>
</dt>
<dd class="mt-0 max-h-0 overflow-hidden transition-all duration-300 peer-checked:mt-3 peer-checked:max-h-96">
<p class="text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Absolutely. The HTML patterns are framework-agnostic. You can drop them into any JSX, Vue template, or Svelte file — just adjust the class attribute syntax if needed (e.g. className in React).</p>
</dd>
</div>
<!-- Item 4 -->
<div class="py-5">
<dt>
<label class="flex w-full cursor-pointer items-center justify-between text-left" for="faq-4">
<span class="text-base font-semibold text-[var(--ws-color-text)]">Are the patterns accessible?</span>
<input type="checkbox" id="faq-4" class="peer sr-only"/>
<span class="ml-4 shrink-0 text-[var(--ws-color-text-soft)] peer-checked:[&_.minus]:block peer-checked:[&_.plus]:hidden [&_.minus]:hidden">
<svg class="plus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="minus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
</span>
</label>
</dt>
<dd class="mt-0 max-h-0 overflow-hidden transition-all duration-300 peer-checked:mt-3 peer-checked:max-h-96">
<p class="text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Yes. All patterns are built with semantic HTML, proper heading hierarchy, keyboard navigation support, and ARIA attributes where needed. Interactive components meet WCAG 2.1 AA standards.</p>
</dd>
</div>
<!-- Item 5 -->
<div class="py-5">
<dt>
<label class="flex w-full cursor-pointer items-center justify-between text-left" for="faq-5">
<span class="text-base font-semibold text-[var(--ws-color-text)]">How often is the pattern library updated?</span>
<input type="checkbox" id="faq-5" class="peer sr-only"/>
<span class="ml-4 shrink-0 text-[var(--ws-color-text-soft)] peer-checked:[&_.minus]:block peer-checked:[&_.plus]:hidden [&_.minus]:hidden">
<svg class="plus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="minus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
</span>
</label>
</dt>
<dd class="mt-0 max-h-0 overflow-hidden transition-all duration-300 peer-checked:mt-3 peer-checked:max-h-96">
<p class="text-sm leading-relaxed text-[var(--ws-color-text-soft)]">New patterns are added regularly. The MCP server fetches the latest registry automatically, so if you're using the AI integration, you always have access to the newest patterns without reinstalling anything.</p>
</dd>
</div>
<!-- Item 6 -->
<div class="py-5">
<dt>
<label class="flex w-full cursor-pointer items-center justify-between text-left" for="faq-6">
<span class="text-base font-semibold text-[var(--ws-color-text)]">Can I request a custom pattern?</span>
<input type="checkbox" id="faq-6" class="peer sr-only"/>
<span class="ml-4 shrink-0 text-[var(--ws-color-text-soft)] peer-checked:[&_.minus]:block peer-checked:[&_.plus]:hidden [&_.minus]:hidden">
<svg class="plus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="minus h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
</span>
</label>
</dt>
<dd class="mt-0 max-h-0 overflow-hidden transition-all duration-300 peer-checked:mt-3 peer-checked:max-h-96">
<p class="text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Pattern requests are welcome. Open a discussion in the community or reach out directly. High-demand requests are prioritized in the roadmap. Custom design work is available for enterprise customers.</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
faqaccordiontwo-columncss-onlyno-jscontact-ctapeer
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading. |
| heading | Yes | Section title. |
| description | No | Short intro text below the heading. |
| contact-cta | No | Contact card in the left column. |
| faq-items | Yes | Accordion list of question/answer pairs. |
Two-column FAQ section. The narrower left column holds the section heading, intro text, and a “Still have questions?” contact card. The wider right column has six accordion items using CSS peer-checked to toggle visibility — no JavaScript needed. The max-h-0 to max-h-96 transition animates the content reveal smoothly.