Web services

Action callouts

Action callouts are usually at 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 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:

  • Provide actionable steps or items.

Styling

Action callouts have turquoise headings, and are usually full width (although it is possible to make them 50% width and right-aligned). They can have 25% width thumbnail images aligned right. They’re usually located in the main callout area, but can be used in the sidebar.

Responsive behavior

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.

Development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode.
  • <div class="action">
  • To make the callout 50% width and align it to the right, use class="callout-50" in the HTML or align="right" in the WordPress shortcode – see extras.
  • If including a button, you can use class=”button callout-action” to make the button full-width – 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 callout example

Do you qualify for SNAP benefits?

You will need to:

  • Meet the income guidelines
  • Be enrolled in a college training or undergraduate program that leads to employment, or meet other eligibility criteria

Apply for SNAP benefits angle right

You do not need to meet the work requirements.