Quote Callout

What is a content block? Content blocks are pre-designed components that allow you to display and customize content on your website. The YaleSites platform offers a variety of blocks to meet different content needs.

View All Blocks
quote callout icon

Use the Quote Callout Block to feature a quote from a person or organization. 

  • Option to include the image of the person associated with the quote
  • Change the style of the block
  • Choose a theme based on the color palette of your site.

With a banner-like background, the Quote Callout Block can be used to break up long blocks of text and enable your quote to stand out. For a simpler design, consider using the original Quote Block.

Quote Callout Block Design Options

When building a page and creating a design with your content, the quote callout block offers various design options for creating a visually appealing layout for content.

  • Alignment: Choose to align quote to the left or right side of your block
  • Style: The “bar” option adds a slim vertical bar beside the quote on the left or right depending on the alignment, while the “quote” option adds a single quotation mark on the left side of the block. 
  • Theme: With the Quote Callout, you have the ability to choose a background color based on the color palette set in your site theme.

Note: Including an image will remove the quote or bar styling from the block.

Quote Callout Examples

Below are examples of the quote callout block being used on this page.

Love recognizes no barriers. It jumps hurdles, leaps fences, penetrates walls to arrive at its destination full of hope

—

Maya Angelou

I know nothing in the world that has as much power as a word. Sometimes I write one, and I look at it, until it begins to shine.

—

Emily Dickinson

Tips and Tricks

  • Include attribution as necessary: Use the attribute section to add the person credited with the quote 
  • Experiment with Color Combinations: Test different color combinations from your site’s palette to find the most effective contrast that draws attention without overwhelming the design.
  • Enhance Layout with Stacked Quote Callouts: Highlight many quotes on a page by stacking a series of quote calloutsVary the colors of each callout to establish visual interest and guide users through the information more effectively.

Building With Blocks

This resource will help you understand the Blocks available and how to use them to make your content shine.

View This Resource