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 backgroundclass="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 arrow right