Related callouts
About this component
Related callouts list links to related pages or resources. The goal is to provide a link to related information in case the user reaches 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’re never in the sidebar.
How to use for Related callouts
- Use the callout shortcode with
class="related". - Put the links in an unordered list, with each link in a separate list item.
- CSS adds the commas between items – don’t add them manually.
Development info for Related callouts
Stylesheet location:
/_source/homepage/styles/_cards.scss
<div class="related">
<h4>Callout heading</h4> <!-- or <h5> or <h6> -->
<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>