Action callouts go the bottom of the page, and list any next steps or actions described by the content above. These steps or actions are usually presented in an ordered list. If there is only one step, you can use a callout button.
Including an image (such as a program’s diamond) is optional, but the image must be small and floated to the right. Full-width callout images are reserved for info callouts.
Action callouts are different from other types of callouts because they:
- highlight actionable steps or items
- Stylesheet location:
- In WordPress, use the callout shortcode
class="callout-50"– optional, see extras
- if including an image, use
img class="alignright size-percent-25"
<div class="action"> <h4>Callout heading</h4> <!-- whichever heading level is needed --> <img src="" alt="" class="alignright size-percent-25" /> <!-- optional image --> <p>Callout content</p> </div>
Action callouts have turquoise headings, and are usually full width (although it is possible to make them 50% width and aligned right). They can have 25% width thumbnail images aligned right.
Action callouts are never located in the sidebar.
None by default. If using a 50% width callout, it stretches to 100% width on small screens. If in use, the thumbnail image moves above the heading.