Blockquote
Description
This blockquote component is styled with an alligator-inspired color palette and typography. The quote is displayed in a box with a top and bottom border, and the citation is displayed to the right with smaller font size and muted color. The max-width and text-align properties are used to ensure the quote is legible and centered.
On-page Example
To preview a live example of the component or inspect the code, click the link below
Component Specifications
| Item/Field | Description | Required/Optional |
|---|---|---|
| Quote | Field type: WYSIWIG | Required |
| Attribution | Field type: WYSIWIG 3/20 added because of how the HTML was implemented. This needs to be a separate field in WordPress |
|
| Quote Name | Optional | |
| Quote Title | Optional | |
| Page Placement | Content width Lines touch outside of screen |
NA |
| Accessibility | Page Text | NA |
When to Use
The blockquote component is used to display a quotation or excerpt from another source in a stylized way, making it stand out from the rest of the content on the page. This component is particularly useful for providing context or adding emphasis to a specific statement or point of view.
When to Consider Something Else
If the quote is not relevant to the content of the page or does not provide any value to the user, it may be better to omit it altogether. Additionally, if the quote is very long, it may be better to use a different type of component, such as a pull quote or full-width quote, to make it more readable.
Commonly Used
Text Content