Action callouts
About this component
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 call to action, you can use a callout action button.
Including an image is optional, but the image must be small and floated to the right (see image sizing and alignment). 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. Action callouts are usually located in the main callout area, but can be used in the sidebar below the navigation menu.
Responsive behavior for Action callouts
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.
How to use for Action callouts
Use the callout shortcode with class="action".
Development info for Action callouts
Stylesheet location:
/_source/homepage/styles/_cards.scss
- To make the callout 50% width and align it to the right, see 50% width callouts.
- If including a button, you can use a basic button or full-width callout action button.
- If including an image, use a 25% width image aligned to the right (see image sizing and alignment).
<div class="action"> <!-- optional: class="callout-50" --> <h4>Callout heading</h4> <!-- or <h5> or <h6> --> <img src="" alt="" class="alignright size-percent-25" /> <!-- optional --> <p>Callout content</p> </div>
Example of Action callouts
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