Rich Text Formatting Guide

How to format content inside Webflow Rich Text fields for CAS Insights articles, gated content pages, event descriptions, and any other CMS collection that uses Rich Text. Covers headings, lists, images, tables, callout boxes, code blocks, and video embeds.

Last Updated: March 30, 2026 | Audience: Everyone

Heading Hierarchy

Use headings to create a logical document structure. This is critical for both accessibility (screen readers navigate by headings) and SEO (search engines use heading hierarchy to understand content).

Rules

• H1 is reserved for the page title. It is set automatically by the CMS Name field. Never add an H1 inside the Rich Text body.
• Start body content with H2. Every major section within the article should use an H2.
• Use H3 for subsections within an H2. If a section has multiple subtopics, break them out with H3s.
• Never skip heading levels. Don't jump from H2 to H4. Screen readers and the auto-generated Table of Contents depend on sequential hierarchy.
• Don't use headings for visual styling. If you want bold, larger text that is not a section heading, use bold paragraph text instead. Headings carry semantic meaning.

Example Structure

A well-structured article looks like this:

• H1: Article Title (auto-set by CMS Name field)
• H2: Introduction or Background
• H2: Key Findings
• — H3: Finding One
• — H3: Finding Two
• H2: Implications
• H2: Methodology
• — H3: Data Sources
• — H3: Analytical Approach
• H2: Conclusion

The Finsweet Table of Contents (used on the docs template) and the CAS Insights sidebar TOC both auto-generate from H2 and H3 headings. If your heading structure is clean, the TOC works automatically.

Pasting Content from External Sources

Most articles start as Word documents or Google Docs. Pasting content into Webflow Rich Text requires care to avoid importing hidden formatting.

The Safe Paste Method

1. Select and copy the text from your source document.
2. Click into the Rich Text field in Webflow.
3. Paste using Ctrl+Shift+V (Windows) or Cmd+Shift+V (Mac). This pastes as plain text, stripping all formatting.
4. Re-apply formatting (headings, bold, italic, lists) manually in the Webflow Rich Text editor.

Why not just paste normally? Regular paste (Ctrl+V) brings along hidden styles, empty spans, non-breaking spaces, Word-specific formatting codes, and other artifacts that break Webflow's clean HTML. These invisible formatting remnants cause inconsistent typography, broken spacing, and accessibility issues.

Pasting from Google Docs

Google Docs paste is cleaner than Word but still carries heading styles and link formatting that may not map correctly to Webflow classes. Always use Ctrl+Shift+V for the first paste, then re-apply headings.

Bold, Italic, and Links

Bold

Use bold (Ctrl+B) for emphasis on key terms, product names, and important phrases. Don't bold entire paragraphs. Bold loses its emphasis when overused.

Italic

Use italic (Ctrl+I) for publication titles, scientific nomenclature, and occasional emphasis. Italics are harder to read on screen, so use sparingly.

Links

To add a link, select the text and press Ctrl+K or click the link icon in the Rich Text toolbar.

• Use relative paths for internal links. Enter /solutions/cas-scifinder not https://www.cas.org/solutions/cas-scifinder. Relative paths work correctly across staging and production environments.
• Use full URLs for external links. Enter the complete URL including https://.
• Set external links to open in a new tab. Check the "Open in new tab" option for any link that goes outside cas.org.
• Use descriptive link text. "Learn more about CAS SciFinder" not "click here" or "read more". Descriptive link text improves accessibility and SEO.

Lists

Bulleted Lists

Use for collections of related items where order does not matter. Select the text and click the unordered list button in the Rich Text toolbar, or type a dash at the start of a line.

Numbered Lists

Use for sequential steps or ranked items. Click the ordered list button, or type 1. at the start of a line.

List Tips

• Keep list items concise. If each item is a full paragraph, consider using H3 subsections instead.
• Use parallel structure. If the first item starts with a verb, all items should start with a verb.
• Don't nest lists more than two levels deep. Deeply nested lists are hard to read on screen.

Images in Rich Text

To add an image inline within the article body:

1. Place your cursor where the image should appear.
2. Click the image icon in the Rich Text toolbar (or drag an image file directly into the editor).
3. Upload the image. Use AVIF format, 720–1440px wide. See Image & Media Guidelines for full specs.
4. Add alt text in the image settings panel that appears after upload.
5. Set alignment: left, center, or full-width. Full-width is the default and recommended for most inline images.

