Block Quote

Short excerpt with an external citation and citation URL that is set off from the main body of text

Default

Default block quote can be used with the following HTML tags: <p>, <div>, <aside>. This is responsive with styles for XS breakpoint

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • All recommendations listed for Paragraphs component apply to this component
  • Do not use this component to indent text. Screen readers use the <blockquote> element to:
    • Provide semantic understanding of page content by announcing blockquote as quote
    • Define a sectioning root in HTML5, which means that any <h1> - <h6> elements it contains don’t become part of the document’s outline
  • To make the blockquote content accessible, use the <cite> attribute with a valid URL

This component has compliance with WCAG guidelines by:

  • Adding a <cite> element to refer to the source of the quote