Four CSS Classes That Make Peerless Blog Posts Easier to Read

Blog posts often need small layout adjustments: an image beside a paragraph, a caption underneath a photo, or a group of related links with consistent spacing. These kinds of changes do not need a custom module, a new stylesheet, or a developer.

Peerless includes four utility classes specifically for these situations: .left, .right, .caption, and .flex-col. They are available directly in the rich-text editor, giving content editors a simple way to control how individual pieces of content are presented.

Let text wrap around an image with .left or .right

By default, an image in a blog post sits within the normal flow of the content. If you want the text to sit alongside the image instead, use class="left" or class="right".

Open the rich-text editor's source-code view and add class="right" directly to the image:

Once the post is published, the surrounding copy automatically flows alongside the image rather than stacking underneath it.

.right moves the image toward the right side of the content, while .left moves it toward the left. Both utilities include a 15px gutter, keeping the surrounding text comfortably separated from the image.

Keep an image and caption together with .caption

Images often need a little context — a photo credit, a description, or a short note. The .caption utility gives that text a smaller, italicized treatment so it reads naturally as supporting information rather than part of the main article.

For a floated image with a caption, place the image and caption together in a flex-col wrapper and use left or right on that wrapper:

The flex-col class keeps the image and caption together as a vertical unit, while left controls where that unit sits within the article. The caption class then gives the supporting text its caption styling.

The rest of the article can continue normally around the floated image and its caption.

Build simple link groups with .flex-col

Not every piece of blog content needs to be a traditional list. Sometimes you simply want to present a few resources, downloads, or related articles as a clean vertical group.

Wrap the links in class="flex-col" to stack them into a column with consistent spacing:

This is useful for small groups of links where the goal is presentation rather than a formal ordered or unordered list.

Built into the theme — no deploy required

These utilities are already part of the Peerless theme's ITCSS utilities layer. That means you do not need to create a new module, edit a stylesheet, or deploy a change just to make a small adjustment to a blog post.

Simply add the appropriate class in the rich-text editor's source-code view, publish the post, and the styling is ready to use.

The result: common content-layout changes stay in the hands of the content editor, while the theme handles the underlying styling consistently across the site.