Call-out block

The call-out block is used to call attention to a piece of information.

Default style

This option can be used at the end of a story to encourage users to learn more about a topic, and it can also be used to display "sidebar" content or highlight important information on a page. A CTA button or icon are optional.

What are ultrafine particles?

Communities near airports are exposed to ultrafine particle air pollution, which is not routinely monitored or regulated by the federal government. At less than 0.1 micron in diameter, ultrafine particles are 700 times thinner than the width of a human hair. But some ultrafine particles are even smaller — to differentiate these smaller ultrafine particles, which are between 0.01 to 0.02 microns in diameter, the UW researchers coined a new term, “ultra ultrafine particles.”

Learn more

Code

To change the icon, change info in line 2 and line 3

<div class="callout"><div class="callout-icon" data-icon="info"><i class="fa-solid fa-circle"></i><i class="fa-solid fa-info"></i></div><div class="callout-content"><h3 class="callout-heading">Callout heading</h3><div class="callout-body"><p>Text goes here</p><div><a class="btn mb-0" href="URL HERE">Button text</a></div></div></div></div>

Small default style

This style is meant to be more narrow than the default style. It has less padding on all sides compared to the default style. A CTA button and icon are optional.

Comprehensive listing of student resources

Resources and support organized by category: academics, community and inclusion, mental health, English language proficiency, and study spaces and labs.

Explore all resources

Code

To change the icon, change info in line 2 and line 3

<div class="callout is-style-small"><div class="callout-icon" data-icon="info"><i class="fa-solid fa-circle"></i><i class="fa-solid fa-info"></i></div><div class="callout-content"><h3 class="callout-heading">Callout heading</h3><div class="callout-body"><p>Text goes here</p><div><a class="btn mb-0" href="URL HERE">Button text</a></div></div></div></div>

Note style

This option can be used to add an announcement or a note on a page. A CTA button and icon are optional.

Note style with icon and button

Body text

Optional button

Code

As a Gutenberg block, this style is meant to be more narrow than the Default style, like the “Small” style. The code snippet below forces it to be “full-width” since many existing callouts on CoE are on pages with a sidebar. To prevent the callout from going full-width, remove the mw-100 from line 1.

To change the icon, change info in line 2 and line 3

<div class="callout is-style-note mw-100"><div class="callout-icon" data-icon="info"><i class="fa-solid fa-circle"></i><i class="fa-solid fa-info"></i></div><div class="callout-content"><h3 class="callout-heading">Callout heading</h3><div class="callout-body"><p>Text goes here</p><div><a class="btn mb-0" href="URL HERE">Button text</a></div></div></div></div>