Headline Slideshow

Slick Carousel is used for this component.

The carousel is comprised of four (4) slides. Each slide is either a card or a slat-list.

Each breakpoint shows a different number of slides at a time (always scrolling by one). At the smallest breakpoint, the previous and next arrows aren't visible, and the user will be able to navigate through the slides by dragging.

Below are multiple examples showing the content possibilities.

Entertainment

<!-- start `headline-slideshow` component; -->
<section class="headline-slideshow">
  <header>
    <h2>Entertainment</h2>
    <nav class="d-sm-inline"><a href="#">Celebrity</a> <a href="#">TV</a> <a href="#">Movies</a> <a href="#">Music</a> <a href="#">Games</a> 
    </nav>
  </header>
  <div class="headline-slideshow__slides">
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Proin tristique urna vitae ipsum mollis viverra</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Etiam luctus tellus non ipsum bibendum</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Nullam faucibus turpis eu hendrerit accumsan</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Aenean sit amet felis sed quam tincidunt interdum</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Pellentesque ornare lorem vel mi auctor hendrerit</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Vivamus molestie nulla a posuere dictum</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Suspendisse at lacus non lacus dapibus</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Nulla a sapien ut urna hendrerit sceler</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
  </div>
</section>
<!-- end `headline-slideshow` component; -->

{
  "title": "Entertainment",
  "links": [
    {
      "title": "Celebrity",
      "url": "#"
    },
    {
      "title": "TV",
      "url": "#"
    },
    {
      "title": "Movies",
      "url": "#"
    },
    {
      "title": "Music",
      "url": "#"
    },
    {
      "title": "Games",
      "url": "#"
    }
  ],
  "slides": [
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Proin tristique urna vitae ipsum mollis viverra",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Etiam luctus tellus non ipsum bibendum",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Nullam faucibus turpis eu hendrerit accumsan",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Aenean sit amet felis sed quam tincidunt interdum",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Pellentesque ornare lorem vel mi auctor hendrerit",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Vivamus molestie nulla a posuere dictum",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Suspendisse at lacus non lacus dapibus",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Nulla a sapien ut urna hendrerit sceler",
          "url": "#"
        }
      ]
    }
  ]
}

interface JQuery {
  slick(arg: any): JQuery;
}

jQuery(($: JQueryStatic) => {
  $('.headline-slideshow__slides').each((index: number, component: HTMLElement) => {
    $(component)
      .slick({
        arrows: false,
        dots: false,
        infinite: false,
        prevArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--previous"><svg class="icon-angle-left"><title>Previous Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-left"></use></svg></button>',
        nextArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--next"><svg class="icon-angle-right"><title>Next Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-right"></use></svg></button>',
        slidesToScroll: 4,
        slidesToShow: 4,
        speed: 300,
        responsive: [
          {
            breakpoint: 1248,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 3,
              slidesToShow: 3
            }
          },
          {
            breakpoint: 960,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 2,
              slidesToShow: 2
            }
          },
          {
            breakpoint: 672,
            settings: {
              arrows: false,
              dots: false,
              slidesToScroll: 1,
              slidesToShow: 1
            }
          }
        ]
      })
      // force each slide to be the height of the tallest (the track);
      // this adds visual consistency between the slides (some will be taller than others);
      .on('setPosition', function(event: any, slick: any) {
        slick.$slides.css('height', slick.$slideTrack.height() + 'px');
      });
  });
});

@import '../card/vars';

