Related callouts
Related callouts list links to related pages or resources. The goal is to provide a link to related information in case the user reached the bottom of the page without finding what they need or if they want to learn more.
Related callouts are different from other types of callouts because they:
- Only list links to related pages or programs at PCC.
- Can only be located at the bottom of the content area, below any other content on the page, and can’t be located in the sidebar.
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.
Development info
- Stylesheet location:
/_source/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>