Style guide

This sample style guide shows the full array of WYSIWYG elements you can use for long-form editorial content in your pages or articles. This is not an exhaustive list but shows most of the common elements you may need!

Use class="intro" for opening copy that should feel more prominent than a standard paragraph while still reading as page content.

Use class="small" for secondary notes that should remain readable but clearly step down from body copy.

Use class="citation" for source notes, compact credits, captions, or editorial asides.

Editorial Text

Editorial pages can mix strong importance, emphasis, removed language, highlighted terms, and inline code-style labels without breaking rhythm.

Use <mark> to call attention to a phrase, <del> or <s> for removed or no-longer-current text, and <code> for literal labels, filenames, settings, or short technical references.

Use class="callout" on a paragraph for short guidance, launch notes, buying context, or important policy information.

Heading Scale

Headings should create a clear outline. Reserve <h1> for the primary page title when the template does not already provide one, then use <h2> and <h3> to organize page sections.

Heading level one for trees

Heading level two for page sections

Heading level three for subsections

Heading level four for grouped details

Heading level five for compact labels
Heading level six for metadata

Inline Semantics

Use <kbd> for keyboard commands such as Ctrl + K, <abbr> for abbreviations like SEO, and <dfn> when introducing a term such as structured content.

Use <time> for dates like , <cite> for titles or sources like The Verdant Journal, <var> for variables like n, and <samp> for sample output such as Saved successfully.

Inline examples also include bold, italic, underline, strikethrough, subscript, superscript, and a product link.

Address

Use <address> for contact or location details, not for general postal-style formatting.

Flagship store
123 Example Avenue
New York, NY 10001
View locations

Lists

Lists should support scannable guidance while still allowing enough text to test wrapping, links, and inline formatting.

Unordered list with ordered steps

  • Compare products thoughtfully. Start with another featured tree, then review the details that matter most for the intended use.
  • Plan the buying path. A list item can include nested ordered steps:
    1. Confirm the size, material, or style requirements.
    2. Review supporting content, including FAQs and policy pages.
    3. Choose the option that best balances fit, finish, and availability.
  • Use concise phrasing, but include enough context that each item still makes sense when scanned quickly.

Ordered list with unordered notes

  1. Introduce the page purpose with a clear paragraph and a relevant link.
  2. Support the main point with useful details:
    • Highlight key terms sparingly.
    • Use <code> for literal labels or snippets.
    • Include bold or emphasized text only where it helps the reader.
  3. Close the section with a clear next thought, not a dead-end fragment.

Quotes and Callouts

Use block quotes for sourced language, testimonials, editorial excerpts, or statements that need visual separation from the surrounding prose.

The most useful product content answers practical questions while still giving the brand a distinct point of view.

Verdant editorial team

Use class="pullquote" when a quote should carry more visual emphasis than a standard block quote.

Merchandising note: Use class="callout" on a block container when the callout needs multiple sentences, links, or richer inline formatting around products like this featured tree.

Images

Use figures when an image needs a caption. The examples below use <figure class="embed image"> and <figcaption class="caption"> to show both bottom and top caption placement.

Example image for Style guide
Use class="caption" for descriptive caption text below an image.
A caption can also appear before the image when the context should come first.
Secondary image example for Style guide

Hosted Video

Use the standard <video> element for hosted MP4 content. Keep the markup plain unless the surrounding layout specifically requires additional structure.

YouTube Iframe

Use the standard YouTube iframe when a video should be embedded from YouTube.

Table

Tables should include useful headings and varied cell content so readers can compare details quickly.

Example tree comparison
Feature Standard option Featured option Notes
Primary link Product one Product two Links inside table cells should remain easy to identify and tap.
Editorial fit Short description with light emphasis. A longer description that wraps across lines and includes strong text for the most important phrase. Use varied cell length to confirm alignment and spacing.
Care detail Spot clean Professional care recommended Inline code can identify literal labels, care tags, or compact specs.
Availability Limited Available online and at the Flagship store. Table cells can include highlights, links, and sentence-length guidance.

Definition List

Use <dl> for term-and-description pairs, glossary entries, compact specs, or grouped metadata.

Intro paragraph
Use class="intro" to create a stronger opening paragraph.
Caption
Use class="caption" on figure captions that need consistent caption styling.
Pull quote
Use class="pullquote" when a quote should function as a stronger editorial moment.

Code Block

Use <pre> with <code> for longer examples where spacing and line breaks matter.

<section>
  <h2>Care notes for trees</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

Toggles

Use <details> and <summary> for optional content that should be available without overwhelming the main page.

Expandable content example

Details blocks are useful for dense policies, care information, sizing guidance, or optional editorial notes.

Rules and Task Lists

Use <hr> when a thematic break is clearer than another heading. Checkbox inputs can appear in task-style content when the page needs to show progress or checklist formatting.

  • Checked task item with important progress already complete.
  • Unchecked task item with supporting context still pending.

When each section has a clear purpose, long-form content remains easy to scan, useful to read, and consistent across the full Verdant experience.