Related callouts
Related callouts provide links to related pages, programs or resources. For example, the Dental Assisting homepage lists links to other dental programs offered at PCC.
Related callouts are different from other types of callouts because they:
- only list links to related pages or programs at PCC
Development info
- Stylesheet location:
/source-v6/styles/components/_callouts.scss - In WordPress, use the callout shortcode
div class="related"- put the links in an unordered list, with each link in a separate
li - CSS adds the commas between items – don’t add them manually
-
<div class="related"> <h4>Callout heading</h4> <!-- whichever heading level is needed --> <ul> <li><a href="">Related item 1</a></li> <li><a href="">Related item 2</a></li> <li><a href="">Related item 3</a></li> </ul> </div>
Styling
Related callouts have purple headings. They are always 100% width and located below all other page content, including any action callouts. They should never be in the sidebar.
Responsive behavior
No change.