Callouts
About this component
Callouts are eye-catching, color-coded boxes that each serve a different purpose. They’re a great way to draw attention to important information, guide people to a site’s sub-pages, or take an action.
Styling
Callouts are gray boxes with an optional colorful heading (determined by the use case). They can be full width or 50% width and aligned to the right. They can also be used in the sidebar below the navigation.
How to use for Callouts
Learn how to . More information is available in our style guide on the callouts pages.
Example of Callouts
Information
I’m a basic informational callout. I’m used to draw attention to certain content on a page.
Action
I include next steps and actionable links.
Announcement
I’m for short-term, important announcements.
Highlight
I’m here to highlight interesting related information.