Use the Wrapped Text Callout Block to draw attention to important text on your page. The surrounding text wraps around your callout, creating an engaging visual break while maintaining content flow.
- Emphasize key information, quotes, or statistics within your content
- Adjust the callout’s position, border styling and and text formatting
- Implement ways for users to easily scan content considering different reading preferences
Wrapped Text Callout Design Options
When building a page and creating a design with your content, the wrapped text callout block offers various design options for creating a visually appealing layout that draws attention to important information.
Callout Position: Callout can be positioned on the left or right of your main text content
Color: In the theme option you can choose the color of the wrapped text border based on the color palette of your site
Text Styling: In both the callout and wrapped content, change the styling of your text using the same What You See Is What You Get (WYSIWYG) editor as the Text Block.
Wrapped Text Callout Example
Below are examples of the wrapped text callout being used on this page.
A wrapped text callout allows you to highlight important information while maintaining the natural flow of your content. This seamless integration means that readers can absorb key information without being disrupted from the main content.
Unlike traditional callout boxes that create hard stops in content flow, wrapped text callouts work harmoniously with surrounding paragraphs, allowing the eye to move naturally between highlighted information and supporting details.
This fluid reading experience is particularly valuable for longer-form content where maintaining reader engagement throughout the entire piece is crucial. Some users prefer to scan content quickly, looking for key takeaways before deciding whether to read in full detail. Others dive deep into every paragraph from start to finish.
Example 2
You don’t need to have bold design elements to highlight your key points.
The wrapped text callout block offers a level of simplicity that allows you to highlight content more subtly than some of our other blocks. Wrapped text callouts integrate seamlessly into your content without overwhelming the reader or disrupting the natural reading experience. Still, being able to customize the border color allows you to tie in this block with other more decorated blocks, or even to provide a nice pop of color on its own.
Wrapped text callouts provide a consistent yet flexible method for emphasizing important information. They work particularly well when you need to highlight several key points within a single page without creating visual chaos or overwhelming your readers with too many bold design elements.
Building With Blocks
This resource will help you understand the Blocks available and how to use them to make your content shine.
Tips and Tricks
- Consistent Alignment: Ensure that the callout alignment (left or right) complements your content to maintain a clean and professional look.
- Optimal Callout Size: Use appropriately sized callouts to avoid overwhelming the main content. Keep callouts concise and impactful without disrupting reading flow.
- Text Wrapping: Experiment with different text wrapping options to find the best flow for your content. Avoid awkward breaks in text around the callout.
- Responsive Design: Check how the wrapped text callout looks on various devices (mobile, tablet, desktop) to ensure it remains visually appealing and functional.
- Consistent Style: Maintain a consistent style for all callouts (e.g., background