Portland Community College | Portland, Oregon

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".

<div class="info callout-50"> <!-- usually info or bulletin -->
  <h4>Callout heading</h4> <!-- or <h5> or <h6> -->
  <p>Callout content</p>
</div>

Example of 50% width callouts

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.

<div class="info">
  <i class="fas fa-name callout-icon"></i> <!-- if Font Awesome icon -->
  <img src="" alt="" class="alignright callout-icon" /> <!-- if image -->  
  <h4>Callout heading</h4> <!-- or <h5> or <h6> -->
  <p>Callout content</p>
</div>

Example of Callout icons

heart

Who we are

We’re PCC’s marketing, public relations, and community engagement team – contact us.

Be an advocate

Anyone can be an advocate for PCC – lend your voice.

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”).

<div class="callout-type">
  <h4>Callout heading</h4> <!-- or <h5> or <h6> -->
  <p>Callout content.</p>
  <a class="button callout-action" href="">Button text</a>
</div>

Example of Callout action buttons

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.

<div class="card-columns grid-x grid-margin-x">
  <div class="small-12 medium-6 large-6 cell info"> <!-- or large-3 or large-4 -->
    <a href="">
      <h4>Heading</h4> <!-- or <h5> or <h6> -->
      <p>Text</p>
    </a>
  </div>
  ...
</div>

Example of Callouts as links

Cascade

A small campus feel in a diverse urban neighborhood in the heart of Portland.

Southeast

PCC’s newest campus in the growing and diverse central eastside of Portland.

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.

<div class="info">
  <img src="" alt="" class="icon" />
  <h4>Callout heading</h4> <!-- or <h5> or <h6> -->
  <p>Callout content</p>
</div>

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.

Learn more about Future Connect

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.

<div class="info"> <!-- or whichever callout type -->
  <h4>Callout heading</h4> <!-- or <h5> -->
  <h5>Callout subheading</h5> <!-- or <h6> -->
  <p>Callout content</p>
</div>

Example of Callouts with subheadings