Callout extras

We have various extra features that callouts can handle depending on the situation.

50% width callouts

Callouts can be 50% width and aligned to the right. Announcement callouts usually use this class, but so can info, action, and highlight callouts.

50% width styling and responsive behavior
  • Styling: 50% width callouts look just like their full-width counterparts, but are half the width and are aligned to the right. They have some top, bottom, and left padding to make sure other content doesn’t get too close to the edges of the callout. Text and other content wraps around the bottom of aligned callouts.
  • Responsive behavior: 50% width callouts become 100% width on small screens and move above the content aligned to the left of them.
50% width development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • In WordPress, use align="right" in the callout shortcode.
  • <div class="callout-type callout-50">
  • Don’t use a 50% width callout to make a callout gallery.
  • Don’t use a 50% width callout in the sidebar.
  • <div class="info callout-50"> <!-- usually info or bulletin -->
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <p>Callout content</p>
50% width example
Office closure

The Enrollment Office will be closed on September 19 for In-service.

This is paragraph text that is aligned to the left. The 50% width callout is aligned to the right, and the text wraps around it. If the text is taller than the 50% width callout, it will stretch the full width of the page beneath the callout.

Callouts with icons

You can add a Font Awesome icon to the upper right corner of a callout – this applies to individual callouts or those in a callout gallery.

It’s better to use a Font Awesome icon, but you can use an image aligned to the right if necessary – see the example for how to fix the heading padding issue.

Icons styling and responsive behavior
  • Styling: Font Awesome icons are aligned to the top right and are turquoise in color. Image icons are also aligned to the top right corner. Both are roughly 70px wide.
  • Responsive behavior: No change.
Icons development info
  • Stylesheet location: /source/styles/components/_callouts.scss
  • Font Awesome icons:
    • Use <i class="fas fa-name callout-icon"> above the heading.
    • In WordPress, use the callout and callout-columns shortcodes.
      • Use the icon shortcode and include class="callout-icon". Make sure there isn’t a paragraph break between the opening shortcode tag and the icon shortcode 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.
    • Use <div class="callout-type heading-fix"> to remove the extra left padding from the heading (not needed in WordPress).
  • Image icons:
    • <img class="graphic alignright">
    • Images should be about 70px wide.
  • <!-- Font Awesome icon -->
    <div class="info">
      <!-- if writing html -->
      <i class="fas fa-name callout-icon" aria-hidden="true" title="name">
        <span class="visually-hide">name</span>
      <!-- if in WordPress (include square brackets and use the callout shortcode) -->
      pcc-icon name="name" class="callout-icon"
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <p>Callout content</p>
    <!-- image icon -->
    <div class="info heading-fix"> <!-- only include heading-fix if the heading padding is off -->
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <img src="" alt="" class="graphic alignright" />
      <p>Callout content</p>
Icons examples

Callouts with logos

Callouts can have logos used in the same way as regular images, but by default, the logos will touch the top of the callout awkwardly.

Logos styling and responsive behavior
  • Styling: class="icon" will add 20px of padding to the top of the logo, moving it away from the top of the callout.
  • Responsive behavior: No change.
Logos development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • Add class="icon" to the image in the HTML.
  • In WordPress, add icon in the “Image CSS Class” box under Image Details > Advanced Options.
Logos example
Gateway to College logo
You can change your life

Gateway to College lets you get your high school diploma while you earn college credit.

Learn more about Gateway to College

Project DEgree logo
A community of learning

Project DEgree offers support during your transition to college and helps you earn a degree.

Learn more about Project DEgree

Callout with action buttons

Optionally, buttons in callouts can be full-width. This makes them look more like a call-to-action.

Buttons styling and responsive behavior
  • Styling: The button looks just like a regular button, but reaches both sides of the callout’s content area.
  • Responsive behavior: No change.
Buttons development info
  • Stylesheet location: /_source/styles/components/_buttons.scss
  • <a class="button callout-action">
  • There’s a chance these buttons will overlap the text above them since they have absolute positioning. If this happens, you need to include <br> tags before the button.
Buttons example
Ways to give

From online giving to estate planning, we make it easy for you to make opportunities happen.

Give now

Callouts in callout galleries can either have links in them or the entire callout can be a link.

Link styling and responsive behavior
  • Styling: The CSS adds a turquoise arrow to the bottom right corner, so there’s no need to manually add an arrow or icon.
  • Responsive: No change.
Link development info
Link example