Portland Community College | Portland, Oregon Portland Community College

Info callouts

Info callouts are the default type, used for all callouts that don’t fall into another category. Use them inline with the main page content to make certain information or links more visible. Including an image is optional.

Info callouts are different from other types of callouts because they:

  • are part of the page’s core content – they simply make pieces of content more visible
  • are permanent
  • are used in callout galleries

Development info

  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode
  • div class="info"
  • class="callout-50" – optional, see extras
  • photos are optional – put the photo before the main heading
  • can include a callout icon
  • used for callout galleries
  • <div class="info">
      <img src="" alt="" /> <!-- optional image; callout icons also go here -->
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <p>Callout content</p>
    </div>

Styling

Info callouts have gray headings, which match the gray content background. They’re the only type of callout that can include a full-width image above the heading.

Info callouts are never located in the sidebar.

Responsive behavior

None by default. If using a 50% width callout or a callout gallery, the callouts stack vertically and stretch to 100% width. Icons move above the heading on small screens, when applicable.

Woman studying in class
Begin your university degree

Each year, 5,000 students transfer PCC credits to four-year colleges.

Shuttle

PCC provides free shuttle service between our campuses.