Portland Community College | Portland, Oregon Portland Community College

Checklist callouts

Checklist callouts help guide students through the Steps for new students process.

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

Development info

  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • In WordPress, these callouts need to be added in the text editor (there isn’t a shortcode)
  • div class="checklist-steps"
  • class="complete" for completed steps – adds the checkmark and darker gray background
  • class="active" for the current step – adds the purple background
  • If the current step isn’t on the current page, add class="active next". This adds an arrow indicating you’ll complete this step elsewhere
  • Can include a paragraph above or below the steps to display additional information when necessary
  • To link to a page with a checklist callout, use an action callout with an enroll button
  • <div class="checklist-steps">
      <h5>Steps for new students</h5> <!-- whichever heading is necessary -->
      <ol>
        <li class="complete"><a href=""></a></li> <!-- no class, complete, active, or next -->
        <li class="complete"><a href=""></a></li> <!-- no class, complete, active, or next -->
        <li class="active next"><a href=""></a></li> <!-- no class, complete, active, or next -->
        <li><a href=""></a></li> <!-- no class, complete, active, or next -->
      </ol>
    </div>

Styling

Checklist callouts have a look that is distinct from other types of callouts. They have a large gray checkmark in the upper right corner, and the heading is always Steps for new students. Incomplete steps are gray with numbers, the current step is purple (with an arrow if the step is located on a different page), and complete steps are grayed out and have a green checkmark.

They should never be in the sidebar.

Responsive behavior

No change.

Pointing to a page with a checklist callout:
Ready to get started?

Becoming a PCC student is easy! Just complete the steps for new students, starting with admissions.
Admissions: apply today arrow right