.headline-slideshow {
  margin-top: size(2);

  @include breakpoint($breakpoint--sm) {
    margin-top: size(1);
  }

  // add margin/padding to fake the grid between slides;
  // act like a .row;
  &__slides {
    margin: 0 size(0.5) * -1;
  }

  // act like a .col;
  &__slide {
    padding: 0 size(0.5);
  }

  &__arrow {
    background: transparent;
    position: absolute;
    top: 50%;
    margin-top: size(1) * -1;
    height: size(2);
    width: size(2);
    padding: 0;
    border: 0;
    cursor: pointer;

    &--next {
      right: size(1.5) * -1;
    }
    &--previous {
      left: size(1.5) * -1;
    }

    &:focus {
      outline: none;
    }

    &.slick-disabled {
      opacity: $opacity__disabled;
      cursor: default;
    }
  }

  .slat-list {
    margin: 0;
    padding: $font-size__small;
    background: $color__backgroundDarkShade;
    height: 100%; // force it to be the height of the slide, so everything is equal height;
  }

  .card {
    height: 100%; // force it to be the height of the slide, so everything is equal height;

    .img-cover {
      height: size(8) - $card__img-margin * 2;
    }

    h3 {
      font-weight: 400;
    }
  }

  header {
    @include breakpoint($breakpoint--sm) {
      padding-bottom: size(1);
    }
  }

  h2 {
    display: inline;
    font-size: $font-size__medium;
  }

  nav {
    @include breakpoint($breakpoint--sm) {
      margin-left: size(0.5);
    }

    a {
      color: $color__textDark;
      text-decoration: none;
      transition: color $duration__color;

      &:hover,
      &:focus {
        color: $color__highlightLight;
        text-decoration: underline;
      }

      & + a {
        margin-left: size(0.5);
      }
    }
  }
}

Health

<!-- start `headline-slideshow` component; -->
<section class="headline-slideshow">
  <header>
    <h2>Health &amp; Fitness</h2>
    <nav class="d-sm-inline"><a href="#">Health News</a> <a href="#">Weight Loss</a> <a href="#">Fitness</a> <a href="#">Nutrition</a> <a href="#">Medical</a> 
    </nav>
  </header>
  <div class="headline-slideshow__slides">
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Nam pharetra diam ac orci laoreet feugiat</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Maecenas sed lectus id ante finibus</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Donec aliquam lorem et nibh ultrices fermentum</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Mauris fringilla neque ac massa consectetur aliquam</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Phasellus eget odio dignissim justo varius</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Vestibulum ut orci sit amet nunc accumsan</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Quisque facilisis tellus vitae mauris venen</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Nulla sed orci condimentum, condimentum est imperdiet, interdum ligula</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
  </div>
</section>
<!-- end `headline-slideshow` component; -->

{
  "title": "Health & Fitness",
  "links": [
    {
      "title": "Health News",
      "url": "#"
    },
    {
      "title": "Weight Loss",
      "url": "#"
    },
    {
      "title": "Fitness",
      "url": "#"
    },
    {
      "title": "Nutrition",
      "url": "#"
    },
    {
      "title": "Medical",
      "url": "#"
    }
  ],
  "slides": [
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Nam pharetra diam ac orci laoreet feugiat",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Maecenas sed lectus id ante finibus",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Donec aliquam lorem et nibh ultrices fermentum",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Mauris fringilla neque ac massa consectetur aliquam",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Phasellus eget odio dignissim justo varius",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Vestibulum ut orci sit amet nunc accumsan",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Quisque facilisis tellus vitae mauris venen",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Nulla sed orci condimentum, condimentum est imperdiet, interdum ligula",
          "url": "#"
        }
      ]
    }
  ]
}

interface JQuery {
  slick(arg: any): JQuery;
}

jQuery(($: JQueryStatic) => {
  $('.headline-slideshow__slides').each((index: number, component: HTMLElement) => {
    $(component)
      .slick({
        arrows: false,
        dots: false,
        infinite: false,
        prevArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--previous"><svg class="icon-angle-left"><title>Previous Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-left"></use></svg></button>',
        nextArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--next"><svg class="icon-angle-right"><title>Next Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-right"></use></svg></button>',
        slidesToScroll: 4,
        slidesToShow: 4,
        speed: 300,
        responsive: [
          {
            breakpoint: 1248,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 3,
              slidesToShow: 3
            }
          },
          {
            breakpoint: 960,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 2,
              slidesToShow: 2
            }
          },
          {
            breakpoint: 672,
            settings: {
              arrows: false,
              dots: false,
              slidesToScroll: 1,
              slidesToShow: 1
            }
          }
        ]
      })
      // force each slide to be the height of the tallest (the track);
      // this adds visual consistency between the slides (some will be taller than others);
      .on('setPosition', function(event: any, slick: any) {
        slick.$slides.css('height', slick.$slideTrack.height() + 'px');
      });
  });
});

@import '../card/vars';

