A callout highlights one piece of content with one or two links, displayed as a linked heading, button(s) or link(s). Callouts have optional superheaders and subheaders, and can opt to have an icon or image as media options.

Use a callout for singular pieces of content that have a CTA and can stand on their own. Callout headings are built at the <h2> level. If you are wanting this information to be nested under a specific heading, consider using custom content or choosing a component with a section intro.

Callouts are meant to always be used with a CTA option.

View Example Callout

Full Callout Documentation

Background Options

Callouts are unique from most components in Aggie UX in that there are different backgrounds available for this component depending on whether or not it is used on a page that has a sidebar.

  • Pages without Sidebars: None, Divider, Dynamic Light Gray, Dynamic Maroon, and Dynamic Charcoal
  • Pages with Sidebars: None, Border, Light Gray

Media Options

Callouts can optionally have icons or images as their media. Images can be either right- or left-aligned.

Keep Learning

Learn about Custom Content in Aggie UX 101 Module 3 Chapter 5.

Go to Chapter 5