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>