Portland Community College | Portland, Oregon Portland Community College

Callout extras

There’s no way for the CSS to know if the images are photographs (which go all the way to the top of the callouts) or icons/logos (which don’t). class="icon" gives icons/logos extra top padding.

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% styling and responsive behavior

50% width callouts look just like their full-width counterparts, but are half the width and are aligned to the right.

Responsive: 50% width callouts become 100% width on small screens, and move above the content aligned to the left of them.

50% example
Office closure

The Enrollment office will be closed 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.

50% development info
  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • In WordPress, use the alignright and 50% width setting, just like for an image
  • 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="bulletin callout-50"> <!-- usually bulletin or info -->
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <p>Callout content</p>
    </div>

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

Font Awesome icons are aligned to the top right, and are turquoise in color. Image icons are also aligned to the top right corner, but are whatever color the image is. Both are roughly 70px wide.

Responsive: no change.

Icons example
Image icons:
Bike icon
Bicycle

Rent a bike or ride to class!

Icons development info
  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • Font Awesome icons:
    • div class="callout-type heading-fix" – removes 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">
      <i class="fas fa-name callout-icon" aria-hidden="true" title="name">
        <span class="visually-hide">name</span>
      </i> <!-- if writing html -->
      pcc-icon name="name" class="callout-icon" <!-- (with square brackets) if in WordPress -->
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <p>Callout content</p>
    </div>
    
    <!-- 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>
    </div>
    

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

Link styling and responsive behavior

The CSS adds a turquoise arrow to the bottom right corner, so there’s no need to add an arrow or icon in the HTML.

Responsive: no change.

Link example
Link development info