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

Block Quote in page example

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
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