DM Editorial Style Guide

What this page covers

A live preview of every supported formatting pattern and UI component, so you can see how each renders before writing it into a post. If a pattern isn’t documented here, it isn’t supported yet; ask before using it.

Text basics

Paragraphs and inline formatting

Body text is rendered at the theme’s default sizing. Use **bold** for emphasis and *italic* for titles and light emphasis. Inline code uses `monospace` and renders as monospace. Use inline links for navigation, with descriptive anchor text, never "click here."

Block quotes

Block quotes set off a longer or pull-quoted passage. Use them for direct quotes from sources or for setting off a thought worth dwelling on. Don’t overuse them; a paragraph that could stand on its own as body text shouldn’t be in a block quote.

Lists

Use unordered lists for items where order doesn’t matter:

• First item
• Second item
• Third item

Use ordered lists for sequential steps:

1. First step
2. Second step
3. Third step

Headings

Headings build the structure of the post. Use them hierarchically (don’t skip levels for visual effect).

H3: a third-level heading

This is what an H3 looks like inside post body content. Use H3 for subsections under an H2.

H4: a fourth-level heading

H4 is rare in blog posts; reserve for genuinely fine-grained subsections.

Code blocks

Fenced code blocks render as preformatted text:

# Apply the seeder locally before pushing
wp dm seed:posts content/posts/<slug>.md --dry-run
wp dm seed:posts content/posts/<slug>.md

function example() {
    return 'Drupal 11 uses Symfony 7';
}

Tables

Tables are appropriate for actual tabular data, not for layout. Keep them small enough to read on a phone.

FAQ accordion

Use HTML5 <details> / <summary> for FAQ sections. The summary becomes the clickable header; the answer expands below it.

Callouts

Use callouts to set aside a note, warning, success indicator, or tip. The HTML pattern is a <div> with the dm-callout class plus a variant class.

HTML pattern for callouts

<div class="dm-callout dm-callout-info">
  <strong>Heading.</strong> Body text. Keep it short.
</div>

Variants: dm-callout-info, dm-callout-warning, dm-callout-success, dm-callout-note.

What’s not documented yet

The following patterns are commonly useful but not yet styled. If you need one, ask before writing it into a post:

• Image with caption (figure + figcaption)
• Two-column layouts
• Video embeds with custom framing
• Pull quotes (distinct from block quotes)
• Author bio / byline styling
• Table of contents / on-page navigation

When a pattern gets added, it lands here first as a live demo, then in the editorial framework as canonical guidance.

Related references

The canonical rules behind these patterns live in the repo. Authors should be familiar with:

• docs/frameworks/CONTENT-OPTIMIZATION-FRAMEWORK.md §8.5: post-body style conventions (no em dashes, no closing CTAs, FAQ as accordion, no padding)
• docs/frameworks/CONTENT-OPTIMIZATION-FRAMEWORK.md §2: the 5-step editorial process
• docs/frameworks/CONTENT-OPTIMIZATION-FRAMEWORK.md §3: depth-vs-padding rubric
• docs/frameworks/CONTENT-OPTIMIZATION-FRAMEWORK.md §4: anachronism check

This page only shows the rendered patterns; the framework explains why they exist and when to use them.