Pull Quote

Short excerpt taken from the main body of text to give a dominant position

Default

Default pull quote can be used with the following HTML tags: <p>, <div>, <aside>. For XS breakpoint, a border is below pull quote and font size is smaller.

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

This component has compliance with WCAG guidelines by:

  • Setting the aria-hidden="true" so the pull quote will not be conveyed to a screen reader