Overview
Callouts are used to draw attention to important learning content that learners should notice, consider, or remember. They help emphasize key ideas, reflection prompts, important insights, or takeaways without interrupting the flow of the page.
Use callouts when information deserves additional emphasis because it supports understanding, application, or engagement with the course content.
Callouts vs Info Boxes
| Callouts | Info Boxes |
|---|---|
| Emphasize important learning content, such as key takeaways, reflection prompts, critical insights, or concepts that warrant additional attention. | Provide guidance about the course experience, such as navigation, deadlines, expectations, tips, or success strategies. |
| Focus on helping learners engage with and understand the content. | Focus on helping learners navigate and succeed in the course. |
Common Pitfalls to Avoid
- Using callouts for content that could be presented effectively as standard text
- Using too many callouts on a single page, reducing their impact
- Including lengthy passages of content within callouts
- Using callouts for required instructions or critical information that learners should not miss
[Example]
Reflection: Cooking Method
Think about a recent meal you prepared or ate. Which cooking method was used, and how did it affect the taste and texture? Would a different method have changed the outcome?
Spotlight: Chef Perspective
Chef Marcus noticed guests consistently leaving behind his house-made kimchi. After talking with diners, he realized the flavor was too intense for first-time customers. By adjusting the fermentation time and pairing it with familiar ingredients, the dish quickly became a customer favorite.
CDD Tag
<callout = reflection></callout>
<callout = spotlight></callout>
Guidelines
Do
ID
Production
Use Green Callouts to Highlight Reflections
These callouts are used when prompting learners to think critically about a topic, connect it to their own experiences, or evaluate their understanding. Reflection is important because it deepens learning, strengthens retention, and helps learners apply concepts more effectively in new contexts.
ID
Production
Use Purple Spotlight Callouts to Highlight Important Insights
These callouts are designed to draw attention to meaningful examples, expert perspectives, or industry insights. They help reinforce learning through concise, relevant content that connects concepts to real-world practice.
Do Not
ID
Using more than 400 characters in a callout box reduces its effectiveness by undermining its role as a focused content design element. Callouts are intended to surface key ideas quickly, allowing learners to scan and engage without disrupting the flow of the main content. When they become too long, they compete with primary material, increase cognitive load, and are more likely to be skipped. Keeping callouts concise supports clarity, scannability, and ensures they function as intentional highlights rather than secondary content blocks.
ID
Production
Embedding media should not be used within callout boxes because it weakens their purpose of directing attention to key learning cues and supporting understanding. Callouts are meant to be brief and easy to process, highlighting insights, reflections, or real-world connections. Adding media increases cognitive load and can distract from the main takeaway. Media works better in the main content, where it can be clearly introduced and explored. Keeping callouts concise and text-focused ensures they remain effective instructional signals.
ID
Production
Including images in callout boxes reduces their effectiveness by shifting them away from their role as focused content design elements. Callouts are meant to highlight key ideas quickly and clearly, supporting scanability and reinforcing learning cues. Images add visual weight and complexity, which can distract from the intended message and interrupt content flow. Visual media is more effective in the main content, where it can be properly introduced and aligned with learning objectives. Keeping callouts text-focused preserves their clarity and purpose.