The Callout Block is designed to draw attention to an important call to action on your page. Consider what actions users need to take next when deciding where to place the Callout Block.
Callout Block
- A link is required for each Callout Item
- Supports including optional summary text
- You can feature one or two Callouts per Block
- Can be styled with design options
- Color combinations determined by Theme Settings
- Creates a visual break within your content when used between Blocks or hugs the footer when used last on a page
Callout Design Options
When designing your page, the callout block provides a range of options to help you create a visually engaging layout.
- Quantity: While a single callout item is required, you can add a second for a balanced 50/50 layout within a single bar.
- Alignment: You can position the text either center or left aligned, allowing for greater design flexibility.
- Color: In the theme option you can select from different colors based on your site’s color palette.
Callout Examples
Below are examples of the callout block being used on this page.
First Centered Callout Item Heading
A short callout content under 150 characters.
Second Centered Callout Item Heading
A short callout content under 150 characters.
Left Callout Item Heading
A short callout content under 150 characters. Notice the different color of this callout. The color options are associated to the site theme.
Tips and Tricks
- Highlight Key Information: Use the callout block to draw attention to important messages, such as announcements or taking action, ensuring they stand out on the page.
- Keep Text Concise: Aim for clear and concise wording within the callout block to ensure your message is easily understood at a glance.
- 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 Callouts: Stack a series of callout blocks to create an engaging content layout. Vary 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.