Promo Group

<section class="promo-group promo-group--three-up">
  <figure class="promo promo--square promo--docked promo--large">
    <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/0_0_3396645/0_0_3396645_16_640x360.jpg)">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">David Bowie: Five Years</h3>
      <div class="promo__copy">59 mins</div>
    </figcaption>
    <a class="promo__link" href="#">David Bowie: Five Years</a>
  </figure>
   <figure class="promo promo--square promo--docked promo--large">
     ...
   </figure>
   <figure class="promo promo--square promo--docked promo--large">
     ...
   </figure>
  </div>
</section>

3 Promos (three-up from medium and up; second and third promos dock text to right of image below medium)

<section class="promo-group promo-group--to-three-up">
  <figure class="promo promo--video">
    <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/1032076_1_3422804/1032076_1_3422804_ful02_640x360.jpg">
    </div>
    <figcaption class="promo__body">
      <div class="promo__details">
        <h3 class="promo__headline">Watch Preview</h3>
        <div class="promo__topline">Promo (0:30)</div>
      </div>
    </figcaption>
    <a class="promo__link" href="#"></a>
  </figure>
  <figure class="promo promo--video promo--split-right">
    ...
  </figure>
  <figure class="promo promo--video promo--split-right">
    ...
  </figure>
</section>

3 Promos w Spotify(three-up from medium and up; second and third promos dock text to right of image below medium)

Promo Group (one large promo beside two stacked promos, three-up below)

Subsequent promos, after the third promo, are hidden below medium.

<section class="promo-group promo-group--one-beside-two">
  <figure class="promo promo--valign promo--video promo--large">
    <div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/0_0_0/0_0_0_prm-leadladies1_1536x960.jpg">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">Leading Ladies</h3>
      <p class="promo__copy">Watch these strong and independent women on Showtime. </p>
    </figcaption>
    <a class="promo__link" href="https://www.showtime.com/#/series/allseries?i_cid=int-default-1419"> Leading Ladies</a>
  </figure>
  <figure class="promo promo--valign promo--video promo--split-right">
    <div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/804_5_0/804_5_0_bsc02_640x360.jpg">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">Behind the Scenes: Season 5</h3>
    </figcaption>
    <a class="promo__link" href="/video/titles/37582/behind-the-scenes-homeland-season-5"> Behind the Scenes: Season 5</a>
  </figure>
  <figure class="promo promo--valign promo--video promo--split-right">
    <div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/1032076_1_3422804/1032076_1_3422804_11_640x360.jpg">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">Watch a Free Full Episode of Billions</h3>
    </figcaption>
    <a class="promo__link" href="/video/titles/41958/billions-series-premiere"> Watch a Free Full Episode of Billions</a>
  </figure>
  <figure class="promo promo--valign promo--video promo--split-right">
    <div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/804_5_0/804_5_0_prf04_640x360.jpg">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">Claire Danes on Carrie Mathison in Season 5</h3>
    </figcaption>
    <a class="promo__link" href="/video/titles/37897/homeland-season-5-carrie-mathison"> Claire Danes on Carrie Mathison in Season 5</a>
  </figure>
  <figure class="promo promo--valign promo--video promo--split-right">
   ...
  </figure>
  <figure class="promo promo--valign promo--video promo--split-right">
    ...
  </figure>
</section>

Promo Group (three-up above medium, list below medium)

The small viewports get a very different style presentation, and do not display images. This variation may not display accurately with the styleguide navigation open.

<section class="promo-group promo-group--from-list promo-group--to-three-up">
  <figure class="promo promo--square promo--docked promo--large">
    <div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/408_6_0/408_6_0_01_568x568.jpg">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">SERIES</h3>
    </figcaption>
    <a class="promo__link" href="/sho/series">SERIES</a>
  </figure>
  <figure class="promo promo--square promo--docked promo--large">
    ...
  </figure>
  <figure class="promo promo--square promo--docked promo--large">
    ...
  </figure>
  <figure class="promo promo--square promo--docked promo--large">
    ...
  </figure>
  <figure class="promo promo--square promo--docked promo--large">
   ...
  </figure>
  <div class="order-promo">
    <div class="order-promo__body">
      <h3 class="order-promo__headline">A NEW WAY TO GET SHOWTIME</h3>
      <p class="order-promo__copy">Now you can stream hit series, sports, movies and more.</p>
    </div>
    <a class="order-promo__button" href="/sho/order/home">
      TRY IT NOW FOR FREE
    </a>
  </div>
</section>

Docked Square but becomes List View on Mobile

<div class="section--inner promo-group promo-group--from-list promo-group--to-three-up">
    <figure class="promo promo--square promo--docked promo--large promo--list-view">
      <div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/860_0_3429737/860_0_3429737_97_568x426.jpg">
        </div>
      <figcaption class="promo__body">
        <h3 class="promo__headline">Lee vs. Saunders</h3>
        <p class="promo__copy">Not Currently Available </p>
      </figcaption>
      <a class="promo__link" href="/3429737/Lee-vs-Saunders"></a>
      <a class="promo--list-view__item" href="/3429737/Lee-vs-Saunders">
        <h5 class="promo--list-view__item__title">Lee vs. Saunders</h5>
        <h6 class="promo--list-view__item__sub-title">Not Currently Available </h6>
        <i class="promo--list-view__item__more"></i>  
      </a>  
    </figure>
  <figure class="promo promo--square promo--docked promo--large">
    ...
  </figure>
  <figure class="promo promo--square promo--docked promo--large">
    ...
  </figure>
</div>

2 Promos (Large, Square) with Promo Copy below and No Slider Mobile only