.headline-slideshow {
  margin-top: size(2);

  @include breakpoint($breakpoint--sm) {
    margin-top: size(1);
  }

  // add margin/padding to fake the grid between slides;
  // act like a .row;
  &__slides {
    margin: 0 size(0.5) * -1;
  }

  // act like a .col;
  &__slide {
    padding: 0 size(0.5);
  }

  &__arrow {
    background: transparent;
    position: absolute;
    top: 50%;
    margin-top: size(1) * -1;
    height: size(2);
    width: size(2);
    padding: 0;
    border: 0;
    cursor: pointer;

    &--next {
      right: size(1.5) * -1;
    }
    &--previous {
      left: size(1.5) * -1;
    }

    &:focus {
      outline: none;
    }

    &.slick-disabled {
      opacity: $opacity__disabled;
      cursor: default;
    }
  }

  .slat-list {
    margin: 0;
    padding: $font-size__small;
    background: $color__backgroundDarkShade;
    height: 100%; // force it to be the height of the slide, so everything is equal height;
  }

  .card {
    height: 100%; // force it to be the height of the slide, so everything is equal height;

    .img-cover {
      height: size(8) - $card__img-margin * 2;
    }

    h3 {
      font-weight: 400;
    }
  }

  header {
    @include breakpoint($breakpoint--sm) {
      padding-bottom: size(1);
    }
  }

  h2 {
    display: inline;
    font-size: $font-size__medium;
  }

  nav {
    @include breakpoint($breakpoint--sm) {
      margin-left: size(0.5);
    }

    a {
      color: $color__textDark;
      text-decoration: none;
      transition: color $duration__color;

      &:hover,
      &:focus {
        color: $color__highlightLight;
        text-decoration: underline;
      }

      & + a {
        margin-left: size(0.5);
      }
    }
  }
}

Lifestyle

<!-- start `headline-slideshow` component; -->
<section class="headline-slideshow">
  <header>
    <h2>Lifestyle</h2>
    <nav class="d-sm-inline"><a href="#">Royals</a> <a href="#">Advice</a> <a href="#">Style</a> <a href="#">Horoscopes</a> <a href="#">Home &amp; Garden</a> 
    </nav>
  </header>
  <div class="headline-slideshow__slides">
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Phasellus accumsan lectus quis pretium rutrum</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Morbi id metus ac nibh dapibus lacinia</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Nullam in erat sed urna maximus conse</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Vivamus in sem tincidunt volutpat nisl</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Duis eu ipsum ac neque porta dictum</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Etiam interdum massa vel eros faucibus</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Cras et felis convallis placerat augue at</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Vestibulum vitae ligula id dolor rhon</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Nam bibendum leo tincidunt imperdiet vulputate</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Duis dapibus mauris sit amet justo sodales</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
  </div>
</section>
<!-- end `headline-slideshow` component; -->

{
  "title": "Lifestyle",
  "links": [
    {
      "title": "Royals",
      "url": "#"
    },
    {
      "title": "Advice",
      "url": "#"
    },
    {
      "title": "Style",
      "url": "#"
    },
    {
      "title": "Horoscopes",
      "url": "#"
    },
    {
      "title": "Home & Garden",
      "url": "#"
    }
  ],
  "slides": [
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Phasellus accumsan lectus quis pretium rutrum",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Morbi id metus ac nibh dapibus lacinia",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Nullam in erat sed urna maximus conse",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Vivamus in sem tincidunt volutpat nisl",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Duis eu ipsum ac neque porta dictum",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Etiam interdum massa vel eros faucibus",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Cras et felis convallis placerat augue at",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Vestibulum vitae ligula id dolor rhon",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Nam bibendum leo tincidunt imperdiet vulputate",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Duis dapibus mauris sit amet justo sodales",
          "url": "#"
        }
      ]
    }
  ]
}

interface JQuery {
  slick(arg: any): JQuery;
}

