Portland Community College | Portland, Oregon Portland Community College

Action callouts

Action callouts go the bottom of the page, and list any next steps or actions described by the content above. These steps or actions are usually presented in an ordered list. If there is only one step, you can use a callout button.

Including an image (such as a program’s diamond) is optional, but the image must be small and floated to the right. Full-width callout images are reserved for info callouts.

Action callouts are different from other types of callouts because they:

  • highlight actionable steps or items

Development info

  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode
  • div class="action"
  • class="callout-50" – optional, see extras
  • if including an image, use img class="alignright size-percent-25"
  • <div class="action">
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <img src="" alt="" class="alignright size-percent-25" /> <!-- optional image -->
      <p>Callout content</p>
    </div>

Styling

Action callouts have turquoise headings, and are usually full width (although it is possible to make them 50% width and aligned right). They can have 25% width thumbnail images aligned right.

Action callouts are never located in the sidebar.

Responsive behavior

None by default. If using a 50% width callout, it stretches to 100% width on small screens. If in use, the thumbnail image moves above the heading.

What’s next?

Environmental Studies program image

  1. Complete the steps for new students
    • The admissions form will ask you what you plan to study. Since we don’t offer a degree or certificate in this subject, you should choose Associate of Arts – Oregon Transfer (AAOT) for now.
  2. Plan how you’ll pay for college
  3. Plan your transfer