Extras | Web services at PCC

Web services

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>
</div>

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>
  </i>
  <!-- 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>
</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>

Icons examples

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.

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

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

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

Callout as a link

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

Stylesheet location: /_source/styles/components/_callouts.scss
See the callout gallery page for how to build a callout link.

Link example

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.