jQuery(($: JQueryStatic) => {
  $('.headline-slideshow__slides').each((index: number, component: HTMLElement) => {
    $(component)
      .slick({
        arrows: false,
        dots: false,
        infinite: false,
        prevArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--previous"><svg class="icon-angle-left"><title>Previous Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-left"></use></svg></button>',
        nextArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--next"><svg class="icon-angle-right"><title>Next Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-right"></use></svg></button>',
        slidesToScroll: 4,
        slidesToShow: 4,
        speed: 300,
        responsive: [
          {
            breakpoint: 1248,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 3,
              slidesToShow: 3
            }
          },
          {
            breakpoint: 960,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 2,
              slidesToShow: 2
            }
          },
          {
            breakpoint: 672,
            settings: {
              arrows: false,
              dots: false,
              slidesToScroll: 1,
              slidesToShow: 1
            }
          }
        ]
      })
      // force each slide to be the height of the tallest (the track);
      // this adds visual consistency between the slides (some will be taller than others);
      .on('setPosition', function(event: any, slick: any) {
        slick.$slides.css('height', slick.$slideTrack.height() + 'px');
      });
  });
});

@import '../card/vars';

.headline-slideshow {
  margin-top: size(2);

  @include breakpoint($breakpoint--sm) {
    margin-top: size(1);
  }

  // add margin/padding to fake the grid between slides;
  // act like a .row;
  &__slides {
    margin: 0 size(0.5) * -1;
  }

  // act like a .col;
  &__slide {
    padding: 0 size(0.5);
  }

  &__arrow {
    background: transparent;
    position: absolute;
    top: 50%;
    margin-top: size(1) * -1;
    height: size(2);
    width: size(2);
    padding: 0;
    border: 0;
    cursor: pointer;

    &--next {
      right: size(1.5) * -1;
    }
    &--previous {
      left: size(1.5) * -1;
    }

    &:focus {
      outline: none;
    }

    &.slick-disabled {
      opacity: $opacity__disabled;
      cursor: default;
    }
  }

  .slat-list {
    margin: 0;
    padding: $font-size__small;
    background: $color__backgroundDarkShade;
    height: 100%; // force it to be the height of the slide, so everything is equal height;
  }

  .card {
    height: 100%; // force it to be the height of the slide, so everything is equal height;

    .img-cover {
      height: size(8) - $card__img-margin * 2;
    }

    h3 {
      font-weight: 400;
    }
  }

  header {
    @include breakpoint($breakpoint--sm) {
      padding-bottom: size(1);
    }
  }

  h2 {
    display: inline;
    font-size: $font-size__medium;
  }

  nav {
    @include breakpoint($breakpoint--sm) {
      margin-left: size(0.5);
    }

    a {
      color: $color__textDark;
      text-decoration: none;
      transition: color $duration__color;

      &:hover,
      &:focus {
        color: $color__highlightLight;
        text-decoration: underline;
      }

      & + a {
        margin-left: size(0.5);
      }
    }
  }
}

Sports

<!-- start `headline-slideshow` component; -->
<section class="headline-slideshow">
  <header>
    <h2>Sports</h2>
    <nav class="d-sm-inline"><a href="#">NFL</a> <a href="#">NBA</a> <a href="#">MLB</a> <a href="#">NHL</a> <a href="#">Golf</a> <a href="#">Tennis</a> <a href="#">Soccer</a> 
    </nav>
  </header>
  <div class="headline-slideshow__slides">
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Sed pellentesque erat vitae felis sagittis, vel porttitor nulla consequat</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Mauris vitae sapien lacinia accumsan dui</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Curabitur dignissim est sagittis dolor luctus</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Proin in nulla vitae turpis congue veh</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `card` component; -->
      <article class="card card--stacked"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/336x192" alt="empty placeholder image" /></div>
          <h3>Praesent consectetur est sit amet ex bibendum lacinia</h3>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="headline-slideshow__slide">
      <!-- start `slat-list` component; -->
      <section class="slat-list">
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Integer posuere urna ullamcorper eros</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Maecenas volutpat sem vel vulputate vulputate</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
        <hr />
        <!-- start `slat` component; -->
        <article class="slat"><a href="#">
            <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
            <div class="slat__text">
              <h3>Phasellus interdum turpis sit ametest</h3>
            </div>
          </a> </article>
        <!-- end `slat` component; -->
      </section>
      <!-- end `slat-list` component; -->
    </div>
  </div>
</section>
<!-- end `headline-slideshow` component; -->

