Blockquote

The blockquote component visually and semantically distinguishes quoted text from surrounding content using appropriate HTML markup.

It emphasises specific text excerpts from external sources, providing clear visual separation from the main content flow.

Use blockquotes when you need to quote content from other sources while maintaining proper attribution and semantic meaning.

11.1 of The Teal Book says:

The purpose of governing and managing a portfolio is to increase the likelihood of the portfolio’s objectives being achieved at an acceptable level of risk and within a specified funding envelope.

Use blockquotes when you need to:

• quote content from external sources
• quote someone’s opinion or speech
• reference published statements or findings from other documents
• display testimonials or feedback from users, stakeholders or experts
• include extracted text from interviews, research, or official communications
• quote relevant material from publications

Don’t use blockquotes when other components better serve the content purpose.

Use inset text instead when:

• content is your own writing that needs emphasis
• you’re highlighting important instructions or context
• text supports the main content but isn’t a quote from another source

Use highlight box instead when:

• you’re presenting case studies, examples or best practices
• content enhances understanding but doesn’t need quote attribution

Use standard quotation marks in body text instead when:

• quoted text is brief (a few words or single sentence)
• quote is integrated naturally within a paragraph
• content doesn’t need visual separation from surrounding text

Avoid blockquotes when:

• you’re highlighting warnings or critical information
• content requires user action (use interactive components)
• text is supplementary rather than quoted material

Structure blockquote content to provide clear attribution and context.

The paragraph preceding the blockquote should make it clear what the blockquote is referencing.

Ensure quoted content maintains integrity and meaning:

• reproduce quoted text exactly as published, including any emphasis or formatting
• provide sufficient context so quotes aren’t misleading
• avoid editing quotes except for length (indicate with ellipses where text is removed)
• ensure quoted material is substantial enough to justify visual treatment

Provide clear source information for all quoted content:

• include author name, title, and publication where relevant
• add publication date for time-sensitive material
• provide links to original sources when available online
• use consistent attribution format across your content

Choose appropriate content for blockquote formatting:

• use blockquotes for substantial quoted passages (typically more than one sentence)
• integrate brief quotes into body text using standard quotation marks
• avoid using blockquotes purely for visual emphasis of your own content

Handle quoted content formatting appropriately:

• don’t add quotation marks around blockquoted text (the component provides visual distinction)
• preserve original emphasis like italics or bold text where relevant
• maintain paragraph breaks for longer quoted passages