Promos

Standard Promo

All promos have a semi-transparent gradient overlay on top of the image. Landscape is the default orientation. Link elements are stretched over the entire promo to avoid multiple links (when text is not docked over image.)

Homeland

New Episode Airs Tonight at 10PM ET/PT

Homeland 
<figure class="promo">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_4_0/804_4_0_pro12_640x360.jpg)">
  </div>
  <figcaption class="promo__body">
    <div class="promo__details">
      <h3 class="promo__headline">Homeland</h3>
      <p class="promo__copy">New Episode Airs Tonight at 10PM ET/PT</p>
    </div>
  </figcaption>
  <a class="promo__link">Homeland</a>
</figure>

Promo with Spotify Player in it

Docked, Square, Large

Text elements are absolutely positioned over the image (docked), square aspect ratio (landscape is default), large text.

Homeland

New Episode Airs Tonight at 10PM ET/PT

Homeland 
<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/804_4_0/804_4_0_pro12_640x360.jpg)">
  </div>
  <figcaption class="promo__body">
    <div class="promo__details">
      <h3 class="promo__headline">Homeland</h3>
      <p class="promo__copy">New Episode Airs Tonight at 10PM ET/PT</p>
    </div>
  </figcaption>
  <a class="promo__link">Homeland</a>
</figure>

Docked, Square, Large (mostly white image)

Testing out overlay gradient effectiveness in rendering text legible over light background.

Penny Dreadful

New Episode Airs Tonight at 10PM ET/PT

Penny Dreadful

Docked, Large

Text elements are absolutely positioned over the image (docked), landscape aspect ratio remains default, large text.

Watch Homeland from the Beginning

Catch up now on any device


<figure class="promo promo--docked promo--large">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_5_3422770/804_5_3422770_01_640x360.jpg)">
  </div>
  <figcaption class="promo__body">
    <div class="promo__details">
      <h3 class="promo__headline">Watch Homeland from the Beginning</h3>
      <p class="promo__copy">Catch up now on any device</p>
    </div>
  </figcaption>
  <a class="promo__link"></a>
</figure>

Docked, Large, Play Icon

Watch Homeland from the Beginning

Catch up now on any device

<figure class="promo promo--valign promo--docked promo--icon promo--icon--play promo--large">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_5_3422770/804_5_3422770_01_640x360.jpg)">
  </div>
  <figcaption class="promo__body">
    <div class="promo__details">
      <h3 class="promo__headline">Watch Homeland from the Beginning</h3>
      <p class="promo__copy">Catch up now on any device</p>
    </div>
  </figcaption>
  <a class="promo__link"></a>
</figure>

Docked, Large, Audio Icon

Listen to the official series playlist 

<section class="promo-examples--large">
  <figure class="promo promo--docked promo--icon promo--icon--play promo--large">
    <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/1032815_4_0/1032815_4_0_pro01_640x360.jpg)">
    </div>
    <figcaption class="promo__body">
      <div class="promo__details">
        <h3 class="promo__headline">Listen to the official series playlist </h3>
      </div>
    </figcaption>
    <a class="promo__link"></a>
  </figure>
</section>  
<!-- or more simply -->
<figure class="promo promo--audio">

Docked, Split-Right

At breakpoints below small, image is reduced to 50% width and text is placed to the right.

Season 5 Look Ahead

Season 5 Look Ahead 

<figure class="promo promo--split-right promo--docked">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_4_0/804_4_0_pro12_640x360.jpg">
  </div>
  <figcaption class="promo__body">
    <div class="promo__details">
      <h3 class="promo__headline">Season 5 Look Ahead</h3>
    </div>
  </figcaption>
  <a class="promo__link">Season 5 Look Ahead</a>
</figure>

Docked, Split-Right, Square

Same as split-right above, but resolves to square instead of landscape

Homeland


<figure class="promo promo--split-right promo--docked promo--landscape-to-square">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_4_0/804_4_0_01s_300x300.jpg">
  </div>
  <figcaption class="promo__body">
    <h3 class="promo__headline">Homeland</h3>
  </figcaption>
  <a class="promo__link"></a>
</figure>

Video (Docked, Play Icon), Split-Right

Play icon remains over image when text is placed to the right below small breakpoint. This is a very common variant in use in sho.com, ie in series homepages. For convience there is simple a promo--video modifier.

Homeland Season 1 Premiere


<figure class="promo promo--video promo--split-right">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_5_0/804_5_0_trl01_640x360.jpg">
  </div>
  <figcaption class="promo__body">
    <div class="promo__details">
      <h3 class="promo__headline">Homeland Season 1 Premiere</h3>
    </div>
  </figcaption>
  <a class="promo__link"></a>
</figure>

Video v2 (Vertically-Aligned, Docked, Play Icon), Split-Right

Same as above, but with vertically-aligned inner content at desktop

Simone Kessell Talks Joining Yellowjackets Cast as Adult Lottie

Simone Kessell Talks Joining Yellowjackets Cast as Adult Lottie

This promo is showing an example of a refreshed icon. (Article Link External). For more, see the icons.

First Glimpse of Elijah Wood as Walter

First Glimpse of Elijah Wood as Walter

Reveal, Docked, Square

Reveals promo copy on rollover, additional overlay darkens image (from small breakpoints and up)

Homeland

Homeland is an edge-of-your-seat sensation. CIA officer Carrie Mathison is volatile and unpredictable. With the help of her mentor Saul Berenson, she fearlessly risks everything, including her sanity, at every turn.

Homeland 

<figure class="promo promo--reveal promo--docked promo--square">
  <div class="promo__image" style="background-image:url(https://www.sho.com/site/image-bin/images/804_4_0/804_4_0_pro12_640x360.jpg)">
  </div>
  <figcaption class="promo__body">
    <h3 class="promo__headline">Homeland</h3>
    <p class="promo__copy">Homeland is an edge-of-your-seat sensation. CIA officer Carrie Mathison is volatile and unpredictable. With the help of her mentor Saul Berenson, she fearlessly risks everything, including her sanity, at every turn.</p>
  </figcaption>
  <a class="promo__link">Homeland</a>
</figure>

Portrait at all sizes

The Chi


  <figure class="promo promo--portrait">
    <div class="promo__image" style="background-image:url(https://www.sho.com/assets/images/order/pplus-bundle/bundle-showtime-row-01.jpg">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">The Chi</h3>
    </figcaption>
    <a class="promo__link"></a>
  </figure>

Docked Square but becomes List View on Mobile

Lee vs. Saunders

Not Currently Available

Lee vs. Saunders
Not Currently Available 


<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="{{imageUrl}}">
    </div>
    <figcaption class="promo__body">
      <h3 class="promo__headline">Title</h3>
      {{#subTitle}}<p class="promo__copy">Subtitle</p>{{/subTitle}}
    </figcaption>
    <a class="promo__link" href="/3429737/Lee-vs-Saunders"></a>
     <a class="promo--list-view__item" href="{{ctaLink}}"><h5 class="promo--list-view__item__title">Title</h5>
    <h6 class="promo--list-view__item__sub-title">subTitle</h6>
     <i class="promo--list-view__item__more"></i>  
     </a>  
  </figure>
</div>