ontario-blockquote

Use a blockquote to draw attention to a speaker quote or excerpt.

Usage guidance

Please refer to the Ontario Design System for current documentation guidance for blockquotes.

Configuration

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the blockquote component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples

Example of a blockquote component where the user is explicitly passing in a quote through the quote property - this will override the Quote Content value, and the resulting quote text passed into the quote property will be displayed.

HTML

<ontario-blockquote
	attribution="Survey respondent"
	quote="Access to high-quality child care is an issue that impacts our entire society."
>
	Quote Content
</ontario-blockquote>

React

<OntarioBlockquote
	attribution="Survey respondent"
	quote="Access to high-quality child care is an issue that impacts our entire society."
>
	Quote Content
</OntarioBlockquote>

Angular

<ontario-blockquote
	[attribution]="'Survey respondent'"
	[quote]="'Access to high-quality child care is an issue that impacts our entire society.'"
>
	Quote Content
</ontario-blockquote>

Quote Content

This is another example of a long blockquote. The component calculates the length of the quote passed in through either the quote property or the blockquote content, and applies the appropriate classes and styles to display either a short or long blockquote appearance.

HTML

<ontario-blockquote attribution="Academic partners" byline="Ontario's Pedagogy for the Early Years">
	In the past few years, Ontario has gained a high level of respect for its visionary work in early education. The
	changes have been profound, and thoughtfully introduced. The views that guide the work are articulated clearly, and
	express great respect for children, families, and educators. We now have a solid foundation upon which to build a more
	coherent system.
</ontario-blockquote>

React

<OntarioBlockquote attribution="Academic partners" byline="Ontario's Pedagogy for the Early Years">
	In the past few years, Ontario has gained a high level of respect for its visionary work in early education. The
	changes have been profound, and thoughtfully introduced. The views that guide the work are articulated clearly, and
	express great respect for children, families, and educators. We now have a solid foundation upon which to build a more
	coherent system.
</OntarioBlockquote>

Angular

<ontario-blockquote [attribution]="'Academic partners'" [byline]="'Ontario\\'s Pedagogy for the Early Years'">
	In the past few years, Ontario has gained a high level of respect for its visionary work in early education. The
	changes have been profound, and thoughtfully introduced. The views that guide the work are articulated clearly, and
	express great respect for children, families, and educators. We now have a solid foundation upon which to build a more
	coherent system.
</ontario-blockquote>

In the past few years, Ontario has gained a high level of respect for its visionary work in early education. The changes have been profound, and thoughtfully introduced. The views that guide the work are articulated clearly, and express great respect for children, families, and educators. We now have a solid foundation upon which to build a more coherent system.

Technical Note: SSR (Server-Side Rendering) Considerations

The Ontario Blockquote component supports server-side rendering, with a few considerations:

• Preferred content source: Pass blockquote text through the quote prop.
• Slotted content caveat: Slotted children rely on fallback host.textContent, which is not reliably available during SSR and can produce empty quotes.
• Framework guidance: For deterministic SSR output, prefer quote over slotted children.

SSR-safe example:

<OntarioBlockquote quote="Courage is resistance to fear, mastery of fear—not absence of fear."></OntarioBlockquote>

Overview

Ontario Blockquote displays quoted content with optional attribution.

For component guidance, see:

• https://designsystem.ontario.ca/components/detail/blockquote.html
• https://designsystem.ontario.ca/developer-docs/components/ontario-blockquote/

Properties

Property	Attribute	Description	Type	Default
attribution	attribution	Optional text to be displayed as the attribution (the author) of the quote.	string | undefined	undefined
byline	byline	Optional text to be displayed for additional information about the attribution/author.	string | undefined	undefined
quote	quote	Text to be displayed as the quote. Note that wrapping the quotes in quotations is not needed - this is handled through the component styles	string	undefined

---

Built with StencilJS