Portland Community College | Portland, Oregon

Callout gallery

About this component

Callout galleries promote sub-pages or related resources with equal hierarchy in an eye-catching and prominent way. They should always provide links to other pages. There are usually one or more individual links in each callout, but entire callouts can be links if that’s your desired layout. They’re common on site homepages.

Guidelines

• Callout galleries should always?use info callouts.
• All callouts in a gallery must have a heading and at least one link, or the callouts themselves can be the links.
• Callouts in a gallery can have an optional image or other graphic above the heading.
  • If one callout in a gallery has an image, they all should have images.
  • The images have to have the same dimensions (height and width) and be at least 600px wide.
• Can be 2, 3, or 4 columns (on large screens).

Styling

Callout galleries display individual info callouts in the desired number of columns. The columns stretch across the full width of the content area and wrap to a second row if there are more callouts than columns. The callouts on each row have the same height, which is equal to the height required for the callout with the most content.

The callouts can have optional images or other logos, top-right aligned icons, or plain headings, text, and at least one link. Callouts that are links themselves have an arrow icon in the lower right corner showing that the entire box is a link.

How to use for Callout galleries

Use the callout-columns and callout shortcodes.

• Images all need to have the same dimensions and be at least 600px wide.
• Use info callouts instead of other or mixed callout types.
• Add any images directly below the pcc-callout shortcode (use shift + enter or shift + return, not a regular enter or return).
• Insert any images at full size (if less than 1000px wide) or 100% wide, and with no alignment.
• See the callout extras page for how to build a callout link and how to add callout icons.

As links:
<div class="card-columns grid-x grid-margin-x">
  <div class="small-12 medium-6 large-6 cell info"> <!-- or large-3 or large-4 -->
    <a href="">
      <img src="" alt="" /> <!-- optional -->
      <h4>Heading</h4> <!-- or <h5> or <h6> -->
      <p>Text</p>
    </a>
  </div>
  ...
</div>

With links:
<div class="card-columns grid-x grid-margin-x">
  <div class="small-12 medium-6 large-6 cell info"> <!-- or large-3 or large-4 -->
    <img src="" alt="" /> <!-- optional, or callout icon -->
    <h4>Heading</h4> <!-- or <h5> or <h6> -->
    <p>Text</p> <!-- could include link here, or in <ul> etc. -->
  </div>
  ...
</div>

Example of Callout galleries

With images and callouts as links

Short term

See certificates you can earn in 1 year or less

2 years

See associate degrees and certificates you can earn in 2 years

Stacked callouts that have links and icons