Callout gallery
About this component
More information about callouts
Visit the callout section of the style guide. Running into an issue? The callout extras page covers:
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.
Responsive behavior for Callout galleries
Callout galleries will be either 2, 3, or 4 columns on large screens based on what the editor has chosen, but are always 2 columns on medium screens and 1 column on small screens.
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.
Development info for Callout galleries
Stylesheet location:
/_source/styles/components/_cards.scss
Note: Foundation calls callouts “cards” so that’s what they’re referred to as in the CSS and HTML.
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
Stacked callouts that have links and icons
money bill
Financial support
- Find jobs on campus
- STEP (extra help for SNAP clients)
- Scholarships
- Financial aid