Callouts on the homepage are essentially the same as info callouts with images on the pcc.edu website, but look slightly different.
Callouts on the homepage always include an image, a heading, and a call to action. They are used in a callout gallery.
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.
No change other than callout galleries stack vertically on small screens.
- Stylesheet location:
- 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