knowledge-base pillar guide article documentation toc callout knowledge-base pillar guide article toc documentation wiki knowledge base article layout pillar page with table of contents comprehensive guide page template documentation article with sidebar navigation
Knowledge Base Article
Fetch pattern JSON:
curl https://webspire.de/patterns/blog-details/knowledge-base.json knowledge-base.html
<div class="ws-blog-details mx-auto max-w-7xl px-6 py-12">
<div class="lg:grid lg:grid-cols-[1fr_240px] lg:gap-12">
<!-- Main Content -->
<main>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb" class="mb-6 text-sm">
<ol class="flex items-center gap-1.5 text-[var(--ws-blog-details-text-soft)]">
<li><a href="#" class="hover:text-[var(--ws-blog-details-accent)] transition-colors">Home</a></li>
<li aria-hidden="true" class="select-none">/</li>
<li><a href="#" class="hover:text-[var(--ws-blog-details-accent)] transition-colors">Knowledge Base</a></li>
<li aria-hidden="true" class="select-none">/</li>
<li aria-current="page" class="text-[var(--ws-blog-details-text)]">Article Title</li>
</ol>
</nav>
<article>
<!-- Header -->
<header class="mb-10">
<h1 class="text-3xl font-bold tracking-tight text-[var(--ws-blog-details-text)] sm:text-4xl">The Complete Guide to Topic</h1>
<p class="mt-4 text-lg leading-relaxed text-[var(--ws-blog-details-text-soft)]">A comprehensive overview covering definitions, techniques, comparisons, and practical implementation steps.</p>
<div class="mt-4 flex flex-wrap items-center gap-4 text-sm text-[var(--ws-blog-details-text-soft)]">
<time datetime="2026-03-23">Updated: March 23, 2026</time>
<span class="text-[var(--ws-blog-details-border)]">·</span>
<span>by Author Name</span>
<span class="text-[var(--ws-blog-details-border)]">·</span>
<span>12 min read</span>
</div>
</header>
<!-- Callout Stack (Abstract + TLDR) -->
<div class="mb-10 space-y-3">
<details class="rounded-lg border border-[var(--ws-blog-details-border)] bg-[var(--ws-blog-details-bg)] open:pb-4" open>
<summary class="flex cursor-pointer items-center gap-3 px-4 py-3 text-sm font-semibold text-[var(--ws-blog-details-text)] [&::-webkit-details-marker]:hidden">
<svg class="h-4 w-4 shrink-0 text-[var(--ws-blog-details-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
<span class="flex-1">Overview</span>
<svg class="h-4 w-4 shrink-0 text-[var(--ws-blog-details-text-soft)] transition-transform duration-200 [[open]>&]:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<p class="px-4 pt-1 text-sm leading-relaxed text-[var(--ws-blog-details-text-soft)]">Brief abstract of the article content. One paragraph that summarizes the key points for readers who want a quick overview before diving in.</p>
</details>
<details class="rounded-lg border border-[var(--ws-blog-details-border)] bg-[var(--ws-blog-details-bg)]">
<summary class="flex cursor-pointer items-center gap-3 px-4 py-3 text-sm font-semibold text-[var(--ws-blog-details-text)] [&::-webkit-details-marker]:hidden">
<svg class="h-4 w-4 shrink-0 text-[var(--ws-blog-details-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/></svg>
<span class="flex-1">Key Takeaways</span>
<svg class="h-4 w-4 shrink-0 text-[var(--ws-blog-details-text-soft)] transition-transform duration-200 [[open]>&]:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<ul class="space-y-2 px-4 pb-4 pt-1 text-sm text-[var(--ws-blog-details-text-soft)]">
<li><strong class="text-[var(--ws-blog-details-text)]">Definition:</strong> What this topic means in context</li>
<li><strong class="text-[var(--ws-blog-details-text)]">5 Techniques:</strong> Core methods explained with examples</li>
<li><strong class="text-[var(--ws-blog-details-text)]">Industries:</strong> Who benefits most from this approach</li>
<li><strong class="text-[var(--ws-blog-details-text)]">Free Tool:</strong> <a href="#" class="text-[var(--ws-blog-details-accent)] hover:underline">Test your site now</a></li>
</ul>
</details>
</div>
<!-- Content Sections -->
<div class="prose-spacing space-y-12">
<section id="section-1">
<h2 class="text-2xl font-bold text-[var(--ws-blog-details-text)]">What Is This Topic?</h2>
<p class="mt-4 text-[var(--ws-blog-details-text-soft)] leading-relaxed">Introduction paragraph explaining the core concept. Clear definition followed by context and why it matters today.</p>
</section>
<section id="section-2">
<h2 class="text-2xl font-bold text-[var(--ws-blog-details-text)]">The Key Difference: A vs. B</h2>
<div class="mt-6 overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-[var(--ws-blog-details-border)]">
<th scope="col" class="py-3 pr-6 text-left font-semibold text-[var(--ws-blog-details-text)]">Aspect</th>
<th scope="col" class="py-3 pr-6 text-left font-semibold text-[var(--ws-blog-details-text)]">Traditional</th>
<th scope="col" class="py-3 text-left font-semibold text-[var(--ws-blog-details-accent)]">New Approach</th>
</tr>
</thead>
<tbody class="text-[var(--ws-blog-details-text-soft)]">
<tr class="border-b border-[var(--ws-blog-details-border)]"><td class="py-3 pr-6">Goal</td><td class="py-3 pr-6">Ranking in list</td><td class="py-3">Direct citation</td></tr>
<tr class="border-b border-[var(--ws-blog-details-border)]"><td class="py-3 pr-6">Focus</td><td class="py-3 pr-6">Keywords</td><td class="py-3">Structured data</td></tr>
<tr><td class="py-3 pr-6">Metric</td><td class="py-3 pr-6">Click-through rate</td><td class="py-3">Citation frequency</td></tr>
</tbody>
</table>
</div>
</section>
<section id="section-3">
<h2 class="text-2xl font-bold text-[var(--ws-blog-details-text)]">The 5 Core Techniques</h2>
<div class="mt-6 space-y-8">
<div>
<div class="flex items-center gap-3">
<span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--ws-blog-details-accent)] text-sm font-bold text-white">1</span>
<h3 class="text-lg font-semibold text-[var(--ws-blog-details-text)]">Structured Data</h3>
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Critical</span>
</div>
<p class="mt-3 pl-11 text-[var(--ws-blog-details-text-soft)] leading-relaxed">Explanation of the first technique with practical guidance and examples.</p>
</div>
<div>
<div class="flex items-center gap-3">
<span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--ws-blog-details-accent)] text-sm font-bold text-white">2</span>
<h3 class="text-lg font-semibold text-[var(--ws-blog-details-text)]">Semantic Markup</h3>
<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">High</span>
</div>
<p class="mt-3 pl-11 text-[var(--ws-blog-details-text-soft)] leading-relaxed">Explanation of the second technique with best practices.</p>
</div>
</div>
</section>
<!-- Branch Link -->
<section id="section-4">
<h2 class="text-2xl font-bold text-[var(--ws-blog-details-text)]">Industry-Specific Guides</h2>
<div class="mt-6 grid gap-3 sm:grid-cols-2">
<a href="#" class="group flex items-center gap-3 rounded-lg border border-[var(--ws-blog-details-border)] p-4 transition-all hover:border-[var(--ws-blog-details-accent)] hover:bg-[var(--ws-blog-details-bg)]">
<span class="text-sm font-medium text-[var(--ws-blog-details-text)] group-hover:text-[var(--ws-blog-details-accent)]">For Coaches & Consultants</span>
<svg class="ml-auto h-4 w-4 shrink-0 text-[var(--ws-blog-details-text-soft)] transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
<a href="#" class="group flex items-center gap-3 rounded-lg border border-[var(--ws-blog-details-border)] p-4 transition-all hover:border-[var(--ws-blog-details-accent)] hover:bg-[var(--ws-blog-details-bg)]">
<span class="text-sm font-medium text-[var(--ws-blog-details-text)] group-hover:text-[var(--ws-blog-details-accent)]">For Law Firms</span>
<svg class="ml-auto h-4 w-4 shrink-0 text-[var(--ws-blog-details-text-soft)] transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
</section>
</div>
</article>
</main>
<!-- Sticky Table of Contents -->
<aside class="hidden lg:block">
<nav id="kb-toc" class="sticky top-24" aria-label="Table of contents">
<p class="mb-3 text-xs font-semibold uppercase tracking-widest text-[var(--ws-blog-details-text-soft)]">On this page</p>
<ul class="space-y-2 border-l border-[var(--ws-blog-details-border)] text-sm">
<li><a href="#section-1" data-toc class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-[var(--ws-blog-details-text-soft)] transition-colors hover:border-[var(--ws-blog-details-accent)] hover:text-[var(--ws-blog-details-text)]">What Is This Topic?</a></li>
<li><a href="#section-2" data-toc class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-[var(--ws-blog-details-text-soft)] transition-colors hover:border-[var(--ws-blog-details-accent)] hover:text-[var(--ws-blog-details-text)]">A vs. B Comparison</a></li>
<li><a href="#section-3" data-toc class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-[var(--ws-blog-details-text-soft)] transition-colors hover:border-[var(--ws-blog-details-accent)] hover:text-[var(--ws-blog-details-text)]">5 Core Techniques</a></li>
<li><a href="#section-4" data-toc class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-[var(--ws-blog-details-text-soft)] transition-colors hover:border-[var(--ws-blog-details-accent)] hover:text-[var(--ws-blog-details-text)]">Industry Guides</a></li>
</ul>
</nav>
</aside>
</div>
</div>
<script>
(function () {
const tocLinks = document.querySelectorAll('[data-toc]');
if (!tocLinks.length) return;
const activeClass = ['border-[var(--ws-blog-details-accent)]', 'text-[var(--ws-blog-details-text)]', '!border-[var(--ws-blog-details-accent)]'];
function setActive(id) {
tocLinks.forEach((a) => {
const isActive = a.getAttribute('href') === '#' + id;
a.style.borderColor = isActive ? 'var(--ws-blog-details-accent)' : '';
a.style.color = isActive ? 'var(--ws-blog-details-text)' : '';
a.style.fontWeight = isActive ? '500' : '';
});
}
const sections = Array.from(tocLinks)
.map((a) => document.getElementById(a.getAttribute('href').slice(1)))
.filter(Boolean);
const observer = new IntersectionObserver(
(entries) => {
const visible = entries.filter((e) => e.isIntersecting);
if (visible.length) setActive(visible[0].target.id);
},
{ rootMargin: '-10% 0px -70% 0px', threshold: 0 }
);
sections.forEach((s) => observer.observe(s));
})();
</script>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
knowledge-basepillarguidearticledocumentationtoccallout
Slots
| Name | Required | Description |
|---|---|---|
| breadcrumb | No | Breadcrumb navigation above the article. |
| header | Yes | Title, lead paragraph, meta (date, author, reading time). |
| callouts | No | Expandable callout stack (Abstract, TLDR, Audience). |
| content | Yes | Article sections with headings, tables, numbered lists, code blocks. |
| branch-links | No | Grid of links to sub-articles or related deep-dives. |
| toc | Yes | Sticky sidebar with anchor links to article sections. |
Full knowledge base pillar page layout inspired by documentation sites and content-heavy guides. Features a sticky table of contents sidebar, expandable callout stack (Abstract + Key Takeaways), numbered technique sections with importance badges, comparison tables, and branch link cards to sub-articles. The ToC uses border-left indicators that highlight on hover. All interactive elements (callouts) use native HTML <details> — no JavaScript required.