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
andlarge-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.
- Always use
- 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
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.