Rich Text Styling
Rich Text blocks are one of Webflow's most powerful features for CMS content. They let content editors add headings, paragraphs, images, lists, and more — but they need proper styling to look good.
The Challenge
When you add a Rich Text element in Webflow, the nested elements (headings, lists, images) inherit basic browser styles. Without custom styling, your blog posts and articles will look generic.
What You'll Build
A styled article layout with a Rich Text block containing:
- Multiple heading levels
- Body paragraphs
- At least one list
- A constrained reading width
Instructions
1. Create Your Article Layout
Build a section for your article with:
- A section wrapper (
section_articleor similar) - A container with a max-width of 680–750px for readability
- A Rich Text block inside
2. Add Content
In your Rich Text block, add:
- An H2 heading (article title or section title)
- 2–3 paragraphs of text
- An H3 subheading
- A bulleted or numbered list
- Optionally: a blockquote, image, or code block
3. Style the Rich Text Internals
In Webflow, select the Rich Text block, then click into nested elements to style them:
Headings inside Rich Text:
- H2: 28–32px, bold, margin-top 2rem, margin-bottom 0.75rem
- H3: 22–26px, semi-bold, margin-top 1.5rem, margin-bottom 0.5rem
Paragraphs:
- 16–18px, line-height 1.6–1.75
- Margin-bottom 1rem
- Color slightly muted (not pure black — try #333 or #374151)
Lists:
- Padding-left for indentation
- Consistent spacing between items
- Proper bullet/number styling
Blockquotes (if used):
- Left border (3–4px solid)
- Padding-left 1.5rem
- Italic or slightly different color
4. Set Reading Width
The most readable line length is 50–75 characters (roughly 600–750px). Set a max-width on your content container.
5. Publish and Submit
Publish and paste your URL below.
Tips
- In Webflow, you style Rich Text children by selecting the Rich Text element first, then clicking the nested element
- Use Webflow's "All H2 in Rich Text" selector to style all H2s inside Rich Text blocks globally
- Test with real content — Lorem Ipsum doesn't reveal spacing issues the way real text does
- Don't forget mobile! Reduce heading sizes and adjust margins at smaller breakpoints