Content Style Guide
Write markdown first — images and callouts use pure markdown syntax. Everything else uses a short HTML snippet. All features work in posts, events, pages, and site snippets.
Contents
Images markdown
Add a #modifier to the image URL in standard markdown. No HTML needed.
Float image left; text wraps right. Max 45% width.
Paragraph text wraps to the right automatically.Text flows to the right of the image, wrapping naturally as you write more content.
Float image right; text wraps left. Max 45% width.
Paragraph text wraps to the left automatically.Text flows to the left of the image, wrapping naturally as you write more content.
Center the image; no text wrapping.
Stretch image to full content width.
Combine position and size with a hyphen. small = max 140 px, medium = max 300 px.
Text flows to the left of the small image.
<div class="clearfix"></div> on its own line to stop text wrapping before the next section.
Callout Boxes markdown
Use the standard blockquote > character. Add a tag for colour variants.
Default info callout. Blue accent.
> Meeting location has changed — see details below.Warning callout. Gold accent. Tag is stripped from output.
> [warn] Registration closes Friday at noon.Alert callout. Red accent. Tag is stripped from output.
> [alert] Tonight's event has been cancelled.<div class="callout">, <div class="callout-warning">, or <div class="callout-alert"> if you need multiple paragraphs inside a callout.
Text Styles html
Larger intro paragraph, muted gray. Use at the top of a post.
<p class="lead">Intro paragraph that stands out from body text.</p>This introductory paragraph draws the reader in before the main content begins.
Apply to any block element — paragraphs, headings, divs.
<p class="align-center">Centred text</p>
<h3 class="align-right">Right-aligned heading</h3>← Left aligned
Centered
Right aligned →
Pull Quotes & Highlights html
Visually highlights a key quote. Gold left border, serif font.
<p class="pull-quote">"Strong towns are built one small decision at a time."</p>"Strong towns are built one small decision at a time."
Inline yellow highlight for a word or phrase.
The meeting is <span class="highlight">this Thursday</span> at 7 pm.The meeting is this Thursday at 7 pm.
Small italic caption. Use below images.
<span class="caption">Community garden opening day, May 2026</span>Button Links html
Wrap a standard <a> tag with these classes to style links as buttons.
Gold primary button.
<a href="/pages/get-involved/" class="btn">Get Involved →</a>Outlined secondary button. Combine with .btn.
<a href="/events/" class="btn btn-secondary">See Events</a>Putting It All Together
A realistic post excerpt mixing markdown and the occasional HTML snippet.
<p class="lead">The Richmond Hill Community Garden is back for its third season, welcoming new and returning volunteers.</p>
Beds are available from **May through October**. Last year over 40 families participated.
<span class="caption">Volunteers at the spring planting day, 2025</span>
<div class="clearfix"></div>
> [warn] Sign-up closes **May 25**. Spots are limited — register early.
<p class="pull-quote">"The garden has become the heart of our neighbourhood."</p>
<a href="/pages/get-involved/" class="btn">Register Now →</a>
<a href="/events/" class="btn btn-secondary">See Events</a><div> or <p>). Inline HTML inside running text works fine.
Social / External Icons html
Use
<img>tags with these classes to embed icons inline.In-content icon. Full colour, 24×24 px.
Footer icon — inverted to white, 18×18 px.