Searchable library of support articles.
128 articles available
Step-by-step instructions to regain access to your account.
Add an extra layer of protection to your login.
Download a full copy of your workspace in CSV or JSON.
<div class="kb kb--list" style="--accent:#A8E6C1;">
<h2 class="kb__title">Help Centre</h2>
<label class="kb__search">
<svg class="kb__search-icon" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><line x1="13.2" y1="13.2" x2="18" y2="18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
<input class="kb__input" type="search" placeholder="Search articles…" aria-label="Search articles…" />
</label>
<p class="kb__count">128 articles available</p>
<ul class="kb__results">
<li class="kb__result"><span class="kb__tag">Account</span><h3>Resetting your password</h3><p>Step-by-step instructions to regain access to your account.</p></li>
<li class="kb__result"><span class="kb__tag">Security</span><h3>Setting up two-factor authentication</h3><p>Add an extra layer of protection to your login.</p></li>
<li class="kb__result"><span class="kb__tag">Data</span><h3>Exporting your data</h3><p>Download a full copy of your workspace in CSV or JSON.</p></li>
</ul>
</div>
<style>
.kb { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; max-width: 420px; border-radius: 14px; border: 1px solid #24143018; }
.kb__title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.kb__search { position: relative; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #24143025; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.kb__search-icon { color: #24143070; flex-shrink: 0; }
.kb__input { border: none; outline: none; flex: 1; font: inherit; background: transparent; }
.kb__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.kb__count { margin: 0 0 10px; font-size: 12px; color: #24143099; }
.kb__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kb__result { padding: 12px; border-radius: 10px; border: 1px solid #24143014; }
.kb__result h3 { margin: 4px 0; font-size: 14px; font-weight: 600; }
.kb__result p { margin: 0; font-size: 12.5px; color: #241430b3; }
.kb__tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #241430; }
.kb--grid .kb__results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb--compact .kb__result { padding: 8px 10px; display: flex; align-items: baseline; gap: 8px; }
.kb--compact .kb__result p { display: none; }
.kb--compact .kb__result h3 { margin: 0; }
</style><div class="kb-tw kb-tw--list max-w-md p-5 rounded-2xl border border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans" style="--accent:#A8E6C1">
<h2 class="m-0 mb-3 text-lg font-semibold">Help Centre</h2>
<label class="flex items-center gap-2 bg-white border-[1.5px] border-[#24143025] rounded-lg px-3 py-2 mb-2.5">
<svg class="text-[#24143070] shrink-0" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><line x1="13.2" y1="13.2" x2="18" y2="18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
<input class="border-none outline-none flex-1 bg-transparent font-inherit" type="search" placeholder="Search articles…" aria-label="Search articles…" />
</label>
<p class="m-0 mb-2.5 text-xs text-[#24143099]">128 articles available</p>
<ul class="kb-tw__results list-none m-0 p-0 flex flex-col gap-2.5">
<li class="p-3 rounded-lg border border-[#24143014]"><span class="inline-block text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#A8E6C1">Account</span><h3 class="my-1 text-sm font-semibold">Resetting your password</h3><p class="m-0 text-xs text-[#241430]/70">Step-by-step instructions to regain access to your account.</p></li>
<li class="p-3 rounded-lg border border-[#24143014]"><span class="inline-block text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#A8E6C1">Security</span><h3 class="my-1 text-sm font-semibold">Setting up two-factor authentication</h3><p class="m-0 text-xs text-[#241430]/70">Add an extra layer of protection to your login.</p></li>
<li class="p-3 rounded-lg border border-[#24143014]"><span class="inline-block text-[11px] font-semibold px-2 py-0.5 rounded-full text-[#241430]" style="background:#A8E6C1">Data</span><h3 class="my-1 text-sm font-semibold">Exporting your data</h3><p class="m-0 text-xs text-[#241430]/70">Download a full copy of your workspace in CSV or JSON.</p></li>
</ul>
</div>
<style>
.kb-tw--grid .kb-tw__results { display: grid; grid-template-columns: 1fr 1fr; }
.kb-tw--compact li { padding: 8px 10px !important; }
.kb-tw--compact li p { display: none; }
</style>export function KnowledgeBase({
title = "Help Centre",
placeholder = "Search articles…",
layout = "list",
accent = "#A8E6C1",
articleCount = 128,
}) {
const articles = [
{ tag: "Account", heading: "Resetting your password", body: "Step-by-step instructions to regain access to your account." },
{ tag: "Security", heading: "Setting up two-factor authentication", body: "Add an extra layer of protection to your login." },
{ tag: "Data", heading: "Exporting your data", body: "Download a full copy of your workspace in CSV or JSON." },
];
const resultsStyle = {
list: { display: "flex", flexDirection: "column", gap: 10 },
grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 },
compact: { display: "flex", flexDirection: "column", gap: 6 },
}[layout] ?? {};
return (
<div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, maxWidth: 420, borderRadius: 14, border: "1px solid #24143018" }}>
<h2 style={{ margin: "0 0 12px", fontSize: 18, fontWeight: 600 }}>{title}</h2>
<label style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1.5px solid #24143025", borderRadius: 10, padding: "8px 12px", marginBottom: 10 }}>
<svg width="16" height="16" viewBox="0 0 20 20" aria-hidden="true" style={{ color: "#24143070", flexShrink: 0 }}><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" strokeWidth="1.6" /><line x1="13.2" y1="13.2" x2="18" y2="18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
<input type="search" placeholder={placeholder} aria-label={placeholder} style={{ border: "none", outline: "none", flex: 1, background: "transparent", font: "inherit" }} />
</label>
<p style={{ margin: "0 0 10px", fontSize: 12, color: "#24143099" }}>{articleCount} articles available</p>
<ul style={{ listStyle: "none", margin: 0, padding: 0, ...resultsStyle }}>
{articles.map((a) => (
<li key={a.heading} style={{ padding: layout === "compact" ? "8px 10px" : 12, borderRadius: 10, border: "1px solid #24143014" }}>
<span style={{ display: "inline-block", fontSize: 11, fontWeight: 600, padding: "2px 8px", borderRadius: 999, background: accent, color: "#241430" }}>{a.tag}</span>
<h3 style={{ margin: "4px 0", fontSize: 14, fontWeight: 600 }}>{a.heading}</h3>
{layout !== "compact" && <p style={{ margin: 0, fontSize: 12.5, color: "#241430b3" }}>{a.body}</p>}
</li>
))}
</ul>
</div>
);
}