Hero Classic
Note: due to the delicacy of media queries in play on the hero component, it is best viewed without the styleguide sidebar visible. Below the medium breakpoint, the hero image aspect ratio goes from 8:5 to 4:3.
The hero component generally expects content to be added at the bottom of it (i.e. a promo group), in order to give proper vertical space for the background image to extend down into.
The h1 elements used on the hero headlines are for SEO purposes.
Hero
<section class="hero">
<a class="hero__image lazyload" data-bgset="https://www.sho.com/assets/images/styleguide/promos/804_5_0_prm-carries5_568x426.jpg [--small] | https://www.sho.com/site/image-bin/images/804_5_0/804_5_0_prm-carries5_1024x640.jpg">
</a>
<div class="hero__inner">
<div class="hero__body">
<h1 class="hero__headline">Homeland</h1>
<p class="hero__copy">Season 6 Coming Soon to Showtime</p>
<a class="hero__cta" href="#">Watch the Season 1 Premiere for Free</a>
</div>
</div>
<div class="promo-group promo-group--to-three-up section--inner">
<figure class="promo promo--video">
<div class="promo__image lazyload" data-bgset="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">Catch Up on Homeland</h3>
</figcaption>
<a class="promo__link" href="#"></a>
</figure>
<figure class="promo promo--video promo--split-right">
<div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/804_5_3422772/804_5_3422772_14_640x360.jpg">
</div>
<figcaption class="promo__body">
<h3 class="promo__headline">Homeland Returns</h3>
</figcaption>
<a class="promo__link" href="#"></a>
</figure>
<figure class="promo 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_trl01_640x360.jpg">
</div>
<figcaption class="promo__body">
<h3 class="promo__headline">Watch the Official Season 5 Trailer</h3>
</figcaption>
<a class="promo__link" href="#"></a>
</figure>
</div>
</section>
Hero with light background
Hero with lengthy headline
Oliver Stone's Untold History of the United States
"A stunningly different take on history" -- Tribune's Zap2It.com
Watch the Season 1 Premiere for FreeHero with lengthy copy, and pre-treated image (darkened on left)
The Imitation Game
Benedict Cumberbatch stars in this tale based on the true story of Alan Turing, a genius British mathematician, who works against the clock to crack Germany's infamously unbreakable codes during World War II and defies convention in his personal life.
Watch TrailerHero with blurred background, poster art, copy aligned at bottom next to poster
The Aviator
Director Martin Scorsese's biopic of Howard Hughes, portraying his career from the late 1920s to the mid-1940s during which time Hughes became a successful film producer and an aviation magnate while simultaneously growing unstable due to severe obsessive-compulsive disorder. Stars Leonardo DiCaprio, Cate Blanchett and Kate Beckinsale.
<section class="hero hero--blur hero--detail hero--poster">
<div class="hero__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/0_0_3393610/0_0_3393610_12_640x360.jpg [--small] | https://www.sho.com/site/image-bin/images/0_0_3393610/0_0_3393610_12_1024x640.jpg">
</div>
<div class="hero__inner">
<div class="hero__body">
<picture class="hero__poster">
<source media="(max-width: 767px)"
data-srcset="https://www.sho.com/site/image-bin/images/0_0_3393610/0_0_3393610_00_300x450.jpg">
<source data-srcset="https://www.sho.com/site/image-bin/images/0_0_3393610/0_0_3393610_00_300x450.jpg">
<img class="lazyload" alt="The Aviator" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</picture>
<div class="hero__body__inner">
<h1 class="hero__headline">The Aviator</h1>
<p class="hero__copy">Director Martin Scorsese's biopic of Howard Hughes, portraying his career from the late 1920s to the mid-1940s during which time Hughes became a successful film producer and an aviation magnate while simultaneously growing unstable due to severe obsessive-compulsive disorder. Stars Leonardo DiCaprio, Cate Blanchett and Kate Beckinsale.</p>
</div>
</div>
</div>
<div class="hero__links">
<button class="button--stream button--fixed-width">
<div class="button--stream__icon"></div>
<h5 class="button--stream__label">stream this movie</h5>
</button>
</div>
</section>
Hero with previous/next navigation, more metadata
Pimp's Paradise
Carl struggles with Nick's absence, continuing to put up false hood bravado. He takes over the Gallagher home, remaking it as his "crib" and inviting his friends over to party and make music. Frank and Queenie rule the house - and Debbie returns when she's let go by Erica and Tyler.
THURSDAY, NOV 12
9 PM ET/PT
Episode 3, Season 5 replay on
SHOWTIME
Every season and episode available instantly
<section class="hero hero--no-bottom-padding hero--detail">
<div class="hero__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/408_6_3419778/408_6_3419778_01_640x360.jpg [--small] | https://www.sho.com/site/image-bin/images/408_6_3419778/408_6_3419778_01_1024x640.jpg">
</div>
<a class="hero__navigation hero__navigation--previous" href="#">
<i class="icon icon--medium icon--prev-medium"></i>
<span class="hero__navigation__detail">S6<br/>Ep6</span>
</a>
<a class="hero__navigation hero__navigation--next" href="#">
<span class="hero__navigation__detail">S6<br/>Ep8</span>
<i class="icon icon--medium icon--next-medium"></i>
</a>
<div class="hero__inner">
<div class="hero__body">
<div class="hero__top-line">S6, Ep7</div>
<h1 class="hero__headline">Pimp's Paradise</h1>
<p class="hero__copy--metadata">Original Air Date: Feb 22, 2016</p>
<p class="hero__copy">Carl struggles with Nick's absence, continuing to put up false hood bravado. He takes over the Gallagher home, remaking it as his "crib" and inviting his friends over to party and make music. Frank and Queenie rule the house - and Debbie returns when she's let go by Erica and Tyler.</p>
</div>
</div>
<div class="hero__links">
<button class="button--stream button--fixed-width">
<div class="button--stream__icon"></div>
<h5 class="button--stream__label">stream this episode</h5>
</button>
</div>
<div class="ways-to-watch section--inner">
<div class="ways-to-watch__linear">
<h4 class="ways-to-watch__date">THURSDAY, NOV 12</h4>
<h4 class="ways-to-watch__time">9 PM ET/PT</h4>
<p class="ways-to-watch__copy">Episode 3, Season 5 replay on</p>
<h4 class="ways-to-watch__channel">SHOWTIME</h4>
</div>
<div class="ways-to-watch__on-demand">
<h4 class="ways-to-watch__headline">NOW AVAILABLE ON DEMAND</h4>
<p class="ways-to-watch__copy">All Episodes for Seasons 1-4 available</p>
<a class="ways-to-watch__link" href="#">SEE SCHEDULE</a>
</div>
<div class="ways-to-watch__stream">
<h4 class="ways-to-watch__headline">Every season and episode available instantly</h4>
<div class="ways-to-watch__button-wrapper">
<button class="ways-to-watch__button button--stream">
<div class="button--stream__icon"></div>
<h5 class="button--stream__label">stream this episode</h5>
</button>
</div>
</div>
</div>
</section>
Hero with panel link
Hero image and headline link to main panel link; calls-to-action are separate, different links
<section class="hero hero--panel-link">
<a class="hero__image lazyload" href="#" data-bgset="https://www.sho.com/site/image-bin/images/1003223_3_0/1003223_3_0_01_568x426.jpg [--small] | https://www.sho.com/site/image-bin/images/1003223_3_0/1003223_3_0_01_1024x640.jpg">
</a>
<div class="hero__inner">
<div class="hero__body">
<div class="hero__top-line">Featured</div>
<h1 class="hero__headline">
<a class="hero__headline__link" href="#">Penny Dreadful</a>
</h1>
<a class="hero__cta" href="#">Watch the Official Season 3 Trailer</a>
</div>
<a class="hero__shim" href="#"></a>
</div>
</section>
Hero "small" variation (lower content is pulled up higher on top of hero image), with panel link and section link
Homeland
Sundays at 10PM ET/PT
Shameless
Sundays at 10PM ET/PT
The Affair
Sundays at 10PM ET/PT
<section class="hero hero--small hero--panel-link">
<a class="hero__image lazyload" href="#" data-bgset="https://www.sho.com/site/image-bin/images/805_5_0/805_5_0_01_568x426.jpg [--small] | https://www.sho.com/site/image-bin/images/805_5_0/805_5_0_01_1024x640.jpg">
</a>
<div class="hero__inner">
<div class="hero__body" href="#">
<h1 class="hero__headline">
<a class="hero__headline__link" href="#">House of Lies</a>
</h1>
<a class="hero__cta" href="#">Watch the Official Season 5 Trailer</a>
</div>
<a class="hero__shim" href="#"></a>
</div>
<div class="section--inner">
<a class="section-header section-header--more" href="#">
See All Series
</a>
<div class="promo-group promo-group--three-up">
<figure class="promo promo--docked promo--square promo--large">
<div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/804_0_0/804_0_0_01_568x568.jpg">
</div>
<figcaption class="promo__body">
<h3 class="promo__headline">Homeland</h3>
<p class="promo__copy">Sundays at 10PM ET/PT</p>
</figcaption>
<a class="promo__link" href="#">Homeland</a>
</figure>
<figure class="promo promo--docked promo--square promo--large">
<div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/408_0_0/408_0_0_01_568x568.jpg">
</div>
<figcaption class="promo__body">
<h3 class="promo__headline">Shameless</h3>
<p class="promo__copy">Sundays at 10PM ET/PT</p>
</figcaption>
<a class="promo__link" href="#">Shameless</a>
</figure>
<figure class="promo promo--docked promo--square promo--large">
<div class="promo__image lazyload" data-bgset="https://www.sho.com/site/image-bin/images/1031103_0_0/1031103_0_0_01_568x568.jpg">
</div>
<figcaption class="promo__body">
<h3 class="promo__headline">The Affair</h3>
<p class="promo__copy">Sundays at 10PM ET/PT</p>
</figcaption>
<a class="promo__link" href="#">The Affair</a>
</figure>
</div>
</div>
</section>
Hero --short hero(as seen on The Movie Channel)
![https://www.sho.com/assets/images/tmc/tmc_blue_bg.jpg">](https://www.sho.com/assets/images/tmc/tmc_blue_bg.jpg">){kind=link}
If you've got a passion for movies and everything about them, THE MOVIE CHANNEL⢠is your one-stop, commercial-free movie destination. From outrageous comedies and heart-stopping dramas to the most explosive action hits, THE MOVIE CHANNEL⢠has 'em all.
<section class="hero hero--no-accent" data-context="hero">
<a class="hero__image lazyload" data-location="panel link" {{/panelLink}} data-bgset="https://www.sho.com/assets/images/tmc/tmc_blue_bg.jpg [--small] | https://www.sho.com/assets/images/tmc/tmc_blue_bg.jpg">
</a>
<div class="hero__inner--short">
<div class="hero__body">
<h1 class="hero__headline hero__headline--tmc"> </h1>
<p class="hero__description">If you've got a passion for movies and everything about them, THE MOVIE CHANNEL⢠is your one-stop, commercial-free movie destination. From outrageous comedies and heart-stopping dramas to the most explosive action hits, THE MOVIE CHANNEL⢠has 'em all. </p>
</div>
<a class="hero__shim" href="/titles/3421866/free-state-of-jones" data-track="" data-label="title page link:Free State of Jones" data-location="panel link"></a>
</div>
{{#genreTileGroup}}
{{> partials/_promo_group_with_header}}
{{/genreTileGroup}}
</section>
Hero --multi-headline (as seen on /bulk)
SHOWTIME PAYS BIG TIME!
Add SHOWTIME in bulk and receive up to $9/unit to launch or $7/unit to renew.
OFFER YOUR VIEWERS EXCEPTIONAL ENTERTAINMENT WITH SHOWTIME!
Your viewers will enjoy access to award-winning original series, can't miss movies, groundbreaking documentaries, laugh-out-loud comedy specials, hard-hitting sports and much more.
Hero with top line, logo, sections
No login. No password. No hassle
Give your guests the revolutionary new way to experience premium entertainment with the SHOWTIME HOTEL APP. Guests can enjoy FREE instant access to stream 1,000s of titles -- groundbreaking Original Series, star-studded Movies, action-packed Sports, compelling Documentaries, laugh-out-loud Comedies and more -- all on the in-room television. No guest credentials required.
Additional features
Convenience and Control: Guests watch what they want, when they want with the ability to pause, fast-forward and rewind.
High Definition Resolution: Guests can watch their favorite series in crystal-clear HD.
Privacy: No personal information is collected from guests, and all viewing data is automatically cleared from the SHOWTIME HOTEL APP upon check out.
Hero --video
This appears on /order. Note, the width of hero__body is different in the /order context.
NOTE: This video player MUST have a 'muted' attribute, otherwise autoplay is inconsistent due to browsers blocking autoplay of non-silent videos
START WATCHING SHOWTIME
Get instant access to commercial-free, award-winning SHOWTIME original series, can't-miss movies, groundbreaking documentaries, laugh-out-loud comedy specials, hard-hitting sports and much more. Watch live TV or catch up on-demand on your TV, tablet, phone or computer. Plus, you can download full episodes and movies to your favorite mobile devices and watch them offline, whenever and wherever.