{
  "title": "Sports",
  "links": [
    {
      "title": "NFL",
      "url": "#"
    },
    {
      "title": "NBA",
      "url": "#"
    },
    {
      "title": "MLB",
      "url": "#"
    },
    {
      "title": "NHL",
      "url": "#"
    },
    {
      "title": "Golf",
      "url": "#"
    },
    {
      "title": "Tennis",
      "url": "#"
    },
    {
      "title": "Soccer",
      "url": "#"
    }
  ],
  "slides": [
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Sed pellentesque erat vitae felis sagittis, vel porttitor nulla consequat",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Mauris vitae sapien lacinia accumsan dui",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Curabitur dignissim est sagittis dolor luctus",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Proin in nulla vitae turpis congue veh",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/336x192",
          "alt": "empty placeholder image",
          "title": "Praesent consectetur est sit amet ex bibendum lacinia",
          "url": "#"
        }
      ]
    },
    {
      "stories": [
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Integer posuere urna ullamcorper eros",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Maecenas volutpat sem vel vulputate vulputate",
          "url": "#"
        },
        {
          "img": "http://via.placeholder.com/72x72",
          "alt": "empty placeholder image",
          "title": "Phasellus interdum turpis sit ametest",
          "url": "#"
        }
      ]
    }
  ]
}

interface JQuery {
  slick(arg: any): JQuery;
}

jQuery(($: JQueryStatic) => {
  $('.headline-slideshow__slides').each((index: number, component: HTMLElement) => {
    $(component)
      .slick({
        arrows: false,
        dots: false,
        infinite: false,
        prevArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--previous"><svg class="icon-angle-left"><title>Previous Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-left"></use></svg></button>',
        nextArrow:
          '<button type="button" class="headline-slideshow__arrow headline-slideshow__arrow--next"><svg class="icon-angle-right"><title>Next Slide</title><use xlink:href="../images/icons/icons.svg#icon-angle-right"></use></svg></button>',
        slidesToScroll: 4,
        slidesToShow: 4,
        speed: 300,
        responsive: [
          {
            breakpoint: 1248,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 3,
              slidesToShow: 3
            }
          },
          {
            breakpoint: 960,
            settings: {
              arrows: true,
              dots: false,
              slidesToScroll: 2,
              slidesToShow: 2
            }
          },
          {
            breakpoint: 672,
            settings: {
              arrows: false,
              dots: false,
              slidesToScroll: 1,
              slidesToShow: 1
            }
          }
        ]
      })
      // force each slide to be the height of the tallest (the track);
      // this adds visual consistency between the slides (some will be taller than others);
      .on('setPosition', function(event: any, slick: any) {
        slick.$slides.css('height', slick.$slideTrack.height() + 'px');
      });
  });
});

@import '../card/vars';

.headline-slideshow {
  margin-top: size(2);

  @include breakpoint($breakpoint--sm) {
    margin-top: size(1);
  }

  // add margin/padding to fake the grid between slides;
  // act like a .row;
  &__slides {
    margin: 0 size(0.5) * -1;
  }

  // act like a .col;
  &__slide {
    padding: 0 size(0.5);
  }

  &__arrow {
    background: transparent;
    position: absolute;
    top: 50%;
    margin-top: size(1) * -1;
    height: size(2);
    width: size(2);
    padding: 0;
    border: 0;
    cursor: pointer;

    &--next {
      right: size(1.5) * -1;
    }
    &--previous {
      left: size(1.5) * -1;
    }

    &:focus {
      outline: none;
    }

    &.slick-disabled {
      opacity: $opacity__disabled;
      cursor: default;
    }
  }

  .slat-list {
    margin: 0;
    padding: $font-size__small;
    background: $color__backgroundDarkShade;
    height: 100%; // force it to be the height of the slide, so everything is equal height;
  }

  .card {
    height: 100%; // force it to be the height of the slide, so everything is equal height;

    .img-cover {
      height: size(8) - $card__img-margin * 2;
    }

    h3 {
      font-weight: 400;
    }
  }

  header {
    @include breakpoint($breakpoint--sm) {
      padding-bottom: size(1);
    }
  }

  h2 {
    display: inline;
    font-size: $font-size__medium;
  }

  nav {
    @include breakpoint($breakpoint--sm) {
      margin-left: size(0.5);
    }

    a {
      color: $color__textDark;
      text-decoration: none;
      transition: color $duration__color;

      &:hover,
      &:focus {
        color: $color__highlightLight;
        text-decoration: underline;
      }

      & + a {
        margin-left: size(0.5);
      }
    }
  }
}