°µÍøTV

Related callouts

°µÍøTV 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 °µÍøTV.
• 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 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.

<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>

Example of Related callouts