Homepage callouts
About this component
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
Homepage callouts look like regular callouts but have a different link indicator, which is more similar to the call-to-action arrows used in spotlights, with a small animated arrow in line with the description text.
All homepage callouts also have an image, which are optional in regular callouts.
Responsive behavior for Homepage callouts
Same as regular callouts and callout galleries.
How to use for Homepage callouts
Editable in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage callouts
Stylesheet location:
/_source/homepage/styles/_cards.scss
Edit the root-level index.html file. Foundation 6 changed “callout” to “card” so that’s what we’re using too.
The arrow icon gets added by the CSS, so don’t add it manually.
<div class="small-12 medium-x cell info">
<a href="">
<img src="" alt=""> <!-- mandatory on homepage -->
<h4>Heading</h4> <!-- or <h5> or <h6> -->
<p class="call-to-action">Call to action</p>
</a>
</div>
Example of Homepage callouts
Callout
Animation
