Callout Component

Call attention to related content

The callout component provides visitors with context and direction for a link or topic they may want to explore further. It includes an image, a short description, and up to three call-to-action (CTA) buttons. 

The background color can be white, jade, sand, or sky. On full-width pages, the image may be aligned left or right. On two-column pages and all mobile layouts, the image will automatically appear above the text. 

Callouts add both visual interest and functional guidance, directing prospective students to related information and special content. 

Minimum Fields 

• Background Color: White, Jade, Sand, or Sky
• Headline 
• Description
• Image: Use 16x9 aspect ratio
• CTA Link Text: Up to 3 links 

Character Limits 

• Headline: 35 characters 
• Description: 200 characters 
• CTA Link Text: 20 characters (per link, up to 3 links) 

 Usage Guidelines 

• Navigation Aid: Use callouts to guide visitors toward another page for more details. 
• Content Highlight: Callouts can also emphasize important topics or showcase a featured image without requiring a link.
• Clarity & Conciseness: Keep text short and actionable, focusing on what the user gains by clicking through. 
• Placement: Callouts are often most effective when paired with related content or positioned as “next steps” at the bottom of a page. 
• Color: If you use two callouts together, change the theme/bg color of one for clarity and separation on mobile devices.

Variation Examples