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 use callouts in WordPress. 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.