Portland Community College | Portland, Oregon

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 and large-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
• 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>

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