Block Quote
The Block Quote rendering displays a styled <blockquote> element for highlighting testimonials, citations, or emphasized text. It uses the Helium datasource template, rendering the Title field as a prominent heading (styled h4) and the Copy field as an attribution line in a <footer class="blockquote-footer">.
The rendering inherits column-width parameters from the Column base template (Small, Medium, Large, Offsets, Padding) and supports additional CSS classes via the AdditionalClasses base. This makes it easy to control the width and alignment of the block quote within a grid row.
Examples
Example Description
Below are live Block Quote examples demonstrating different configurations. The first uses only a title (quote text), the second includes both a title and an attribution footer, and the third shows a block quote constrained to a medium column width.
The best way to predict the future is to create it.
Insurance is not about risk avoidance, it is about enabling people and businesses to take the risks worth taking.
A column-constrained block quote to show how width parameters control the rendered size.
Usage Notes
Usage Notes
- The Block Quote uses the Helium datasource template. The
Titlefield is the quote text and theCopyfield is the attribution line. - The
Titlefield renders inside the blockquote as a paragraph styled with theh4class. If the Title field is empty and the page is not in Experience Editor, the heading paragraph is not rendered. - The
Copyfield renders inside a<footer class="blockquote-footer">. If Copy is empty (and not editing), the footer element is omitted entirely. - Use
<cite>inside the Copy field to wrap the source title for proper semantic markup (e.g.Someone in <cite>Source Title</cite>). - Column width parameters (Small, Medium, Large) control the responsive width of the blockquote wrapper within its parent grid row. Offset and Padding parameters fine-tune spacing.
- Use
AddClassto append custom CSS classes (e.g.text-center,border-start border-primary) to the blockquote element. - The rendering automatically applies
blockquoteas a base CSS class, which picks up Bootstrap’s blockquote styling.
Control Properties
Control Properties
Standard Values / Defaults
The Block Quote rendering parameters template ({EC75ECB3-47AE-4F0F-8721-11AEEDCB3722}) inherits from AdditionalClasses and Column. The __Standard Values item defines:
| Property | Default Value | Notes |
|---|---|---|
| Small | (empty) | No column width constraint at the small breakpoint by default. |
| Medium | (empty) | No column width constraint at the medium breakpoint by default. |
| Large | (empty) | No column width constraint at the large breakpoint by default. |
| OffsetSmall / OffsetMedium / OffsetLarge | (empty) | No column offsets by default. |
| PaddingTop / PaddingBottom / PaddingStart / PaddingEnd | (empty) | No padding applied by default. |
| AddClass | (empty) | No extra CSS classes by default. |
| All other parameters | (empty / not set) | Inherited blank from base templates. The blockquote renders full-width within its parent container unless column widths are explicitly set. |
Rendering Parameters
| Property | Type | Description |
|---|---|---|
| Small | Column Width (Droplink) | Bootstrap column class at the small breakpoint for the blockquote wrapper. |
| Medium | Column Width (Droplink) | Bootstrap column class at the medium breakpoint for the blockquote wrapper. |
| Large | Column Width (Droplink) | Bootstrap column class at the large breakpoint for the blockquote wrapper. |
| OffsetSmall | Column Offset (Droplink) | Column offset at the small breakpoint. |
| OffsetMedium | Column Offset (Droplink) | Column offset at the medium breakpoint. |
| OffsetLarge | Column Offset (Droplink) | Column offset at the large breakpoint. |
| PaddingTop | Dictionary Phrase (Droplink) | Top padding class on the blockquote wrapper. |
| PaddingBottom | Dictionary Phrase (Droplink) | Bottom padding class on the blockquote wrapper. |
| PaddingStart | Dictionary Phrase (Droplink) | Start (left/inline-start) padding class. |
| PaddingEnd | Dictionary Phrase (Droplink) | End (right/inline-end) padding class. |
| AddClass | Single-Line Text | Additional CSS classes appended to the <blockquote> element. |
Datasource Template Fields (Helium)
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | The quote text, rendered as a <p class="h4"> inside the blockquote. Omitted if empty (outside editing mode). |
| Copy | Rich Text | The attribution / citation line, rendered inside a <footer class="blockquote-footer">. Omitted if empty. Use <cite> for source titles. |