Callout gallery

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.

More information about callouts

Visit the callout section of the style guide. Running into an issue? The callout extras page covers:

  • 50% width callouts
  • Callouts with top-right aligned icons
  • Callouts with logos
  • Callouts with action buttons

Guidelines

  • Callout galleries should always use info callouts.
  • All callouts in a gallery must have a heading and at least one link.
  • 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.
  • Don’t make more than 4 columns – they’ll be too narrow.

Styling

Callout galleries display individual callouts in the desired number of columns. The columns stretch across the full width of the content area. They use info callouts instead of other or mixed callout types.

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

Responsive behavior

Callout galleries will respond to changes in screen size based on the parameters you give them, but they are always 1 column on small screens. For example, you could have a gallery that is:

  • 4 columns on large screens, a 2 x 2 grid on medium screens, and 1 column on small screens.
  • 2 or 3 columns on large and medium screens, and 1 column on small screens.
Development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • Images all need to have the same dimensions and be at least 600px wide.
  • Use info callouts instead of other or mixed callout types.
  • In WordPress, use the callout and callout-columns shortcodes.
  • In HTML, use <div class="row callout-columns">.
    • Always use small-12. medium-x and large-x depend on the number of columns desired.
    • Don’t make more than 4 columns – they’ll be too narrow.
    • JavaScript adds an extra <div class="callout-contents"> and some inline styles. It also adds all the Equalizer attributes needed to make the columns the same height. Don’t add these elements yourself – they’ll double up and break the layout.
  • Callout with individual links:
    <div class="row callout-columns"> 
      <div class="small-12 medium-x large-x columns">
        <div class="info">
          <img src="" alt="" /> <!-- optional -->
          <h4>Column 1 heading</h4>
          <p>Column 1 content <a href="">with a link</a>.</p>
        </div>
      </div>
      <div class="small-12 medium-x large-x columns">
        <div class="info">
          <img src="" alt="" /> <!-- optional -->
          <h4>Column 2 heading</h4>
          <p>Column 2 content <a href="">with a link</a>.</p>
        </div>
      </div>
      <div class="small-12 medium-x large-x columns">
        <div class="info">
          <img src="" alt="" /> <!-- optional -->
          <h4>Column 3 heading</h4>
          <p>Column 3 content <a href="">with a link</a>.</p>
        </div>
      </div>
    </div>
  • Entire callouts are links:
    <div class="row callout-columns"> 
      <div class="small-12 medium-x large-x columns">
        <a href="">
          <div class="info">
            <img src="" alt="" /> <!-- optional -->
            <h4>Column 1 heading</h4>
            <p>Column 1 content</p>
          </div>
        </a>
      </div>
      <div class="small-12 medium-x large-x columns">
        <a href="">
          <div class="info">
            <img src="" alt="" /> <!-- optional -->
            <h4>Column 2 heading</h4>
            <p>Column 2 content</p>
          </div>
        </a>
      </div>
      <div class="small-12 medium-x large-x columns">
        <a href="">
          <div class="info">
            <img src="" alt="" /> <!-- optional -->
            <h4>Column 3 heading</h4>
            <p>Column 3 content</p>
          </div>
        </a>
      </div>
    </div>

Callout gallery examples

Callout gallery with images and individual links
Woman studying in class
Begin your university degree

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

Dental Assisting students working in the lab
Start your career

With classes in more than 80 subjects, earn the degree or certificate you need.

Staff member helping a student at a computer
Explore your options

Not sure exactly what path you want to take? PCC can help.

Callout gallery with logos
Gateway to College logo
You can change your life

Gateway to College lets you get your high school diploma while you earn college credit.

Learn more about Gateway to College

Project DEgree logo
A community of learning

Project DEgree offers support during your transition to college and helps you earn a degree.

Learn more about Project DEgree

Stacked gallery with icons and entire callouts as links