Broadsheet Pattern Guide

1. Article

The article pattern is for posts where the main experience is reading. It is the right choice for essays, reviews, reported features, criticism, and long-form commentary.

On wider screens, the article body flows into two columns. Headings become natural section breaks, and the renderer keeps each heading with its first paragraph so a subheading is not stranded at the bottom of a column.

Use it when

• The post is mostly prose.
• The article needs a serious editorial rhythm.
• You want headings to divide a long piece into readable sections.
• Images should sit inside the reading flow rather than become separate cards.

Minimal front matter

1
2
3
4
5
6
7
8
9
10

---
title: "A Long Review"
date: 2026-05-01 10:00:00
pattern: article
categories:
  - reviews
tags:
  - film
  - review
---

Body shape

1
2
3
4
5
6
7
8
9

Opening paragraph for the article.

## First Section

Several paragraphs of prose.

## Second Section

More prose, with optional images or blockquotes.

Move from freeform to article when the post gets long enough that headings and column flow would help. Move from article to simple when the post needs more manual layout control than continuous prose.

View example: Article on Two Wheels Over Four

2. Listicle

The listicle pattern is for posts built from repeated vertical entries. Each entry is a separated section, and the content inside it stays in the order you write it.

Use it like a list of freeform blocks: an entry can have a numbered title, an unnumbered title, metadata, images, code snippets, lists, or just paragraphs. The theme keeps each entry linear and does not force a special desktop layout.

Use it when

• The article is naturally divided into items.
• Each item needs its own heading and explanation.
• You want a ranking, guide, checklist, comparison, or ordered collection.
• You want each item to have freedom without becoming a masonry card layout.

Flexible entries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="pattern-guide">
  <section class="listicle-entry">
    <div>
      <h2>1. Numbered Entry</h2>
      <div class="listicle-meta">
        <span>Optional detail</span>
      </div>
      <p>Entry description goes here.</p>
      <figure class="listicle-poster">
        <img src="/images/example.jpg" alt="Example image">
      </figure>
      <p>More notes can follow the image.</p>
    </div>
  </section>

  <section class="listicle-entry">
    <div>
      <h2>Unnumbered Entry</h2>
      <p>This entry has no rank and no image.</p>
    </div>
  </section>
</div>

Move from article to listicle when headings have become independent entries. Move from listicle to roundup when the entries are short cards rather than full sections.

View example: Broadsheet Pattern Guide

3. Roundup

The roundup pattern is for collections where every item is compact and independent. It is less like an essay and more like a page of clipped notes, plates, recommendations, or short observations.

The main wrapper is roundup-grid, and each item uses roundup-card. The grid uses CSS columns, so cards stack in a masonry-like flow instead of lining up in strict rows.

Use it when

• Each item is short.
• Items may have uneven heights.
• The post is a gallery, archive, recommendation set, or collection.
• You do not need a long explanation for every item.

Minimal markup

1
2
3
4
5
6
7
8
9
10
11

<div class="roundup-grid">
  <section class="roundup-card">
    <h2>Card Title</h2>
    <p>Short card text.</p>
  </section>

  <section class="roundup-card">
    <img src="/images/example.jpg" alt="Example image">
    <h2>Image Card</h2>
  </section>
</div>

How it differs from listicle

A listicle entry is a complete section. A roundup card is a compact item. If each item needs several paragraphs, use listicle. If each item only needs a title, image, and short note, use roundup.

Move from simple to roundup when the post becomes a group of cards. Move from roundup to listicle when each card starts needing a full explanation.

View example: Insectes by Emile-Allain Seguy

4. Simple

The simple pattern is the middle ground. It keeps normal post flow, but gives you helper classes for side-by-side sections, reversed splits, wide blocks, and image placement.

Use it when a post is not long enough for the article pattern, but still needs more control than plain Markdown.

Use it when

• The post has mixed text and images.
• You want one or two side-by-side sections.
• The writing should stay simple and direct.
• You need layout helpers without committing to a full listicle or roundup.

Split section

1
2
3
4
5
6
7
8
9

<section class="simple-split">
  <div>
    <h2>Text Section</h2>
    <p>Paragraph content goes here.</p>
  </div>
  <figure>
    <img src="/images/example.jpg" alt="Example image">
  </figure>
</section>

Reverse split

1
2
3
4
5
6
7
8
9

<section class="simple-split reverse">
  <figure>
    <img src="/images/example.jpg" alt="Example image">
  </figure>
  <div>
    <h2>Second Section</h2>
    <p>More text.</p>
  </div>
</section>

Move from freeform to simple when plain Markdown starts needing layout helpers. Move from simple to article when the post becomes mainly long-form prose.

View example: Blog on New Music Movement

5. Freeform

The freeform pattern is the least opinionated option. It keeps the Broadsheet post frame, metadata, sidebar, and typography, but does not apply a specialized content structure.

It is also the fallback when no pattern is provided, which makes it the safest starting point for new posts.

Use it when

• The post is short.
• You want normal Markdown behavior.
• The post is documentation, a note, a changelog, or a placeholder.
• You are not sure yet which pattern the content needs.

Minimal post

1
2
3
4
5
6
7
8
9
10
11
12
13

---
title: "Weekend Notes"
date: 2026-05-01 10:00:00
pattern: freeform
tags:
  - notes
---

This is a normal Markdown post.

## A Section

More text here.

When to change it

Change freeform to simple if you need split sections. Change it to article if it becomes a long essay. Change it to listicle or roundup if the content becomes a collection of repeated items.

View example: Broadsheet Setup Guide