Image Captions

Webflow Rich Text supports captions below images. Click below the image to add a caption. Use captions for source attribution, figure numbers, or brief descriptions of charts and graphs.

Tables

Webflow Rich Text does not have a native table editor. Tables must be added as HTML embeds using predefined CAS classes.

How to Add a Table

1. Place your cursor where the table should appear in the Rich Text.
2. Click the + button and select Embed (or Custom Code).
3. Paste the table HTML code into the embed field.
4. Use the CAS table classes for consistent styling.

Table HTML Template

Use this structure for all tables. The classes cas-table, cas-table-header, and cas-table-cell are defined in the site's global styles:

<table class="cas-table"><thead><tr><th class="cas-table-header">Column 1</th><th class="cas-table-header">Column 2</th></tr></thead><tbody><tr><td class="cas-table-cell">Data</td><td class="cas-table-cell">Data</td></tr></tbody></table>

For generating table HTML from data, use an LLM (like Claude) or a Markdown-to-HTML converter. Just make sure the output uses the CAS table classes.

Callout Boxes

Callout boxes highlight important information, tips, warnings, or links to related CAS solutions. They are added as HTML embeds within Rich Text.

Types of Callouts

• Info callout (blue) — General informational notes, tips, and best practices.
• Warning callout (yellow) — Cautions, things to watch out for, common pitfalls.
• Tip callout (green) — Efficiency tips, shortcuts, and pro techniques.
• Solution callout (CAS blue) — Inline links to CAS solutions, used mid-article. See the inline callout implementation guide in the CAS Insights SOP.

Adding a Callout

1. Place your cursor at the insertion point in the Rich Text.
2. Add an Embed element.
3. Paste the callout HTML template with the appropriate class.
4. Replace the placeholder text with your content.

Callout templates are available in the design system page. Contact Jimmy if you need the current code snippets.

Video Embeds

Videos are embedded using the Rich Text embed feature. CAS uses Brightcove for video hosting.

Brightcove Videos

1. Get the Brightcove embed code from the video platform.
2. Add an Embed element in the Rich Text.
3. Paste the Brightcove embed code.

Loom Videos

For internal documentation and training, Loom videos can be embedded directly:

1. Copy the Loom share link.
2. Add an Embed element in the Rich Text.
3. Paste the Loom share URL. Webflow automatically converts it to an embedded player.

YouTube / Vimeo

For external videos, paste the YouTube or Vimeo URL directly into the Rich Text editor (not inside an embed). Webflow auto-detects video URLs and creates a responsive embed.

Code Blocks

For technical documentation that includes code snippets, configuration examples, or API references:

• Wrap inline code in backtick formatting using the Rich Text toolbar's code option. This applies monospace styling.
• For multi-line code blocks, use an Embed element with a <pre><code> wrapper and the cas-code-block class.
• Never paste raw code directly into the Rich Text without code formatting. It will render as regular paragraph text and lose all indentation and structure.

Horizontal Rules (Dividers)

To add a horizontal line divider between sections, type three hyphens (---) on an empty line in the Rich Text editor. Webflow converts this to an <hr> element. Use dividers to separate major content sections, especially in longer articles.

Common Formatting Mistakes

• Adding H1 inside the body. The page title is already H1. Adding another H1 creates duplicate headings that confuse screen readers and hurt SEO.
• Skipping heading levels. Going from H2 to H4 breaks the TOC auto-generation and creates accessibility violations.
• Regular paste from Word. Always use Ctrl+Shift+V. Hidden Word formatting is the number one cause of inconsistent typography.
• Using full URLs for internal links. This causes broken links on staging environments and creates redirect issues during site migrations.
• Empty paragraphs for spacing. Don't hit Enter multiple times to create vertical space. Use the built-in spacing from headings and paragraphs. Empty paragraphs create invisible elements that screen readers announce as blank content.
• Bolding entire paragraphs. Bold is for emphasis on key phrases, not entire blocks of text. If everything is bold, nothing is emphasized.
• Images without alt text. Every image must have alt text. No exceptions. See Image & Media Guidelines.