Blockquote
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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Text and data
Demo
Configure: select the dropdowns below to display the variety of options that a blockquote supports.
Lorem IpsumLorem 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.
Code
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
| Variation name | Unique features |
|---|---|
| Normal |
|
| Large |
|
Do
Place near related content to alleviate confusion.
Don't
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.