Portland Community College | Portland, Oregon Portland Community College

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.