Callout extras
Jump to a component:
- 50% width callouts
- Callout icons
- Callout action buttons
- Callouts as links
- Callouts with logos
- Callouts with subheadings
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.
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.
How to use for 50% width callouts
Use the callout shortcode with align="right".
Example of 50% width callouts
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.
Callout icons
You can add a Font Awesome icon to the upper right corner of an info 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.
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.
How to use for Callout icons
Use the callout shortcode. Only add icons to info callouts.
- Font Awesome icon: Use the icon shortcode and include
class="callout-icon". - Image icon: The image will have a max-width of 70px.
<img class="alignright callout-icon"> - Both: Make sure there isn’t a paragraph break between the opening shortcode tag and the icon shortcode or 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.
Example of Callout icons
heart
Who we are
We’re PCC’s marketing, public relations, and community engagement team – contact us.
Callout action buttons
Optionally, buttons in callouts can be full-width. This makes them look more like a call-to-action.
Styling
The callout action buttons look just like regular buttons, but reach both sides of the callout’s content area. They’re usually the last content in the callout, so appear at the bottom.
How to use for Callout action buttons
Use the callout shortcode and add the button in the HTML (see “development info”).
Example of Callout action buttons
Ways to give
From online giving to estate planning, we make it easy for you to make opportunities happen.
Callouts as links
Callouts in callout galleries can either have links in them or the entire callout can be a link.
Styling
Callouts as links look just like regular callouts, but there’s a turquoise arrow at the bottom right corner.
How to use for Callouts as links
Use the callout-columns and callout shortcodes.
Example of Callouts as links
Callouts with logos
Callouts can have logos used in the same way as regular images, but by default, the logos will awkwardly touch the top and sides of the callout unless they have built-in whitespace or transparent padding.
Styling
This fix will add 20px of padding to the top and sides of the logo.
How to use for Callouts with logos
Use the callout shortcode. When adding the image using “Add Media”, type icon into the “Image CSS Class” box under Image Details > Advanced Options.
Example of Callouts with logos
A community of learning
Future Connect is a scholarship and support program for students who identify as first-generation or low-income.
Callouts with subheadings
All callout types can have subheadings, but make sure the subheadings are at a lower level than the main callout heading.
Styling
Subheadings look like regular headings, with no background color.
How to use for Callouts with subheadings
Use the callout shortcode. Use the “Formats > Header” option in the toolbar to add the headings. Use the next heading level down from the main callout heading for the subheading.
Example of Callouts with subheadings
Heading
Subheading
Subheading content
Heading
Subheading
Subheading content