A callout is a visually distinct box that draws attention to a specific piece of content on the page. It uses a colored background and bold styling to stand out from the surrounding body text, making it useful for highlighting information that visitors should not miss.
When to use a callout
Callouts work best when you have a single piece of important information that needs to stand out from the rest of the page. Good use cases include:
- Application deadlines or other key dates
- Required prerequisites or quick reference information
- A key takeaway from a longer page of content
- A call to action, such as "Apply now" or "Request information"
- Alerts about changes, updates, or items visitors are likely to overlook
Avoid using callouts for content that is not genuinely important or time-sensitive. The more callouts you place on a page, the less each one stands out, and visitors begin to scroll past them. As a general rule, one callout per page is plenty. Two should be the maximum, and only if they cover clearly different topics.
If your callout is specifically for contact details, the Contact Callout component is a better fit. If the information you want to highlight is longer than a couple of sentences, consider whether it belongs in regular body text, an Accordion, or a Card instead.