Four CSS Classes That Make Peerless Blog Posts Easier to Read

Most blog-post styling problems do not need a module change or a new stylesheet. Peerless already ships four utility classes made for the rich-text editor: .left, .right, .caption, and .flex-col.

Float an image with .left / .right

Apply .left or .right directly to an <img> from the rich-text editor's source-code view, and paragraph copy wraps around it instead of stacking above or below it.

<img src="your-image.jpg" alt="Description" class="right">
<p>Copy wraps around the floated image automatically.</p>

.right floats toward the right margin, .left toward the left. Both clear a 15px gutter so text does not crowd the image.

Caption it with .caption

Pair a floated image with a caption paragraph directly underneath it, styled smaller and italic:

<img src="your-image.jpg" alt="Description" class="left">
<p class="caption">A short description or photo credit goes here.</p>

Stack a list of links with .flex-col

When a post needs a short vertical list of links, such as resources, downloads, or related reading, wrap them in a <div class="flex-col"> instead of a bare list. It lays the links out in a column with consistent spacing between them:

<div class="flex-col">
  <a href="/first-link">First resource</a>
  <a href="/second-link">Second resource</a>
</div>

No deploy required

All four classes ship with the theme's ITCSS utilities layer, so none of this needs a module, a stylesheet edit, or a deploy. Drop the markup into the rich-text source view and the styling is live the moment the post publishes.