Wire Components and Shortcodes

On this page

• Stats
• Cards
• Split
• Before Wire
• After Wire
• Banner
• CTA Buttons
• Badges
• Tabs
• FAQ
• Testimonials
• Logo Cloud
• Pricing Table
• Steps
• Alerts
• Horizontal Rules
• Section Bands
• YouTube Embeds
• AI-Generated Images
• Dimension Presets
• Configuration
• Generating Images
• Writing Good Slugs
• Forms
• Form Submission
• Lead Intelligence
• Footer
• Theme Customization
• Page Layouts
• Landing pages
• Raw pages
• Custom CSS and JS
• Migrating from MkDocs
• Automatic Features
• Table of Contents
• Reading Progress Bar
• Back to Top
• Code Copy Button
• External Link Indicator
• Smooth Scrolling
• Scroll Title

Wire ships layout components as markdown shortcodes. They render to styled HTML using Wire's built-in CSS and respect your theme colors automatically.

For the design rationale behind each component (border radius, hover states, color choices), see the Design System reference.

Stats

Display exactly 4 key metrics in a row. Each line: value | label. Desktop renders 4 across, mobile renders 2+2. The build linter (RULE-63) enforces exactly 4 items: other counts create orphan rows on mobile.

:::stats
300+ | Vendors Compared
24 | Capability Categories
715 | Side-by-Side Comparisons
108 | Expert Guides
:::

Cards

Grid of cards, split by ### headings. Include a link to make the whole card clickable. Max 3 cards per block: the grid renders 3 columns on desktop, so a 4th card creates an orphan row. The build linter (RULE-62) enforces this. Use multiple :::cards blocks or :::split for additional content.

:::cards
### OCR and Data Capture
Compare vendors specializing in optical character recognition and document data extraction.
[Browse OCR vendors](/guides/components/)

### AI and ML Platforms
Full-stack intelligent document processing with machine learning pipelines.
[Browse AI platforms](/guides/components/)

### Cloud Solutions
Managed IDP services with API-first architecture and pay-per-page pricing.
[Browse cloud vendors](/guides/components/)
:::

Split

Two columns separated by ---. Markdown works inside both columns.

:::split
### Before Wire

- Raw HTML divs in every markdown file
- Custom CSS per client
- Different class names for the same component
- MkDocs extensions as hard dependency

---

### After Wire

- Clean shortcode syntax
- Built-in styled components
- Same syntax across all sites
- Zero dependencies on MkDocs
:::

Banner

Big number callout. The value goes after :::banner, the explanation is the body. The value must be 6 characters or fewer. Longer values break the layout, and the build will refuse.

:::banner 223%
Companies using structured content strategies see 223% higher ROI on their marketing spend.
:::

CTA Buttons

Button group from markdown links. Add {primary} for the primary action.

:::cta
[Get Started](/guides/getting-started/){primary}
[View Pricing](/guides/pricing-comparison/)
:::

Badges

Inline tag list for capabilities, features, or certifications. Pipe-separated.

:::badges
On-Premise | Kubernetes | OCR | ISO 27.001 | API | RAG
:::

Badges use your theme's primary color and wrap naturally on narrow screens.

Tabs

Tabbed content panels. Split by ### headings; first tab is active by default.

:::tabs
### Banking & Finance
Automated invoice processing, compliance document handling, and financial statement analysis.

### Healthcare
Patient record digitization, claims processing, and medical document classification.

### Insurance
Policy document extraction, damage assessment automation, and underwriting workflows.
:::

FAQ

Collapsible accordion using native <details>. Split by ### headings; question as summary, answer as body.

:::faq
### How does Wire handle SEO?
Wire audits your content against Google Search Console data, detects keyword cannibalization, and rewrites titles and descriptions automatically.

### Can I use my own templates?
Yes. Place template files in your templates/ directory and Wire will use them instead of the defaults.

### What about existing MkDocs sites?
Wire detects MkDocs extension syntax and refuses to build until you migrate to Wire shortcodes. The build error tells you exactly what to replace.
:::

Testimonials

Customer quotes with attribution.

:::testimonial
Wire replaced our entire MkDocs workflow. We went from spending 2 hours per page on SEO to 6 cents.
— Content Team Lead
:::

Wire replaced our entire MkDocs workflow. We went from spending 2 hours per page on SEO to 6 cents.

Content Team Lead

Logo Cloud

Display partner or client logos in a centered row. Logos appear greyscale and colorize on hover.

