LP6 Style Guide: Hover Card

Note: Hover cards interact with Carousel styles. This allows for completely custom breakpoints on the fly.

HTML Example

• Federal Student Aid (FSA)

  LEARN MORE

• Federal Student Aid (FSA)

  LEARN MORE

• Federal Student Aid (FSA)

  LEARN MORE

• Federal Student Aid (FSA)

  LEARN MORE

HTML Code Snippet

					
<ul class="hover-cards slider slider-default slider-minimal">
	<li>
		<div class="hover-card" style="background-image: url('//apus.edu/sebin/r/t/AMU-card-tall-aid-fsa.jpg');">
      <div class="hover-card-context">
        <div class="hover-card-context-wrap">
          <div class="hover-card-title">
            <h3 class="hover-card-main-title">Federal Student Aid (FSA)</h3>
          </div>
          <div class="hover-card-copy">
            <div class="btn btn-primary">LEARN MORE</div>
          </div>
        </div>
      </div>
    </div>
	</li>
	<li>
		<div class="hover-card" style="background-image: url('//apus.edu/sebin/r/t/AMU-card-tall-aid-fsa.jpg');">
      <div class="hover-card-context">
        <div class="hover-card-context-wrap">
          <div class="hover-card-title">
            <h3 class="hover-card-main-title">Federal Student Aid (FSA)</h3>
          </div>
          <div class="hover-card-copy">
            <div class="btn btn-primary">LEARN MORE</div>
          </div>
        </div>
      </div>
    </div>
	</li>
	<li>
		<div class="hover-card" style="background-image: url('//apus.edu/sebin/r/t/AMU-card-tall-aid-fsa.jpg');">
      <div class="hover-card-context">
        <div class="hover-card-context-wrap">
          <div class="hover-card-title">
            <h3 class="hover-card-main-title">Federal Student Aid (FSA)</h3>
          </div>
          <div class="hover-card-copy">
            <div class="btn btn-primary">LEARN MORE</div>
          </div>
        </div>
      </div>
    </div>
	</li>
	<li>
		<div class="hover-card" style="background-image: url('//apus.edu/sebin/r/t/AMU-card-tall-aid-fsa.jpg');">
      <div class="hover-card-context">
        <div class="hover-card-context-wrap">
          <div class="hover-card-title">
            <h3 class="hover-card-main-title">Federal Student Aid (FSA)</h3>
          </div>
          <div class="hover-card-copy">
            <div class="btn btn-primary">LEARN MORE</div>
          </div>
        </div>
      </div>
    </div>
	</li>
</ul>
					
				

JS Snippet

					
<script type="text/javascript" src="/common/js/slick.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.slider-minimal').slick({
			slidesToShow: 4,
			slidesToScroll: 1,
			infinite: false,
			arrows: false,
			dots: true,
			pauseOnFocus: true,
			responsive: [
		    {
		      breakpoint: 1700,
		      settings: {
		        slidesToShow: 4,
		        slidesToScroll: 1,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 1300,
		      settings: {
		        slidesToShow: 3,
		        slidesToScroll: 1,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 900,
		      settings: {
		        slidesToShow: 2,
		        slidesToScroll: 1,
		        dots: true
		      }
		    },
				{
					breakpoint: 600,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
		        dots: true
					},
				}
			]
		});
	});
</script>
					
				

Dynamic Methods