stnd.buildSTANDARD MANUAL2026-09-20

Press Typography — Syntax Guide

On this page

title: Press Typography — Syntax Guide
publish: true
visibility: public
created: 2026-07-29T19:39:12.643Z
modified: 2026-09-18T20:07:51.372Z
tags:

  • manual
  • typography
    type: reference
    permalink: press-typography-syntax-guide

Press Typography — Syntax Guide

The ::syntax system provides simple, readable notation for designing complex layouts directly in your Markdown files. Inspired by Obsidian’s callout syntax and MDX component patterns, it bridges plain text and advanced HTML structures.

Philosophy

“Markup should be readable by humans, not just machines.” — Tim Berners-Lee

The ::syntax system rests on three principles:

  1. Minimal — Change as few lines as possible to get rich layouts.
  2. Readable — Patterns are self-documenting and intuitive.
  3. Composable — Structures can be nested and combined naturally.

Pattern Types

1. Smart Paragraphs

Single-line directives that automatically apply to the following paragraph (no need for ::end).

<div class="hero">

This paragraph will display with hero-sized typography (very large).

Available:

2. Inline Directives

Short directives applying on a single line with immediate content.

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

Available:

3. Complex Blocks

Multi-line containers delimited by an opening directive and a ::end line. Ideal 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 very useful tip that can span multiple lines.
You can use **Markdown** inside.

</div>
</div>

Built-in Blocks

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">

Expandable callout open by default (+ 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">

Expandable callout closed by default (- indicator).

</div>
</details>

Supported Callout Types:

Layout Blocks (Grids and Columns)

Use --- separators on their own line to divide block content into multiple columns or cells.

Equal Columns (::columns)

<div class="columns-2">
<div class="column">

Content of the left column.

</div>
<div class="column">

Content of the right column.

</div>
</div>

Card Grid (::cards)

<div class="grid-3">
<div class="sm:row card">

### Card 1
Description of the first card.

</div>
<div class="sm:row card">

### Card 2
Description of the second card.

</div>
<div class="sm:row card">

### Card 3
Description of the third card.

</div>
</div>

Generic Grid (::grid)

<div class="grid-3">
<div class="sm:row">

First grid element.

</div>
<div class="sm:row">

Second grid element.

</div>
<div class="sm:row">

Third grid element.

</div>
</div>

Asymmetric Layout (::split)

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

Main content (takes 8/12 of the width).

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

Sidebar (takes 4/12 of the width).

</div>
</div>


<div class="gallery grid gap-4">
  <div class="col-12 md:col-6">
    <img src="https://images.unsplash.com/photo-1" alt="">
  </div>
  <div class="col-12 md:col-6">
    <img src="https://images.unsplash.com/photo-2" alt="">
  </div>
</div>

Clickable Buttons

<a href="https://standard.garden" class="button button-primary">Visit the site</a>

Form Preview

<div stnd-preserve="1"></div>

Technical Integration