Info callouts are the default type, used for all callouts that don’t fall into another category. Use them inline with the main page content to make certain information or links more visible. Including an image is optional.
Info callouts are different from other types of callouts because they:
- are part of the page’s core content – they simply make pieces of content more visible
- are permanent
- are used in callout galleries
- Stylesheet location:
- In WordPress, use the callout shortcode
class="callout-50"– optional, see extras
- photos are optional – put the photo before the main heading
- can include a callout icon
- used for callout galleries
<div class="info"> <img src="" alt="" /> <!-- optional image; callout icons also go here --> <h4>Callout heading</h4> <!-- whichever heading level is needed --> <p>Callout content</p> </div>
Info callouts have gray headings, which match the gray content background. They’re the only type of callout that can include a full-width image above the heading.
Info callouts are never located in the sidebar.
None by default. If using a 50% width callout or a callout gallery, the callouts stack vertically and stretch to 100% width. Icons move above the heading on small screens, when applicable.