Block Quote

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.

<style>
blockquote br {
    margin-bottom: 0.6rem; /* Adjust the value as needed */
    content: ""; /* Used to apply the margin effect after the <br> */
    display: block; /* Ensures the margin is applied correctly */
}
</style>

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;

<style>
blockquote br + br + em {
    display: block;
    text-align: right;
    font-style: italic;
    margin-top: 0.6rem; /* Space above the citation, adjust as needed */
}
</style>

‍

‍