Creating "Paragraph" Breaks within a Blockquote

Blockquotes make a great call-out styling mechanism within your rich text content- but how can you create the effect of multiple paragraphs?

This is a standard Webflow rich text element containing a standard blockquote, styled with the blue bar, which shows the "paragraph"-break effect I'm describing.

Notice the slight gaps between the 4 paragraphs within the blockquote.

Unfortunately, Webflow's rich text element does not support actual paragraphs, citations, or other elements within the blockquote element.

However we can create line breaks with SHIFT+ENTER, and we can use CSS to force those line breaks to appear as gaps.

CSS Embed

To do this, create a CSS embed in the designer, with the following code;

<style>
blockquote * + br {
    content: '';
    display: block;
    margin-top: .5rem;  
}
</style>

And then in your blockquote content, use SHIFT+ENTER to create line breaks where you want the paragraph break effect to occur.

Notes

• The above code will affect all blockquotes in your page.
• If you want this site-wide, put it in your Nav or Footer component.
• If you want to isolate this to a specific rich text, use that class in the CSS selector to isolate it.