:::logos
![Partner A](/assets/img/logo-a.png)
![Partner B](/assets/img/logo-b.png)
:::

Pricing Table

Side-by-side pricing plans. Mark the featured plan with {primary}.

:::pricing
### Starter
$29/mo
For small teams getting started.
- 10 pages
- Basic SEO
- Email support
[Get started](/signup/)

### Pro
$99/mo
For growing content operations.
- 100 pages
- Full SEO suite
- Priority support
[Start free trial](/signup/){primary}

### Enterprise
Custom
For large-scale deployments.
- Unlimited pages
- Dedicated support
[Contact sales](/contact/)
:::

Steps

Horizontal numbered steps for workflows or processes. Split by ### headings (3-4 steps max).

:::steps
### Create
Write content from search gaps and client questions.

### Optimize
Reword titles and headings to match real search queries.

### Publish
Build to static HTML with 46-rule linting.
:::

Alerts

Callout boxes for info, success, warning, or error messages. Level goes after :::alert (default: info).

:::alert info
Info — default informational callout.
:::

:::alert success
Success — operation completed.
:::

:::alert warning
Warning — proceed with caution.
:::

:::alert error
Error — something went wrong.
:::

Horizontal Rules

Standard markdown --- renders a clean divider:

Content above.

---

Content below.

Content above the divider.

---

Content below the divider.

Section Bands

Wrap content in colored full-width bands. Options: dark, light, accent (default: light).

:::section dark
## Dark Section
Content on a dark background.
:::

On landing pages (layout: landing), use --- (horizontal rules) instead. Wire automatically creates alternating section bands with a hero at the top and an accent CTA at the bottom.

YouTube Embeds

Privacy-safe video embeds. No YouTube tracking loads until the user clicks play.

!yt[dQw4w9WgXcQ]

Wire downloads the thumbnail locally during build (stored in assets/yt/) so no request goes to YouTube until the visitor clicks play. This makes embeds GDPR-compliant by default.

Do not use raw iframes. The build linter (RULE-51) will reject <iframe src="youtube.com/...">. Use the !yt[] shortcode instead.

AI-Generated Images

Insert images generated by BFL (FLUX) using a descriptive slug. Images are generated once via the CLI and stored as normal project files.

!makeIMG[invoice-processing-pipeline]
!makeIMG[vendor-comparison-table]{wide}
!makeIMG[app-icon]{square}

The slug is both the prompt (hyphens become spaces) and the filename (docs/assets/images/{slug}.png).

Dimension Presets

Configuration

Required in wire.yml. Using !makeIMG without this is a build error:

extra:
  wire:
    image_style: "Clean, modern flat illustration. Color palette: #6200ea primary, #ffc107 accent. White background, minimal detail, professional tone."

The style prompt is prepended to every slug so all images on your site share a consistent visual identity. Optional settings:

    image_model: flux-pro-1.1           # default
    image_sizes:                         # override dimensions
      default: [1024, 576]
      wide: [1440, 480]
      square: [512, 512]

Required in .env: BFL_API_KEY (get yours at api.bfl.ai).

Generating Images

python -m wire.chief images              # Generate missing images
python -m wire.chief images --dry-run    # Show what's missing + cost estimate
python -m wire.chief images --force      # Regenerate all
python -m wire.chief images --prune      # Remove orphan images

Missing images at build time are a build error. Wire refuses to build until you run wire.chief images.

Writing Good Slugs

Forms

Wire styles all standard form elements out of the box. Write plain HTML forms in your markdown, no custom CSS classes needed.

<form>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="Your name">
  <label for="email">Email</label>
  <input type="email" id="email" placeholder="you@company.com">
  <label for="topic">Topic</label>
  <select id="topic">
    <option value="">Select a topic</option>
    <option value="seo">SEO</option>
    <option value="content">Content Strategy</option>
    <option value="other">Other</option>
  </select>
  <label for="message">Message</label>
  <textarea id="message" rows="4" placeholder="How can we help?"></textarea>
  <label><input type="checkbox" name="consent"> I agree to be contacted</label>
  <button type="submit">Send Message</button>
</form>

Name Email Topic Select a topic SEO Content Strategy Other Message I agree to be contacted Send Message

Wire styles inputs, textareas, selects, checkboxes, and submit buttons using your theme colors.

Form Submission

Wire handles form submission automatically via Formspark. Add three values to wire.yml and every <form> on your site just works, no JavaScript in your markdown:

