Editorial style guide

This page documents optional Markdown helpers included with the template. It is not linked from the main navigation by default.

Figures

Use the figure include for captioned, accessible images.

<figure class="media-figure media-figure--wide">
  
    <img
      src="/assets/images/example.jpg"
      alt="A concise image description"
      
      
      
      
      loading="lazy"
      decoding="async"
      
    >
  
  
    <figcaption>
      <span class="media-figure-caption">A short caption.
</span>
      
    </figcaption>
  
</figure>

Supported variant values:

• inline keeps the image inside the text column.
• wide lets the image break out to the configured image width.
• full uses the wider layout rail.
• left and right float small figures on wide screens and stack them on mobile.

Use decorative=true only when an image is purely decorative.

Callouts

<aside class="callout callout--note" role="note">
  
    <strong class="callout-title">Editor’s note</strong>
  
  
    <div class="callout-body"><p>This callout supports <strong>Markdown</strong>.</p>
</div>
  
</aside>

Built-in visual types include note, warning, update, and aside.

Pull quotes

<aside class="pullquote pullquote--wide" aria-label="Pull quote">
  <blockquote>
    <p>A sentence worth making unmissable.</p>
    <cite>Optional attribution</cite>
  </blockquote>
</aside>

Use pull quotes sparingly. They are intentionally large and editorial.

In-article index

  <nav class="article-index" aria-label="Article sections">
    <strong>In this piece</strong>
    <ol>
      
        
        
        
        
          <li><a href="#first-section">First section</a></li>
        
      
        
        
        
        
          <li><a href="#second-section">Second section</a></li>
        
      
    </ol>
  </nav>

The item format is a semicolon-separated list of Label|#anchor pairs.