Info | Web services at PCC

Web services

Info callouts

Info callouts are the default type, used for all callouts that don’t fall into another category. Use them in line 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.

Styling

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. The image extends to the top and both sides of the callout. Info callouts are located in the main callout area or the sidebar.

Responsive behavior

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.

Development info

Stylesheet location: /_source/styles/components/_callouts.scss
In WordPress, use the callout shortcode.
<div class="info">
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.
Photos are optional – put the photo before the main heading.
- In WordPress, make sure there isn’t a paragraph break between the opening shortcode tag and the image because WordPress will add space above the image. Edit the code view to remove the space, or add the line break with shift + cmd or shift + ctrl.
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>