extra:
  wire:
    form_id: "your-formspark-id"
    form_botpoison: "pk_your-botpoison-public-key"
    form_success: "Thank you! We'll be in touch within 48 hours."

Wire automatically adds:

• Honeypot field (_gotcha): hidden spam trap that bots fill
• Page source (_source): tracks which URL the form was submitted from
• Bot verification (_botpoison): if key is configured, loads Botpoison and attaches solution token
• Visited pages (_visited_pages): the visitor's browsing journey before submitting

Lead Intelligence

Wire tracks which pages the visitor browses on every page (stored in localStorage, never sent to a server until form submit). When the visitor submits any form, the full journey is attached as a hidden _visited_pages field:

1. [14:32] /
2. [14:33] /capabilities/seo-automation/
3. [14:35] /guides/pricing-comparison/
4. [14:36] /kontakt/

This tells you what the lead was researching before contacting you. No analytics tool needed, no cookies, no GDPR consent required (localStorage is not persistent and never leaves the browser until form submit).

Page tracking runs on ALL pages, even without form_id. This means the journey is recorded from the visitor's first page, not just from when they reach the form. Custom forms with their own action= attribute also receive the _visited_pages hidden field automatically, with no configuration needed.

RULE-66 warns if a page has a <form> without an action= attribute and no form_id configured. This catches dead forms that render but cannot submit.

Footer

Configure the site footer in wire.yml. No footer config = minimal copyright line.

footer:
  tagline: "Your company tagline."
  email: info@example.com
  phone: +49 123 456 789
  links:
    Expertise:
      - SEO: /seo/
      - Content: /content/
    Company:
      - Team: /team/
      - Contact: /contact/
  copyright: "© Your Company — Location"
  legal:
    - Impressum: /impressum/
    - Datenschutz: /datenschutz/

The linter (RULE-32) enforces that every site has Impressum and Datenschutz links, as required by EU/German law.

Theme Customization

All components use Wire's CSS variables. Customize colors in wire.yml:

theme:
  primary_color: "#6200ea"   # Stats values, buttons, card hover, banner background
  accent_color: "#ffc107"    # Callouts, code highlights
  text_color: "#333"         # Body text, card descriptions
  font_family: "Inter"       # All text including component labels

Wire handles dark mode automatically. Primary and accent colors are lightened via color-mix() so they stay readable on dark backgrounds.

Page Layouts

Wire ships three page layouts. Set the layout in your frontmatter:

Landing pages

---
title: My Landing Page
description: Marketing page with full-width sections.
layout: landing
---

Content in landing pages auto-centers at 960px. Add class="full-width" to any HTML element to break out to 100% viewport width, or class="wide" for 1200px.

Raw pages

---
title: Slide Editor
description: Interactive presentation editor.
layout: raw
extra_css:
  - /assets/css/slides.css
extra_js:
  - /assets/js/slides.js
---

Raw pages render your markdown/HTML directly into <main> with no <article> wrapper, no sidebar, and no content width constraints. You own the entire page body.

Custom CSS and JS

Any page can load additional assets via frontmatter. Works with all layouts:

extra_css:
  - /assets/css/custom.css
  - https://cdn.example.com/lib.css
extra_js:
  - /assets/js/custom.js

CSS files load in <head> after wire.css. JS files load with defer at the end of <body>.

Migrating from MkDocs

Wire refuses to build files containing MkDocs extension syntax. Replace these patterns:

Automatic Features

These features are enabled on every Wire site with zero configuration.

Table of Contents

Pages with 3+ headings get an inline TOC below the page title. Uses h2 and h3 headings. Collapsible via click. Not shown on landing pages.

Reading Progress Bar

A thin accent-colored bar at the top of the viewport shows how far the reader has scrolled. Visible on all pages.

Back to Top

A circular button appears in the bottom-right corner after scrolling 400px. Smoothly scrolls back to the top of the page.

Code Copy Button

A "Copy" button appears on hover over any code block. One click copies the code to the clipboard. Shows "Copied!" confirmation for 2 seconds.

External Link Indicator

External links (opening in a new tab) get a small ↗ arrow to signal they leave the site.

Smooth Scrolling

All anchor links scroll smoothly. Heading anchors account for the sticky header height so content isn't hidden behind it.

Scroll Title

When the reader scrolls past the page H1, the article title appears next to the site logo in the header bar. Fades out when scrolling back up.