Users browse pages, scanning quickly for useful or interesting information. If important information is buried within the page content, users can easily miss this information.

Blockquote component highlights specific content with a visual indicators to differentiate it from the rest of the body content. This indicates to users that it is important information.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Text and data


Configure: select the dropdowns below to display the variety of options that a blockquote supports.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum



Responsive preview

Usage best practices

Blockquotes constrain within a grid or column to change the width to any size. They may include a citation that can be static or link to another website. The component also supports inline links and other text formatting.

Consider using blockquote to:

  • highlight important information
  • differentiate a quote from the rest of the content
  • link to an author's or cited website

Usage examples:

  • Councillor quote with a link to their website
  • callout for changes in facility hours
Blockquote variations and features
Variation name Unique features
  • vertical red line
  • italicized font
  • large graphic quotation marks
  • larger font
  • additional padding/spacing
  • option to italicize font


Place near related content to alleviate confusion.


Do not use too many blockquotes on a page. This can be visually overwhelming and distract users from the content.

Do not include more than a few short sentences of text. A long block of text can be visually overwhelming.