Published
April 23, 2024
Updated
April 23, 2024
The Block Quote element is designed to style quotations differently from other text.
It can be used as a standalone element, or within a Rich Text Block.
Extending Block Quotes
Supporting Paragraph Breaks within a Block Quote
Within a Rich Text Block, blockquotes can be created as an element, however hitting the enter key will start a new blockquote. In some cases this is not ideal for formatting reasons, or semantic HTML reasons.
Another approach is to use a line break within the blockquote, created with SHIFT+ENTER.
With the following custom CSS chunk placed in an Embed element, this will create a visible paragraph break between those sections.
NOTE: For some reason, the break is not rendered in the designer view, but it appears perfectly in the published site and when using the content editor.
Adding an Author or Citation
Conventionally, a quotation is followed by the speaker's name and possibly a citation. Webflow's Blockquote element
Ideas;
- Custom CSS that keys off of
<br><br><em> ... </em>
You'd use two SHIFT+ENTER line breaks, and then make the citation content emphasized. Custom CSS would be needed to leverage this construction. - Javascript ( for post-rendering only )
Something like;