---
title: Four CSS Classes That Make Peerless Blog Posts Easier to Read
description: Four utility classes already built into Peerless let you float images, caption them, and stack link lists, all from the rich-text editor.
image: https://fcpsolution.com/hubfs/peerless-h-new.jpg
---

[Skip to content](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts#main-content)

[![Peerless-h-3](https://fcpsolution.com/hs-fs/hubfs/Peerless-h-3.png?width=1024&height=274&name=Peerless-h-3.png "Peerless-h-3")](https://fcpsolution.com/)

- [Contact](https://fcpsolution.com/contact)
- [Careers](https://fcpsolution.com/careers)
- [Terms](https://fcpsolution.com/terms)
- [Privacy](https://fcpsolution.com/privacy)
- [User Agreement](https://fcpsolution.com/license)

This is a search field with an auto-suggest feature attached.

- There are no suggestions because the search field is empty.

- [Home](https://fcpsolution.com)
- [Team](https://fcpsolution.com/team)
- [About](https://fcpsolution.com/about)
- [Templates](https://fcpsolution.com/template)
- [Pricing](https://fcpsolution.com/pricing)
- [Blog](https://fcpsolution.com/blog)
- [Docs](https://fcpsolution.com/docs)

[Home](https://fcpsolution.com/template/home)

[About](https://fcpsolution.com/template/about)

[Contact](https://fcpsolution.com/template/contact)

[Meet the team](https://fcpsolution.com/team)

[Landing Page](https://fcpsolution.com/template/landing-page)

[Compare](https://fcpsolution.com/template/compare)

[Pricing](https://fcpsolution.com/template/pricing)

[Services](https://fcpsolution.com/template/services)

[Theme Rates](https://fcpsolution.com/pricing/theme-rates)

[Hourly Rates](https://fcpsolution.com/pricing/hourly-rates)

[Services](https://fcpsolution.com/services)

[Team](https://fcpsolution.com/team)

[Product Updates](https://fcpsolution.com/blog#product-updates)

- [What Makes Peerless Different](https://fcpsolution.com/blog/what-makes-peerless-different-from-other-hubspot-themes)
- [New Pricing Table](https://fcpsolution.com/blog/a-new-pricing-table-module-built-for-side-by-side-comparison)
- [Blog Feed Module v2](https://fcpsolution.com/blog/blog-feed-v2-tag-filtered-feeds-and-faster-cards)
- [A Cleaner Mobile Experience](https://fcpsolution.com/blog/a-cleaner-mobile-menu-hamburger-fixes-across-the-theme)

[Guides & Tutorials](https://fcpsolution.com/blog#guides-tutorials)

- [Take control of styling Peerless blog content](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts)
- [Core Web Vitals on Hubspot CMS](https://fcpsolution.com/blog/how-to-pass-core-web-vitals-on-hubspot-cms)
- [Getting Started With the Peerless Theme](https://fcpsolution.com/blog/getting-started-with-the-peerless-theme)
- [Making HubSpot pages fast!](https://fcpsolution.com/blog/making-hubspot-pages-fast-a-practical-checklist)

[Case Studies](https://fcpsolution.com/blog#case-studies)

- [From Drupal to Hubspot](https://fcpsolution.com/blog/from-drupal-to-hubspot-rebuilding-paloaltou-edu-with-peerless)

[Company News](https://fcpsolution.com/blog#company-news)

- [Our Story](https://fcpsolution.com/blog/the-story-behind-fcp-solutions-and-peerless)
- [A pleasant page editing experience with Peerless](https://fcpsolution.com/blog/why-peerless-modules-ship-with-zero-margins)
- [Peerless Documentation](https://fcpsolution.com/blog/the-peerless-documentation-hub-is-live)

[Marketing Tips](https://fcpsolution.com/blog#marketing-tips)

- [The anatomy of a high-converting CTA](https://fcpsolution.com/blog/the-anatomy-of-a-high-converting-cta)
- [Why your blog needs tag-based catergories](https://fcpsolution.com/blog/why-your-hubspot-blog-needs-tag-based-categories)
- [Blog catergories into topics that rank](https://fcpsolution.com/blog/turn-your-blog-categories-into-topic-hubs-that-rank)

[User Documentation](https://fcpsolution.com/docs)

[QA](https://fcpsolution.com/docs/qa-test)

[All Modules](https://fcpsolution.com/all-modules)

[Styling Blogs](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts)

[Privacy](https://fcpsolution.com/privacy)

[Home](https://fcpsolution.com/) › [Blog](https://fcpsolution.com/blog) › Four CSS Classes That Make Peerless Blog Posts Easier to Read

[Design](https://fcpsolution.com/blog/tag/design)

 Jul 20, 2026

# Four CSS Classes That Make Peerless Blog Posts Easier to Read

![Kayron Macon](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) 

[Kayron Macon](https://fcpsolution.com/blog/author/kayron-macon)

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:

![social-square](https://fcpsolution.com/hs-fs/hubfs/social-square.png?width=300&height=300&name=social-square.png)

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:

![avatar-head--purple](https://fcpsolution.com/hs-fs/hubfs/avatar-head--purple.png?width=200&height=200&name=avatar-head--purple.png)

A short description or photo credit goes here.

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:

Resource one Resource two Resource three

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](https://fcpsolution.com/blog/itcss-a-css-architecture-that-scales). 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.

[Design](https://fcpsolution.com/blog/tag/design), [HubSpot CMS](https://fcpsolution.com/blog/tag/hubspot-cms), [Guides & Tutorials](https://fcpsolution.com/blog/tag/guides-tutorials)

## About the Author

Founder, Developer, Marketer of Sports Page.

## Comments

 Share this Page [![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/linkedin-in.svg)](https://www.linkedin.com/sharing/share-offsite/?url=https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts) [![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/x-twitter.svg)](https://twitter.com/share?url=https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts&text=Four%20CSS%20Classes%20That%20Make%20Peerless%20Blog%20Posts%20Easier%20to%20Read%20-%20Four%20utility%20classes%20already%20built%20into%20Peerless%20let%20you%20float%20images,%20caption%20them,%20and%20stack%20link%20lists,%20all%20from%20the%20rich-text%20editor.) [![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/facebook-f.svg)](https://www.facebook.com/sharer/sharer.php?u=https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts%2F&title=Four%20CSS%20Classes%20That%20Make%20Peerless%20Blog%20Posts%20Easier%20to%20Read&picture=&description=Four%20utility%20classes%20already%20built%20into%20Peerless%20let%20you%20float%20images,%20caption%20them,%20and%20stack%20link%20lists,%20all%20from%20the%20rich-text%20editor.) ![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/copy.svg)

Link copied!

Print this page ![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/print.svg)

## Related Posts

### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 20, 2026 Four CSS Classes That Make Peerless Blog Posts Easier to Read Four utility classes already built into Peerless let you float images, caption them, and stack link lists, all from the… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts)

### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 What Makes Peerless Different From Other HubSpot Themes The specific architecture decisions -- no build step, zero-margin modules, ITCSS layering -- that separate Peerless… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/what-makes-peerless-different-from-other-hubspot-themes)

### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 The Story Behind FCP Solutions and Peerless Why FCP Solutions builds Peerless as its own base theme, and how the same theme now powers more than one production… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/the-story-behind-fcp-solutions-and-peerless)

### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 How to Pass Core Web Vitals on HubSpot CMS A practical checklist for hitting good Core Web Vitals scores on HubSpot CMS -- images, fonts, third-party scripts, and… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/how-to-pass-core-web-vitals-on-hubspot-cms)

### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 The Anatomy of a High-Converting CTA What separates a call-to-action that converts from one that gets scrolled past -- copy, contrast, and placement, broken… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/the-anatomy-of-a-high-converting-cta)

### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 8, 2026 Powering a Sports Portfolio: BuildingSportsPage on Peerless How we built sportspage.io as a child theme of Peerless: ten custom modules, everything else inherited, and one repo… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/powering-a-sports-portfolio-building-sportspage-io-on-peerless)

[![p-trail-2](https://fcpsolution.com/hs-fs/hubfs/p-trail-2.png?width=250&height=249&name=p-trail-2.png "p-trail-2")](https://fcpsolution.com/)

### Contact Us

Primary Phone: [+1(860) 478-2023](tel:+18604782023)

[WhatsApp](https://wa.me/18604782023)

Email: [info@fcpsolution.com](mailto:info@fcpsolution.com)

### Company

- [Home](https://fcpsolution.com/)
- [About](https://fcpsolution.com/about)
- [Team](https://fcpsolution.com/team)
- [Pricing](https://fcpsolution.com/pricing)
- [Contact](https://fcpsolution.com/contact)

### Explore

- [Services](https://fcpsolution.com/services)
- [Pricing](https://fcpsolution.com/pricing)
- [Blog](https://fcpsolution.com/blog)
- [Docs](https://fcpsolution.com/docs)
- [Contact](https://fcpsolution.com/contact)

Peerless is a HubSpot CMS theme built for clean design, fast deployment, and flexible content management. Crafted with semantic HTML, ITCSS, and HubSpot's drag-and-drop framework — no build step required.

[Follow us on LinkedIn](https://www.linkedin.com) [Follow us on Instagram](https://www.instagram.com/peerless_hubspot)

© For Client Peerless Solutions

[Privacy Policy](https://fcpsolution.com/privacy)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Kayron Macon",
    "url" : "https://fcpsolution.com/blog/author/kayron-macon"
  },
  "dateModified" : "2026-10-02T19:24:52.654Z",
  "datePublished" : "2026-07-20T04:00:00.000Z",
  "headline" : "Four CSS Classes That Make Peerless Blog Posts Easier to Read",
  "mainEntityOfPage" : {
    "@id" : "https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://fcpsolution.com/hubfs/Peerless-h.jpg"
    }
  }
}
```