Each section below shows a live rendering of the component followed by the exact markup to copy. The comment on the first line of each snippet — <!--[ Feature Name ]--> — is just a label; it's optional and safe to delete.
Typography
Bare <h1>–<h6> tags carry a default scale (used as a fallback anywhere a component doesn't set its own size). Alongside them, a set of utility classes — .subtitle1, .subtitle2, .body1, .body2, .text-button, .caption, .overline — cover the smaller in-between sizes, and .font-thin through .font-extrabold, .italic, .underline, and .line-through layer on style, weight, and decoration.
Heading - H1
Heading - H2
Heading - H3
Heading - H4
Heading - H5
Heading - H6
Subtitle 1
Subtitle 2
Body 1
Body 2
Caption<!--[ Type Scale ]-->
<h1>Heading - H1</h1>
<h2>Heading - H2</h2>
<h3>Heading - H3</h3>
<h4>Heading - H4</h4>
<h5>Heading - H5</h5>
<h6>Heading - H6</h6>
<p class="subtitle1">Subtitle 1</p>
<p class="subtitle2">Subtitle 2</p>
<p class="body1">Body 1</p>
<p class="body2">Body 2</p>
<span class="text-button">Button</span>
<span class="caption">Caption</span>Italic
Thin - 100
Extralight - 200
Light - 300
Normal - 400
Medium - 500
Semibold - 600
Bold - 700
Underline
Line Through
Overline
<!--[ Style, Weight & Decoration ]-->
<p class="body1 italic">Italic</p>
<p class="body1 font-thin">Thin - 100</p>
<p class="body1 font-extralight">Extralight - 200</p>
<p class="body1 font-light">Light - 300</p>
<p class="body1">Normal - 400</p>
<p class="body1 font-medium">Medium - 500</p>
<p class="body1 font-semibold">Semibold - 600</p>
<p class="body1 font-bold">Bold - 700</p>
<p class="body1 underline">Underline</p>
<p class="body1 line-through">Line Through</p>
<p class="overline">Overline</p>Buttons
Five visual styles ship with the template: .btn-primary (contained), .btn-outline (outlined), .btn-pastel (tinted), .btn-text (text-only), and .btn-surface (text-only with a hover surface). Combine any of them with a size modifier — .btn-lg, the unmodified default (medium), .btn-sm, or .btn-tiny — and drop an inline <svg> before or after the label for a leading or trailing icon.
<!--[ Button Variants ]-->
<button type="button" class="btn btn-primary">Contained</button>
<button type="button" class="btn btn-outline">Outlined</button>
<button type="button" class="btn btn-pastel">Pastel</button>
<button type="button" class="btn btn-text">Text</button>
<button type="button" class="btn btn-surface">Surface</button><!--[ Size — Large ]-->
<button type="button" class="btn btn-primary btn-lg">Contained</button>
<button type="button" class="btn btn-outline btn-lg">Outlined</button>
<button type="button" class="btn btn-pastel btn-lg">Pastel</button>
<button type="button" class="btn btn-text btn-lg">Text</button>
<button type="button" class="btn btn-surface btn-lg">Surface</button><!--[ Size — Medium ]-->
<button type="button" class="btn btn-primary">Contained</button>
<button type="button" class="btn btn-outline">Outlined</button>
<button type="button" class="btn btn-pastel">Pastel</button>
<button type="button" class="btn btn-text">Text</button>
<button type="button" class="btn btn-surface">Surface</button><!--[ Size — Small ]-->
<button type="button" class="btn btn-primary btn-sm">Contained</button>
<button type="button" class="btn btn-outline btn-sm">Outlined</button>
<button type="button" class="btn btn-pastel btn-sm">Pastel</button>
<button type="button" class="btn btn-text btn-sm">Text</button>
<button type="button" class="btn btn-surface btn-sm">Surface</button><!--[ Size — Tiny ]-->
<button type="button" class="btn btn-primary btn-tiny">Contained</button>
<button type="button" class="btn btn-outline btn-tiny">Outlined</button>
<button type="button" class="btn btn-pastel btn-tiny">Pastel</button>
<button type="button" class="btn btn-text btn-tiny">Text</button>
<button type="button" class="btn btn-surface btn-tiny">Surface</button><!--[ Icon — Left ]-->
<button type="button" class="btn btn-primary"><svg width="18" height="18"><use href="#icon-search"></use></svg>Search</button>
<button type="button" class="btn btn-outline"><svg width="18" height="18"><use href="#icon-search"></use></svg>Search</button>
<button type="button" class="btn btn-pastel"><svg width="18" height="18"><use href="#icon-search"></use></svg>Search</button>
<button type="button" class="btn btn-text"><svg width="18" height="18"><use href="#icon-search"></use></svg>Search</button>
<button type="button" class="btn btn-surface"><svg width="18" height="18"><use href="#icon-search"></use></svg>Search</button><!--[ Icon — Right ]-->
<button type="button" class="btn btn-primary">Continue<svg width="18" height="18"><use href="#icon-chevron-right-sm"></use></svg></button>
<button type="button" class="btn btn-outline">Continue<svg width="18" height="18"><use href="#icon-chevron-right-sm"></use></svg></button>
<button type="button" class="btn btn-pastel">Continue<svg width="18" height="18"><use href="#icon-chevron-right-sm"></use></svg></button>
<button type="button" class="btn btn-text">Continue<svg width="18" height="18"><use href="#icon-chevron-right-sm"></use></svg></button>
<button type="button" class="btn btn-surface">Continue<svg width="18" height="18"><use href="#icon-chevron-right-sm"></use></svg></button>Blockquotes
Use inside .post-wrap (or any content column). Two variants ship with the template.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Anonymous
<!--[ Standard Blockquote ]-->
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>
<span>Anonymous</span>
</blockquote>"The best agents are the ones that know when to stop. Overconfidence is the most expensive mistake in automation."
<!--[ Blockquote — Style 1 ]-->
<blockquote class="bq-style1">
"The best agents are the ones that know when to stop. Overconfidence is the most expensive mistake in automation."
<span class="bq-author">— FlowMind Engineering Team</span>
</blockquote>Alerts
Pill-shaped status banners for surfacing success, info, warning, and error states — three visual weights (standard, filled, outlined) built on one shared icon set. Each one is a single line: no inline SVG required, just alert plus a severity (success / info / warning / error) and, optionally, fill or outline. The icon is added automatically by CSS and always matches the alert's colour.
<div class="alert success">This is a success Alert.</div><div class="alert success fill">This is a filled success Alert.</div><div class="alert success outline">This is an outlined success Alert.</div><div class="alert info">This is an info Alert.</div><div class="alert info fill">This is a filled info Alert.</div><div class="alert info outline">This is an outlined info Alert.</div><div class="alert warning">This is a warning Alert.</div><div class="alert warning fill">This is a filled warning Alert.</div><div class="alert warning outline">This is an outlined warning Alert.</div><div class="alert error">This is an error Alert.</div><div class="alert error fill">This is a filled error Alert.</div><div class="alert error outline">This is an outlined error Alert.</div>Code Block
Just write plain <pre><code> — no wrapper <div>, no language class, no header markup. script.js finds every code block on the page, wraps it, adds a copy button, and runs it through highlight.js, which auto-detects the language and colors it using the --hl-* tokens in styles.css.
const tools = ['lookup_order', 'issue_refund', 'escalate_to_human'];
function pickTool(intent) {
if (intent === 'order_status') return tools[0];
return tools[2];
}<pre><code>
const tools = ['lookup_order', 'issue_refund', 'escalate_to_human'];
function pickTool(intent) {
if (intent === 'order_status') return tools[0];
return tools[2];
}
</code></pre>Table
A responsive, horizontally-scrollable data table. Just a plain semantic table — no wrapper <div>, no classes, no data-label attributes needed. It scrolls on its own if it doesn't fit a narrow screen.
| Tool | Risk Level | When to Use |
|---|---|---|
| lookup_order | Low | Always — first step |
| issue_refund | Medium | Order verified & in policy |
<!--[ Table ]-->
<table>
<thead>
<tr><th>Tool</th><th>Risk Level</th><th>When to Use</th></tr>
</thead>
<tbody>
<tr><td>lookup_order</td><td>Low</td><td>Always — first step</td></tr>
<tr><td>issue_refund</td><td>Medium</td><td>Order verified & in policy</td></tr>
</tbody>
</table>Pulled Image
A full-width inset image with rounded corners — drop it between paragraphs to break up long sections. Add a <figcaption> below the image to caption it; it's optional and safe to remove.
<!--[ Pulled Image ]-->
<div class="pull-img">
<img src="assets/thumb-network.svg" alt="Descriptive alt text">
<figcaption>Illustration of a connected network</figcaption>
</div>Spoiler
A single collapsed block, built on native <details>/<summary> — no JS required.
Spoiler: reveal details
Any content can go here — text, lists, images, or code blocks.
<!--[ Spoiler ]-->
<details class="spoiler">
<summary>Spoiler: reveal details</summary>
<div class="spoiler-body">
<p>Any content can go here — text, lists, images, or code blocks.</p>
</div>
</details>Accordion
Several <details> elements grouped together — ideal for FAQs. Each item opens independently.
How long does setup take?
Most teams have a working agent in 2-3 days.
Can I use this for sales or onboarding?
Yes — the same three-tool pattern works for any bounded-action domain.
<!--[ Accordion ]-->
<div class="accordion">
<details>
<summary>How long does setup take?</summary>
<div class="acc-body"><p>Most teams have a working agent in 2-3 days.</p></div>
</details>
<details>
<summary>Can I use this for sales or onboarding?</summary>
<div class="acc-body"><p>Yes — the same three-tool pattern works for any bounded-action domain.</p></div>
</details>
</div>Steps
A numbered vertical timeline — just a plain <ol> or <ul> with the .steps class (numbering is generated by CSS, so it works the same either way). A solid line connects each circle to the next, all in your theme's primary color. Each item can be a plain line of text, or richer — a bold title, a description paragraph, and a muted timestamp.
- step_1
- step_2
- step_3
<!--[ Steps — simple ]-->
<ol class="steps">
<li>step_1</li>
<li>step_2</li>
<li>step_3</li>
</ol>-
Permission Updated
Olivia updated user permissions for Elijah
4 hours ago -
User Password Reset
Olivia logged into the admin dashboard.
4 hours ago -
Product Update
Charlotte edited product details for Buck Rogers
6 hours ago -
Refund Process
James processed refund request for order #10234
2 days ago
<!--[ Steps — activity timeline ]-->
<ol class="steps">
<li>
<strong>Permission Updated</strong>
<p>Olivia updated user permissions for <a href="#">Elijah</a></p>
<span class="steps-time">4 hours ago</span>
</li>
<li>
<strong>User Password Reset</strong>
<p><a href="#">Olivia</a> logged into the admin dashboard.</p>
<span class="steps-time">4 hours ago</span>
</li>
<li>
<strong>Product Update</strong>
<p>Charlotte edited product details for <a href="#">Buck Rogers</a></p>
<span class="steps-time">6 hours ago</span>
</li>
</ol>Checklist
A simple feature/benefit list with a checkmark — a plain <ul> (or <ol>) with the .pd-features class. The checkmark is added automatically by CSS in front of every <li>, colored with --success — no icon markup needed, just write the text.
- Full n8n workflow, ready to import
- Retrieval layer pre-wired for your docs
- Free updates for 12 months
<!--[ Checklist ]-->
<ul class="pd-features">
<li>Full n8n workflow, ready to import</li>
<li>Retrieval layer pre-wired for your docs</li>
<li>Free updates for 12 months</li>
</ul>In-Feed Ad Slot
A placeholder block for an in-article ad unit — drop it between sections, not inside one.
<!--[ In-Feed Ad ]-->
<div class="infeed-ad">Ad goes here</div>Table of Contents
Drop this once near the top of an article. script.js scans .post-wrap for h2[id]/h3[id] and fills the .aToc div in automatically — you never hand-write the list.
Table of Contents
<!--[ Table of Contents ]-->
<details class="spoiler toc">
<summary>Table of Contents</summary>
<div class="aToc"></div>
</details>