Three Card Strip

This block is a set of three cards that can be useful for calling out things your players and fans might care about.  This card also shows an example of using a Data-source.  In this case the Teams datasource is used so the Meet the Teams card can cycle through your team logos and link to team pages.
 

<script>
(function(){
  function ready(fn){
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn, {once:true});
    } else { fn(); }
  }

  function boot(){
    // Wait until jQuery exists
    if (!window.jQuery) return setTimeout(boot, 50);
    var $ = window.jQuery;
    // Wait until Slick is registered
    if (!$.fn || !$.fn.slick) return setTimeout(boot, 50);

    $('.teams-carousel').not('.is-initialized')
      .on('init', function(){ $(this).addClass('is-initialized'); })
      .slick({
        dots: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 6000,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        adaptiveHeight: false
      });
  }

  ready(boot);
})();
</script>
<style><!--
/* Section */
.cta-trio { padding: 2rem 0 2.5rem; background: transparent; }
.cta-trio__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}

/* Cards */
.cta-card {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0 0.5rem 0.5rem;
}
.cta-card:focus { outline: none; }
.cta-card:focus .cta-card__thumb { box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset; }

/* Blue placeholder “image” (16:9 block) */
.cta-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1f4db2;           /* placeholder blue */
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Typography */
.cta-card__heading {
  margin: 0.8rem 0 0.25rem;
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  text-transform: uppercase;
}
.cta-card__text {
  margin: 0;
  color: #cbd2da;
  line-height: 1.45;
}

/* Hover */
@media (hover: hover) {
  .cta-card:hover .cta-card__thumb {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
    filter: brightness(1.02) contrast(1.02);
  }
  .cta-card:hover .cta-card__heading { color: #fff; }
}

/* Spacing between cards on small screens */
@media (max-width: 639.98px) {
  .cta-trio__row .columns { margin-bottom: 1.25rem; }
}

/* 1) Let the blue "thumb" act like a framed box with inner padding */
.cta-card__thumb{
  position: relative;
  overflow: hidden;
  padding: 10px;              /* margin inside the blue box */
  border-radius: 6px;         /* a touch rounder looks nice */
}

/* 2) Make the carousel fully fill that thumb */
.cta-card__thumb > .teams-carousel,
.cta-card__thumb .slick-list,
.cta-card__thumb .slick-track{
  height: 100%;
}
.teams-carousel__container{
  height: 100%;
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
}

/* 3) Center and fit the logo without touching edges */
.teams-carousel__container img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* preserve aspect ratio, no cropping */
  display: block;
  padding: 6px;               /* tiny extra inset inside the slide */
  border-radius: 4px;         /* optional – mirrors the thumb */
}
--></style>
<section class="cta-trio">
<div class="row column">
<h2 class="cta-trio__title">Your Arena. Your Game. Your Community.</h2>
</div>
<div class="row cta-trio__row"><!-- Card 1 -->
<div class="small-12 medium-4 columns">
<div class="cta-card__thumb" aria-hidden="true"></div>
<h3 class="cta-card__heading">Join League</h3>
<p class="cta-card__text">Find the perfect league for every skill level and age. Sign up and hit the rink with friends old and new.</p>
</div>
<!-- Card 2 -->
<div class="small-12 medium-4 columns">
<div class="cta-card__thumb" aria-hidden="true">
<div class="teams-carousel">{% for team in teams %}
<div class="teams-carousel__container"><img src="{{ get_graphic(team.logo, 'large') }}" alt="{{ team.team_nickname }} Logo" /></div>
{% endfor %}</div>
</div>
<h3 class="cta-card__heading">Meet the Teams</h3>
<p class="cta-card__text">Explore team rosters, stats, and stories. Cheer for your favorites or join a squad today.</p>
</div>
<!-- Card 3 -->
<div class="small-12 medium-4 columns">
<div class="cta-card__thumb" aria-hidden="true"></div>
<h3 class="cta-card__heading">Shop &amp; Snack Bar</h3>
<p class="cta-card__text">Gear up at our pro shop or refuel at the snack bar&mdash; everything you need, right at the rink.</p>
</div>
</div>
</section>