<div class=“hero”>

This paragraph will be rendered with hero styling (larger text).

Renders as:

<p class="hero">
  This paragraph will be rendered with hero styling (larger text).
</p>

Available Smart Patterns:

• ::hero — Hero-sized paragraph (extra large)
• ::feature — Feature-sized paragraph (large)

2. Inline Patterns

Single-line directives with immediate content.

<aside class=“note”>This is an important reminder for later.</aside>

Renders as:

<aside class="note">This is an important reminder for later.</aside>

Available Inline Patterns:

• ::note — Inline note with aside styling
• ::alert — General alert box
• ::warning — Warning alert
• ::error — Error alert
• ::success — Success alert
• ::muted — Muted text paragraph
• ::subtle — Subtle text paragraph
• ::space small|medium|large|xlarge — Vertical spacing

3. Block Patterns

Multi-line containers with ::end delimiter. Perfect for complex layouts.

<div class=“callout” data-callout=“tip”>
<div class=“callout-title”>
<span class=“callout-icon”>💡</span>
<span class=“callout-title-inner”>Tip</span>
</div>
<div class=“callout-content”>

This is a helpful tip that can span multiple lines.
You can include **markdown** inside!

</div>
</div>

Renders as:

<div class="callout" data-callout="tip">
  <div class="callout-title">
    <span class="callout-icon">💡</span>
    <span class="callout-title-inner">Tip</span>
  </div>
  <div class="callout-content">
    <p>
      This is a helpful tip that can span multiple lines. You can include
      <strong>markdown</strong> inside!
    </p>
  </div>
</div>

Built-in Block Patterns

Callouts (Obsidian-style)

<div class=“callout” data-callout=“note”>
<div class=“callout-title”>
<span class=“callout-icon”>📝</span>
<span class=“callout-title-inner”>Note</span>
</div>
<div class=“callout-content”>

Standard callout with note styling

</div>
</div>


<details class=“callout” data-callout=“tip” open>
<summary class=“callout-title”>
<span class=“callout-icon”>💡</span>
<span class=“callout-title-inner”>Tip</span>
</summary>
<div class=“callout-content”>

Collapsible callout that starts open (+ indicator)

</div>
</details>


<details class=“callout” data-callout=“warning”>
<summary class=“callout-title”>
<span class=“callout-icon”>⚠️</span>
<span class=“callout-title-inner”>Warning</span>
</summary>
<div class=“callout-content”>

Collapsible callout that starts closed (- indicator)

</div>
</details>

Callout Types:

• note (📝) — General notes
• tip (💡) — Helpful tips
• info (ℹ️) — Informational
• warning (⚠️) — Warning messages
• danger (⚡) — Danger/critical
• success (✅) — Success messages
• question (❓) — Questions
• quote (💬) — Quotations
• abstract (📋) — Abstract/summary
• bug (🐛) — Bug reports
• example (📄) — Examples
• failure (❌) — Failures
• todo (☑️) — Todo items

Layout Containers

::hero center

# Welcome to Standard Garden

Beautiful typography meets Swiss grid systems.
::end

<div class=“container-small”>

This content will be contained in a small-width container.
Perfect for focused reading.

</div>


<div class=“container-accent”>

This content will be highlighted with accent styling.

</div>


<div class=“container-feature”>

This content will be displayed in a feature-sized container.

</div>


<div class=“center”>

This content will be centered on the page.

</div>

Grid Layouts

Columns (with separator)

<div class=“columns-2”>
<div class=“column”>

Left column content with **markdown** support.

</div>
<div class=“column”>

Right column content with images and links.

</div>
</div>

Split (asymmetric columns)

<div class=“grid”>
<div class=“sm:row col-8”>

Main content area (8/12 width).

</div>
<div class=“sm:row col-4”>

Sidebar content (4/12 width).

</div>
</div>

Cards Grid

<div class=“grid-1”>
<div class=“sm:row card”>

## Card One

## Content for the first card.

## Card Two

## Content for the second card.

## Card Three

Content for the third card.

</div>
</div>

The grid automatically detects the number of cards and distributes them evenly.

Generic Grid

<div class=“grid-2”>
<div class=“sm:row”>

Item 1 content

</div>
<div class=“sm:row”>

## Item 2 content

Item 3 content

</div>
</div>

Auto-detects item count and creates responsive grid.

Media Patterns

Image with Caption

<figure class=“image-wide”>
  <img src=“/path/to/image.jpg” alt=“This is the image caption that appears below.“>
  <figcaption>This is the image caption that appears below.</figcaption>
</figure>

Gallery

<div class=“gallery grid gap-4”>
  <div class=“col-12 md:col-6”>
    <img src=“/images/photo1.jpg” alt=“”>
  </div>
  <div class=“col-12 md:col-6”>
    <img src=“## /images/photo2.jpg

/images/photo3.jpg” alt=“”>
  </div>
</div>

Interactive Patterns

Button

<a href=“/destination-url” class=“button button-primary”>Click Me</a>

Form

<form class=“form form-contact” method=“POST” action=“/api/contact”>
  <div class=“form-field”>
    <label for=“name”>Name</label>
    <input type=“text” id=“name” name=“name” required>
  </div>
  <div class=“form-field”>
    <label for=“email”>Email</label>
    <input type=“email” id=“email” name=“email” required>
  </div>
  <div class=“form-field”>
    <label for=“message”>Message</label>
    <textarea id=“message” name=“message” required></textarea>
  </div>
  <button type=“submit” class=“button button-primary”>Send</button>
</form>

Creates a form with the specified fields. Automatically detects field types:

• Email fields → type=“email”
• Message fields → <textarea>
• Others → type=“text”

Usage in Standard Garden

The ::syntax system runs in the pre-processing stage, before markdown-it parses the content. This means:

1. ✅ Patterns are transformed to HTML first
2. ✅ Markdown inside patterns is processed normally
3. ✅ Patterns can be nested (with care)
4. ✅ Content remains portable (patterns are just directives)

Detection Logic

The system only activates when it detects :: at the start of a line:

This won't trigger: ::hero (not at line start)

<div class=“hero”>

This will trigger (at line start)