Homepage callouts

Callouts on the homepage are essentially the same as info callouts with images on the pcc.edu website, but look slightly different.

Guidelines

Callouts on the homepage always include an image, a heading, and a call to action. They are used in a callout gallery.

Styling

Instead of square corners and bottom borders, homepage buttons have rounded corners and bottom and right side borders that resemble a shadow (just like the homepage buttons and spotlights). The call-to-action arrows have a subtle animation on hover and focus, also like the buttons and spotlights. On hover, the background turns teal, unlike the darker gray for regular callouts.

Responsive behavior

No change other than callout galleries stack vertically on small screens.

Development info
  • Stylesheet location: /_source/styles/homepage/_cards-spotlights.scss
  • Foundation 6 changed “callout” to “card” so that’s what we’re going with in the code.
  • <div class=" columns">
      <a href="">
        <div class="card">
          <img src="" loading="" alt="" />
          <div class="card-details">
            <h4 class="card-heading">heading</h4>
            <p class="call-to-action">call to action</p>
          </div>
        </div>
      </a>
    </div>

Homepage callout examples

Callout

Callout

Animation

Callout animation: the background turns teal and the arrow slides to the right