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 full-width icons or logos (instead of an image)
- Callouts with heading padding issues
- 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
Development info
- Stylesheet location:
/source-v6/styles/components/_callouts.scss
- WordPress callout and callout gallery tutorial
div class="row callout-columns"
- Always use
small-12
medium-x
andlarge-x
depend on the number columns desired – more info on using Foundation columns- Don’t make more than 4 columns, otherwise they’ll be too narrow
- Images all need to have the same dimensions, and be at least 600px wide
- If using a logo or other image that doesn’t have square edges, you’ll need to add
class="graphic icon"
to the image to remove the border and give it the proper top padding
- If using a logo or other image that doesn’t have square edges, you’ll need to add
- Use info callouts instead of other or mixed callout types
- JavaScript adds an extra div (
callout-contents
) and some inline styles. It also adds all the Equalizer attributes needed to make all the columns the same height- Don’t add these elements yourself, otherwise 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="" /> <h4>Column 1 heading</h4> <p>Column 1 content</p> </div> </div> <div class="small-12 medium-x large-x columns"> <div class="info"> <img src="" alt="" /> <h4>Column 2 heading</h4> <p>Column 2 content</p> </div> </div> <div class="small-12 medium-x large-x columns"> <div class="info"> <img src="" alt="" /> <h4>Column 3 heading</h4> <p>Column 3 content</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="" /> <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="" /> <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="" /> <h4>Column 3 heading</h4> <p>Column 3 content</p> </div> </a> </div> </div>
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 screens and 1 column on small screens
Callout gallery with images and individual links

Begin your university degree
Each year, 5,000 students transfer PCC credits to four-year colleges.

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

Explore your options
Not sure exactly what path you want to take? PCC can help.
Callout gallery with logos

You can change your life
Gateway to College lets you get your high school diploma while you earn college credit.

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