Section
Searchable FAQ
Searchable + category-filterable FAQ.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/FAQ/faq-searchable Vanilla/Sections/FAQ/faq-searchable <!-- Snippet Name: Searchable FAQ | Family: FAQ | Description: Searchable + category-filterable FAQ. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searchable FAQ | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: faq-searchable. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.fs .head{text-align:center;margin-bottom:24px}.fs .head h2{margin:12px 0 12px}
.fs .search{position:relative;max-width:560px;margin:0 auto 24px}
.fs .search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.fs .search input{width:100%;font:inherit;font-weight:600;border:3px solid var(--border);border-radius:999px;padding:14px 18px 14px 46px;background:var(--surface);box-shadow:var(--shadow)}
.fs .cats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.fs .cats button{font:inherit;font-weight:700;border:3px solid var(--border);background:var(--surface);padding:7px 14px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow)}
.fs .cats button[aria-pressed="true"]{background:var(--primary);color:#fff}
.fs .list{max-width:760px;margin-inline:auto;display:grid;gap:10px}
.fs .qa{border:3px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);padding:16px}
.fs .qa.hidden{display:none}.fs .qa b{display:block;margin-bottom:4px}.fs .qa p{color:var(--muted);margin:0}
.fs .empty{text-align:center;color:var(--muted);padding:30px;display:none}.fs .empty.show{display:block}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="fs" aria-labelledby="fs-title" data-sfaq>
<div class="container">
<div class="head"><span class="eyebrow">FAQ</span><h2 id="fs-title">Find your answer.</h2></div>
<div class="search"><svg class="None" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg><label class="visually-hidden" for="fs-input">Search FAQ</label><input id="fs-input" type="search" placeholder="Search questions..."></div>
<div class="cats" role="group" aria-label="Categories"><button type="button" aria-pressed="true" data-cat="All">All</button><button type="button" aria-pressed="false" data-cat="Account">Account</button><button type="button" aria-pressed="false" data-cat="Billing">Billing</button><button type="button" aria-pressed="false" data-cat="Security">Security</button><button type="button" aria-pressed="false" data-cat="API">API</button></div>
<div class="list">
<article class="qa" data-cat="Account" data-q="Account How do I invite teammates? Go to Settings → Members → Invite."><b>How do I invite teammates?</b><p>Go to Settings → Members → Invite.</p></article>
<article class="qa" data-cat="Billing" data-q="Billing Can I switch plans mid-cycle? Yes — we prorate the difference automatically."><b>Can I switch plans mid-cycle?</b><p>Yes — we prorate the difference automatically.</p></article>
<article class="qa" data-cat="Security" data-q="Security Is data encrypted? AES-256 at rest, TLS 1.3 in transit."><b>Is data encrypted?</b><p>AES-256 at rest, TLS 1.3 in transit.</p></article>
<article class="qa" data-cat="API" data-q="API Where are the API keys? Settings → Developers → API keys."><b>Where are the API keys?</b><p>Settings → Developers → API keys.</p></article>
<article class="qa" data-cat="Billing" data-q="Billing Do you invoice annually? Yes, for annual and enterprise plans."><b>Do you invoice annually?</b><p>Yes, for annual and enterprise plans.</p></article>
<article class="qa" data-cat="Account" data-q="Account Can I export my data? Anytime, as JSON or CSV."><b>Can I export my data?</b><p>Anytime, as JSON or CSV.</p></article>
</div>
<p class="empty" data-empty>No results. Try another search.</p>
</div>
</section>
<script>
(function(){
var sec=document.querySelector('[data-sfaq]');if(!sec)return;
var input=sec.querySelector('input'),items=[].slice.call(sec.querySelectorAll('.qa'));
var cats=[].slice.call(sec.querySelectorAll('.cats button'));var empty=sec.querySelector('[data-empty]');
var curCat='All';
function apply(){
var q=input.value.trim().toLowerCase();var shown=0;
items.forEach(function(it){
var matchCat=curCat==='All'||it.dataset.cat===curCat;
var matchQ=!q||it.dataset.q.toLowerCase().indexOf(q)>-1;
var show=matchCat&&matchQ;it.classList.toggle('hidden',!show);if(show)shown++;
});
empty.classList.toggle('show',shown===0);
}
input.addEventListener('input',apply);
cats.forEach(function(b){b.addEventListener('click',function(){
curCat=b.dataset.cat;cats.forEach(function(o){o.setAttribute('aria-pressed',String(o===b))});apply();
})});
})();</script>
</body>
</html># Searchable FAQ
Searchable + category-filterable FAQ.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / faq
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** faq, search, filter
**Features:** live search, no results state, aria
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 126 lines UTF-8 · LF · Spaces: 2
Continue browsing