Checklist callouts

Web services

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:

are only used for the steps for new students pages

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.

Steps for new students

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

Portland Community College | Portland, Oregon

Web services