<div class="overlay js-overlay"></div>
<div class="header-container js-header-container">
<header class="header contain js-header">
<div class="header-main">
<div class="header-btns">
<button class="btn header-btn-menu-open js-header-btn-menu-open">
<svg class="icon icon--menu">
<use xlink:href="/assets/icons/sprite-sheet.svg#menu"></use>
</svg>
<span class="visually-hidden">Menu</span>
</button>
<button class="btn header-btn-menu-close js-header-btn-menu-close">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
</div>
<div class="header-logo">
<a href="#">
<img src="/assets/images/logos/theatermania-notag-white.svg" alt="Theatermania Logo" />
</a>
</div>
<div class="header-search-container js-header-search">
<div class="header-btns">
<button class="btn header-btn-search-open js-header-btn-search-open">
<svg class="icon icon--search">
<use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
<span class="visually-hidden">Search</span>
</button>
<button class="btn header-btn-search-close js-header-btn-search-close">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Search</span>
</button>
</div>
<div class="header-search">
<div class="search-block">
<form class="search-block-form">
<label for="search" class="label visually-hidden">Search</label>
<input class="input search-block-form__input js-input-search" name="search" id="search" type="search" placeholder="Search city, actor or keyword..." />
<svg class="icon icon--search">
<use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
</form>
</div>
</div>
</div>
</div>
<div class="header-nav-container js-header-nav">
<div class="header-nav-items">
<nav class="header-nav">
<ul class="header-nav__list js-header-nav-list">
<li class="nav-list-item">
<button class="btn nav-link-item js-nav-secondary">
Tickets & Discounts
<svg class="icon icon--arrow-bottom">
<use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
</button>
<ul class="header-nav__list-secondary">
<li class="header-nav-close">
<button class="btn btn--close btn--close--submenu js-btn-close--submenu">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
</li>
<li class="sublist sublist--main">
<div class="section-title">
<svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
<h2 class="title-highlight">New York City</h2>
</div>
<ul class="header-nav__sublist">
<li class="nav-list-item">
<a href="#" class="nav-link-item">Broadway</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Broadway Discounts</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Off-Broadway</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">All New York City</a>
</li>
</ul>
</li>
<li class="sublist">
<div class="section-title">
<svg class="icon icon--map-pin">
<use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
<h2 class="title-highlight">Other Cities</h2>
</div>
<ul class="header-nav__sublist">
<li class="nav-list-item">
<a href="#" class="nav-link-item">Boston</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Chicago</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Dallas</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Los Angeles</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Miami</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Minneapolis</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Philadelphia</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">San Diego</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">San Francisco</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Seattle</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Washington D.C.</a>
</li>
</ul>
<a href="#" class="btn btn--base btn--primary btn--submenu">See All Cities</a>
</li>
</ul>
</li>
<li class="nav-list-item">
<a href="#nav-link" class="nav-link-item">News & Reviews</a>
</li>
<li class="nav-list-item">
<button class="btn nav-link-item js-nav-secondary">
Theater Clubs
<svg class="icon icon--arrow-bottom">
<use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
</button>
<ul class="header-nav__list-secondary">
<li class="header-nav-close">
<button class="btn btn--close btn--close--submenu js-btn-close--submenu">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
</li>
<li class="sublist-title">
<div class="section-title">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<h2 class="title-highlight">Complimentary and Deeply Discounted Shows</h2>
</div>
<span class="sublist-copy">Broadway, Off-Broadway, Concerts, Sports, Movie Screenings, Comedy, Dance and much more.</span>
</li>
<li class="nav-list-item nav-list-item--clubs">
<a href="#">
<div class="nav-image-container">
<picture>
<source srcset="/assets/images/nav/newyorkClub.jpg" media="(min-width: 768px)">
<img srcset="/assets/images/nav/newyorkClubSmall.jpg" class="nav-image" alt="New York City skyline at dusk" />
</picture>
<span class="nav-image-link">New York</span>
</div>
</a>
</li>
<li class="nav-list-item nav-list-item--clubs">
<a href="#">
<div class="nav-image-container">
<picture>
<source srcset="/assets/images/nav/bostonClub.jpg" media="(min-width: 768px)">
<img srcset="/assets/images/nav/bostonClubSmall.jpg" class="nav-image" alt="Boston skyline at dusk near waterfront" />
</picture>
<span class="nav-image-link">Boston</span>
</div>
</a>
</li>
<li class="nav-list-item nav-list-item--clubs">
<a href="#">
<div class="nav-image-container">
<picture>
<source srcset="/assets/images/nav/londonClub.jpg" media="(min-width: 768px)">
<img srcset="/assets/images/nav/londonClubSmall.jpg" class="nav-image" alt="London skyline at night with Big Ben" />
</picture>
<span class="nav-image-link">London</span>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-list-item">
<button class="btn nav-link-item js-nav-secondary">
Newsletter
<svg class="icon icon--arrow-bottom">
<use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
</button>
<ul class="header-nav__list-secondary header-nav__list-secondary--newsletter">
<li class="header-nav-close">
<button class="btn btn--close btn--close--submenu js-btn-close--submenu">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
</li>
<li class="sublist-title">
<div class="section-title">
<svg class="icon icon--email">
<use xlink:href="/assets/icons/sprite-sheet.svg#email"></use>
</svg>
<h2 class="title-highlight">Discount Ticket Email Offers</h2>
</div>
</li>
<li class="nav-list-item nav-list-item--newsletter">
<div class="nav-newsletter">
<p class="newsletter-copy js-newsletter-copy">Discount email offers for a wide variety of Broadway, Off-Broadway and regional shows.</p>
<div class="newsletter-form-container js-newsletter-form-container">
<div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
<svg class="icon icon--checkmark">
<use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
<div class="newsletter-confirmation__info">
<p>Thank you for signing up. We'll send you a welcome message shortly.</p>
<p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
</div>
</div>
<form class="newsletter-form js-newsletter-form">
<div class="newsletter-error visually-hidden js-newsletter-error">
<svg class="icon icon--error">
<use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
<span class="input-error">Please enter a valid email address.</span>
</div>
<div class="form-input">
<div class="validation js-validation">
<input type="email" name="email" id="email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
</div>
</div>
<button class="btn btn--base btn--cta js-newsletter-btn">
Sign Up
</button>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
<div class="header-social">
<div class="social">
<ul class="social__list" aria-label="Social network profiles">
<li class="social-list-item">
<a href="#facebook-url">
<svg class="icon icon--facebook">
<use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="social-list-item">
<a href="#twitter-url">
<svg class="icon icon--twitter">
<use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="social-list-item">
<a href="#youtube-url">
<svg class="icon icon--youtube">
<use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
<span class="visually-hidden">YouTube</span>
</a>
</li>
<li class="social-list-item">
<a href="#instagram-url">
<svg class="icon icon--instagram">
<use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
<span class="visually-hidden">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
<div class="ad-takeover-container">
<a href="#">
<div class="ad-takeover-header">
<picture>
<source srcset="/assets/images/ads/takeover-header.jpg" media="(min-width: 971px)">
<source srcset="/assets/images/ads/takeover-header-medium.jpg" media="(min-width: 600px)">
<img src="/assets/images/ads/takeover-header-small.jpg" class="ad-takeover__image-header" alt="takeover ad placeholder alt" />
</picture>
</div>
<div class="ad-takeover">
<img src="/assets/images/ads/takeover.jpg" class="ad-takeover__image" alt="takeover ad placeholder alt" />
</div>
</a>
</div>
<main class="show-page contain--takeover">
<div class="show-banner">
<div class="banner js-banner">
<div class="banner__video">
<div class="video">
<div class="video__banner">
<!-- This is using a sample bright cove video player called Peter G test (560 height).
I removed the initial DIVs position relative provided by Brightcove for the
max-height demo seen in Banner.js. -->
<div style="display: block;">
<div style="padding-top: 43.75%;"><video data-video-id="5536441155001" data-account="64254751001" data-player="BkwMOPODb" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
<script src="//players.brightcove.net/64254751001/BkwMOPODb_default/index.min.js"></script>
</div>
</div>
</div>
</div>
<button class="banner__video-controls js-banner__video-controls" aria-label="Pause">
<span class="controls-pause"><svg class="icon icon--pause">
<use xlink:href="/assets/icons/sprite-sheet.svg#pause"></use>
</svg></span>
<span class="controls-play"><svg class="icon icon--play">
<use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg></span>
</button>
</div>
</div>
<section class="show-banner__show">
<div class="show-banner-info contain">
<div class="show-banner-image">
<img src="/assets/images/showpage/missSaigon.jpg" class="thumbnail" alt="Example image alt" />
</div>
<div class="show-banner-show-info">
<h1 class="heading-xlarge">Miss Saigon</h1>
<div class="show-banner-location">
<a href="#" class="show-banner-location-info">Broadway Theatre</a>, <a href="#" class="show-banner-location-info">New York City</a>
</div>
<div class="show-banner-genre">
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item">
<a href="#" class="btn btn--base btn--plain">Musical</a>
</li>
<li class="tags-list-item">
<a href="#" class="btn btn--base btn--plain">Drama</a>
</li>
<li class="tags-list-item">
<a href="#" class="btn btn--base btn--plain">Broadway Hit</a>
</li>
</ul>
</div>
</div>
<div class="show-banner-tickets">
<button class="btn btn--base btn--cta js-tickets-button">
Regular Tickets ($104+)
</button>
<button class="btn btn--base btn--primary">
Discount Tickets ($64+)
</button>
</div>
</div>
</div>
</section>
</div>
<div class="show-page-container contain">
<div class="callout callout--text">
<span class="heading-large">The epic love story of our time is sweeping audiences off their feet!</span>
</div>
<section class="show-page__block show-page__block--two-col">
<div class="title-text-container show-block">
<div class="section-title">
<svg class="icon icon--question">
<use xlink:href="/assets/icons/sprite-sheet.svg#question"></use>
</svg>
<h2 id="about_the_details" class="title-highlight">About This Show</h2>
</div>
<div class="title-text-copy">
<p>In the last days of the Vietnam War, 17-year-old Kim is forced to work in a Saigon bar run by a notorious character known as the Engineer. There, she meets and falls in love with an American G.I. named Chris, but they are torn apart
by the fall of Saigon. For 3 years, Kim goes on an epic journey of survival to find her way back to Chris, who has no idea he’s fathered a son.</p>
<p>Don't miss this limited Broadway engagement of the new production The New Yorker calls “a dynamite Broadway revival”, and that NY1 says, “Soars to the rafters!”</p>
</div>
</div>
<div class="show-details-container show-block">
<div class="section-title">
<svg class="icon icon--info">
<use xlink:href="/assets/icons/sprite-sheet.svg#info"></use>
</svg>
<h2 id="show_details" class="title-highlight">Show Details</h2>
</div>
<div class="show-details">
<ul class="show-details__list">
<li class="show-details-list-item">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<div class="show-details-info">
<span class="title-highlight">Duration:</span>
<span class="show-details-copy">2hr 35min. (1 intermission)</span>
</div>
</li>
<li class="show-details-list-item">
<svg class="icon icon--calendar">
<use xlink:href="/assets/icons/sprite-sheet.svg#calendar"></use>
</svg>
<div class="show-details-info">
<span class="title-highlight">Dates:</span>
<span class="show-details-copy">Open Run</span>
</div>
</li>
<li class="show-details-list-item">
<svg class="icon icon--phone">
<use xlink:href="/assets/icons/sprite-sheet.svg#phone"></use>
</svg>
<div class="show-details-info">
<span class="title-highlight">Ticket Office:</span>
<span class="show-details-copy">
<a href="tel:+12122396200" class="link--phone">212-239-6200</a>
</span>
</div>
</li>
<li class="show-details-list-item">
<svg class="icon icon--map-pin">
<use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
<div class="show-details-info">
<span class="title-highlight">Location:</span>
<span class="show-details-copy">
<a href="#">Broadway Theatre</a>,
<a href="#">New York City</a>
</span>
<span class="show-details-copy">
<a href="#">View Map</a>
</span>
</div>
</li>
</ul>
</div>
</div>
</section>
<div class="show-page__block show-page__block--one-col">
<div class="discount-container show-block">
<div class="discount-info">
<div class="discount-heading heading-xlarge">
Save up to $40
</div>
<div class="discount-savings">
<div class="discount-regular">
<span class="title-highlight">Regular Price:</span>
<span class="discount-regular-copy">$104</span>
</div>
<div class="discount-offer">
<span class="title-highlight">Your Price:</span>
<span class="discount-offer-copy">$64</span>
</div>
</div>
<div class="discount-code">
Use code:
<span class="btn btn--base btn--plain">INTHM301</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets ($64+)
</button>
<div class="discounts-restrictions">
<a href="#">Conditions and Restrictions</a>
</div>
</div>
<div class="discount-details">
<div class="heading-medium">
Ticket Details
</div>
<div class="discount-details-info title-highlight title-highlight--light">Valid on Select Performances Now</div>
<div class="discount-details-prices">
<div class="discount-details-prices__info">
<div style="margin-bottom: 0.75rem; font-weight: bold;">Mondays - Thursdays</div>
<div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Select Orechestra</div>
<div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$79 – $119</strong></div>
<div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $89-129)</div>
</div>
<div class="discount-details-prices__info">
<div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Front Side Mezzanine</div>
<div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$64 – $109</strong></div>
<div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $104-129)</div>
</div>
<div class="discount-details-prices__info">
<div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Rear Mezzanine</div>
<div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$49 – $89</strong></div>
<div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $59-99)</div>
</div>
<div class="discount-details-prices__info">
<div style="margin-bottom: 0.75rem; font-weight: bold;">Fridays & Saturdays</div>
<div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Select Orechestra</div>
<div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$89 - $125</strong></div>
<div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $99-135)</div>
</div>
<div class="discount-details-prices__info">
<div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Front Side Mezzanine</div>
<div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$89 - $119</strong></div>
<div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $99-129)</div>
</div>
</div>
</div>
</div>
</div>
<section class="show-page__block show-page__block--two-col">
<div class="review-container show-block">
<div class="section-title">
<svg class="icon icon--chat">
<use xlink:href="/assets/icons/sprite-sheet.svg#chat"></use>
</svg>
<h2 id="theatermania_review" class="title-highlight">Theatermania Review</h2>
</div>
<div class="review">
<img src="/assets/images/showpage/reviewThumbSaigon.jpg" class="thumbnail" alt="Review image alt example" />
<div class="review__info">
<ul class="byline">
<li class="byline-list-item">
<a href="#">Zachary Stewart</a>
</li>
<li class="byline-list-item">
<a href="#">Broadway</a>
</li>
<li class="byline-list-item">
March 23, 2017
</li>
</ul>
<p>The popular musical about doomed love in the last days of South Vietnam returns to Broadway.</p>
<div class="read-more">
<a href="#readmore-link" class="read-more-link">
Read More
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/sprite-sheet.svg#arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="show-page-ad-block show-block">
<div class="ad-container">
<a href="#">
<picture>
<source srcset="/assets/images/ads/300x250.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/300x250.jpg" alt="Ad for Noel Coward's Present Laughter starring Kevin Kline with badge displaying NY Times Critic's Pick" />
</picture>
</a>
</div>
</div>
</section>
<section class="show-quotes">
<div class="section-title">
<svg class="icon icon--chat">
<use xlink:href="/assets/icons/sprite-sheet.svg#chat"></use>
</svg>
<h2 id="most_viewed_articles" class="title-highlight">Critic Reviews</h2>
</div>
<div class="show-page__block show-page__block--two-col">
<div class="show-quote show-block">
<blockquote>
<div class="blockquote-copy">
<p class="blockquote-quote">In the title role, Eva Noblezada makes an astonishing stage debut. At 18, she has poise, power and a superb voice throughout a wide vocal range. Backed by a cracking 16-piece band and Mick Potter’s expert sound design, she
gives the evening true passion.</p>
<footer class="blockquote-attribution">
David Benedict,
<cite>Variety</cite>
</footer>
</div>
</blockquote>
</div>
<div class="show-quote show-block">
<blockquote>
<div class="blockquote-copy">
<p class="blockquote-quote">...remnant of the bombastic, spectacle-driven, opera-meets-rock English mega-musicals that conquered Broadway in the '80s and '90s...Miss Saigon is more relevant and heartbreaking today than when it premiered on Broadway
in 1991 at the same theater.</p>
<footer class="blockquote-attribution">
Matt Windman,
<cite>amNY</cite>
</footer>
</div>
</blockquote>
</div>
</div>
</section>
<section class="show-page__block show-page__block--two-col">
<div class="cast show-block">
<div class="section-title">
<svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
<h2 id="meet_the_cast" class="title-highlight">Meet the Cast</h2>
</div>
<ul class="cast__list">
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/noblezadaEva.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Eva Noblezada</a>
<span class="cast-role">Kim</span>
</div>
</li>
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/brionesJonJon.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Jon Jon Briones</a>
<span class="cast-role">The Engineer</span>
</div>
</li>
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/brammerAlistair.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Alistair Brammer</a>
<span class="cast-role">Chris</span>
</div>
</li>
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/ilawDevin.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Devin Ilaw</a>
<span class="cast-role">Thuy</span>
</div>
</li>
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/clarkeKatieRose.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Katie Rose Clarke</a>
<span class="cast-role">Ellen</span>
</div>
</li>
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/leungDorcas.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Dorcas Leung</a>
<span class="cast-role">Gigi</span>
</div>
</li>
<li class="cast-list-item">
<a href="#">
<img class="cast-image thumbnail" src="/assets/images/showpage/christopherNicholas.jpg" alt="Cast member name alt tag" />
</a>
<div class="cast-list-info">
<a href="#">Nicholas Christopher</a>
<span class="cast-role">John</span>
</div>
</li>
</ul>
</div>
<div class="cast show-block">
<div class="section-title">
<svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
<h2 id="meet_the_crew" class="title-highlight">Meet the Crew</h2>
</div>
<ul class="cast__list">
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Claude-Michel Schonberg</a>
<span class="cast-role">Music</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Alain Boublil and Richard Maltby Jr.</a>
<span class="cast-role">Lyrics</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Alain Boublil and Claude-Michel Schonberg</a>
<span class="cast-role">Book</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Laurence Connor</a>
<span class="cast-role">Director</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Totie Driver Matt Kinley</a>
<span class="cast-role">Set Designer</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Andreane Neofitou</a>
<span class="cast-role">Costume Designer</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Bruno Poet</a>
<span class="cast-role">Lighting Designer</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">Mick Potter</a>
<span class="cast-role">Sound Designer</span>
</div>
</li>
<li class="cast-list-item">
<div class="cast-list-info">
<a href="#">William David Brohn</a>
<span class="cast-role">Orchestrations</span>
</div>
</li>
</ul>
</div>
</section>
<div class="show-page__block show-page__block--two-col">
<div class="show-page-articles show-block">
<section class="content">
<div class="section-title">
<svg class="icon icon--article">
<use xlink:href="/assets/icons/sprite-sheet.svg#article"></use>
</svg>
<h2 id="related_articles" class="title-highlight">Related Articles</h2>
</div>
<ul aria-labelledby="related_articles" class="content__list content__list--related content__list--related--show">
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/showpage/saigon1.jpg" alt="alt text placeholder" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Miss Saigon's Eva Noblezada to Make Cabaret Debut at the Green Room 42</a>
<div class="content-info">
<div>September 28, 2017</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/showpage/saigon2.jpg" alt="alt text placeholder" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Stars of Waitress, Chicago, and Miss Saigon Play TheaterMania Block Party</a>
<div class="content-info">
<div>September 11, 2017</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#video-link" class="thumbnail-video-link content-link-image">
<div class="thumbnail-overlay-container">
<svg class="icon icon--play">
<use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg>
<img src="/assets/images/showpage/saigon3.jpg" alt="alt text placeholder" class="thumbnail thumbnail--video" />
</div>
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Eva Noblezada and Rachelle Ann Go Sing 'The Movie in My Mind' From Miss Saigon</a>
<div class="content-info">
<div>September 8, 2017</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/showpage/saigon4.jpg" alt="alt text placeholder" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Eva Noblezada Joins Stars of Miss Saigon and Aladdin for Show/Swap</a>
<div class="content-info">
<div>August 15, 2017</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/showpage/saigon5.jpg" alt="alt text placeholder" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Celebrate Father's Day With the 5 Best Dads of the Broadway Season</a>
<div class="content-info">
<div>June 18, 2017</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/showpage/saigon6.jpg" alt="alt text placeholder" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Dear Evan Hansen and Hello, Dolly! Win Big at the Tony Awards</a>
<div class="content-info">
<div>June 11, 2017</div>
</div>
</div>
</li>
</ul>
</section>
<a href="#" class="btn btn--base btn--primary">All Related Articles</a>
</div>
<div class="show-page-ad-block">
<div class="ad-container">
<a href="#">
<picture>
<source srcset="/assets/images/ads/300x600.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/300x250.jpg" alt="Ad with text displaying: Need Audition Stuff? Music, monologues and more good stuff with smiling and excited woman" />
</picture>
</a>
</div>
</div>
</div>
</div>
<div class="ad-container ad-container--footer">
<a href="#">
<picture>
<source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/300x250.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
</picture>
</a>
</div>
</main>
<footer class="footer">
<div class="footer-main contain">
<div class="footer-logo">
<a href="#">
<img src="/assets/images/logos/theatermania-notag-white.svg" alt="Theatermania Logo" />
</a>
</div>
<div class="footer-nav-items">
<nav class="footer-nav">
<ul class="footer-nav__list">
<li class="nav-list-item">
<span class="nav-link-item--title">Tickets & Discounts</span>
<ul class="footer-nav__list footer-nav__list--secondary">
<li class="nav-list-item">
<a href="#" class="nav-link-item">Broadway & New York Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Chicago Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Los Angeles Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Boston Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Las Vegas Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">London Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Miami Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Philadelphia Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">San Francisco Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Seattle Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Washington, D.C. Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Minneapolis / St. Paul Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">See All Cities</a>
</li>
</ul>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">News & Reviews</a>
</li>
<li class="nav-list-item">
<span class="nav-link-item--title">Theater Clubs</span>
<ul class="footer-nav__list footer-nav__list--secondary">
<li class="nav-list-item">
<a href="#" class="nav-link-item">New York</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Boston</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">London</a>
</li>
</ul>
</li>
<li class="nav-list-item nav-list-item--newsletter">
<span class="nav-link-item--title">Newsletter</span>
<div class="nav-newsletter">
<div class="newsletter-form-container js-newsletter-form-container">
<div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
<svg class="icon icon--checkmark">
<use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
<div class="newsletter-confirmation__info">
<p>Thank you for signing up. We'll send you a welcome message shortly.</p>
<p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
</div>
</div>
<form class="newsletter-form js-newsletter-form">
<div class="newsletter-error visually-hidden js-newsletter-error">
<svg class="icon icon--error">
<use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
<span class="input-error">Please enter a valid email address.</span>
</div>
<div class="form-input">
<div class="validation js-validation">
<label for="footer-email" class="label label--required visually-hidden">Email Address</label>
<input type="email" name="email" id="footer-email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
</div>
</div>
<button class="btn btn--base btn--cta js-newsletter-btn">
Sign Up
</button>
</form>
</div>
<a href="#" class="nav-link-item nav-link-item--newsletter">Manage Email Preferences</a>
</div>
</li>
<li class="nav-list-item">
<span class="nav-link-item--title">Theatermania</span>
<ul class="footer-nav__list footer-nav__list--secondary">
<li class="nav-list-item">
<a href="#" class="nav-link-item">About Us</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Contact Us</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Jobs</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Advertising</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Submit Your Listing</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="footer-social">
<div class="social">
<ul class="social__list" aria-label="Social network profiles">
<li class="social-list-item">
<a href="#facebook-url">
<svg class="icon icon--facebook">
<use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="social-list-item">
<a href="#twitter-url">
<svg class="icon icon--twitter">
<use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="social-list-item">
<a href="#youtube-url">
<svg class="icon icon--youtube">
<use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
<span class="visually-hidden">YouTube</span>
</a>
</li>
<li class="social-list-item">
<a href="#instagram-url">
<svg class="icon icon--instagram">
<use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
<span class="visually-hidden">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-tos">
<div class="contain">
<p class="footer-tos-copy">By providing information about entertainment and cultural events on this site, TheaterMania.com shall not be deemed to endorse, recommend, approve and/or guarantee such events, or any facts, views, advice and/or information contained therein.</p>
<p class="footer-tos-copy">
©1999-2017 TheaterMania.com, Inc. All Rights Reserved.
<a href="#" class="nav-link-item">Terms of Use</a> & <a href="#" class="nav-link-item">Privacy Policy</a>
</p>
</div>
</div>
</footer>
{{render '@header' header-modifiers merge=true}}
{{render '@ad-takeover'}}
<main class="show-page{{#if takeover}} contain--takeover{{/if}}">
{{render '@show-banner'}}
<div class="show-page-container contain">
{{render '@callout' short-info-modifiers merge=true}}
<section class="show-page__block show-page__block--two-col">
{{render '@title-and-text' col-modifiers merge=true}}
{{render '@show-details' col-modifiers merge=true}}
</section>
<div class="show-page__block show-page__block--one-col">
{{render '@discounts' col-modifiers merge=true}}
</div>
<section class="show-page__block show-page__block--two-col">
{{render '@review' col-modifiers merge=true}}
<div class="show-page-ad-block show-block">
{{render '@ads--300x250'}}
</div>
</section>
<section class="show-quotes">
{{render '@section-title' quotes-modifiers merge=true}}
<div class="show-page__block show-page__block--two-col">
{{#each quote}}
<div class="show-quote show-block">
{{render '@blockquote' quote-modifiers merge=true}}
</div>
{{/each}}
</div>
</section>
<section class="show-page__block show-page__block--two-col">
{{render '@cast' col-modifiers merge=true}}
{{render '@cast' crew-modifiers merge=true}}
</section>
<div class="show-page__block show-page__block--two-col">
<div class="show-page-articles show-block">
{{render '@content-list' article-modifiers merge=true}}
<a href="#" class="btn btn--base btn--primary">{{related-link-text}}</a>
</div>
<div class="show-page-ad-block">
{{render '@ads--300x600' ad-modifiers merge=true}}
</div>
</div>
</div>
{{render '@ads--728x90' ad-modifiers-bottom merge=true}}
</main>
{{render '@footer'}}
{
"theatermania": true,
"ad-modifiers": {
"imageSmall": "300x250.jpg"
},
"ad-modifiers-bottom": {
"class": "ad-container--footer",
"imageSmall": "300x250.jpg"
},
"short-info-modifiers": {
"copy": "The epic love story of our time is sweeping audiences off their feet!",
"callout-class": "callout--text",
"class": "heading-large"
},
"col-modifiers": {
"class": "show-block"
},
"modal-modifiers": {
"class": null
},
"quotes-modifiers": {
"title": "Critic Reviews",
"icon": {
"modifier": "chat"
}
},
"quote": [
{
"quote-modifiers": {
"copy": "In the title role, Eva Noblezada makes an astonishing stage debut. At 18, she has poise, power and a superb voice throughout a wide vocal range. Backed by a cracking 16-piece band and Mick Potter’s expert sound design, she gives the evening true passion.",
"attribution": "David Benedict,",
"source": "Variety"
}
},
{
"quote-modifiers": {
"copy": "...remnant of the bombastic, spectacle-driven, opera-meets-rock English mega-musicals that conquered Broadway in the '80s and '90s...Miss Saigon is more relevant and heartbreaking today than when it premiered on Broadway in 1991 at the same theater.",
"attribution": "Matt Windman,",
"source": "amNY"
}
}
],
"article-modifiers": {
"ordered": null,
"aria-id": "related_articles",
"class": "related content__list--related--show",
"modifiers": {
"title": "Related Articles",
"aria-id": "related_articles",
"icon": {
"modifier": "article"
}
},
"article-links": [
{
"article": true,
"title": "Miss Saigon's Eva Noblezada to Make Cabaret Debut at the Green Room 42",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/showpage/saigon1.jpg",
"image-alt": "alt text placeholder"
},
"info": [
{
"copy": "September 28, 2017"
}
]
},
{
"article": true,
"title": "Stars of Waitress, Chicago, and Miss Saigon Play TheaterMania Block Party",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/showpage/saigon2.jpg",
"image-alt": "alt text placeholder"
},
"info": [
{
"copy": "September 11, 2017"
}
]
},
{
"article": true,
"title": "Eva Noblezada and Rachelle Ann Go Sing 'The Movie in My Mind' From Miss Saigon",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/showpage/saigon3.jpg",
"image-alt": "alt text placeholder"
},
"video": true,
"info": [
{
"copy": "September 8, 2017"
}
]
},
{
"article": true,
"title": "Eva Noblezada Joins Stars of Miss Saigon and Aladdin for Show/Swap",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/showpage/saigon4.jpg",
"image-alt": "alt text placeholder"
},
"info": [
{
"copy": "August 15, 2017"
}
]
},
{
"article": true,
"title": "Celebrate Father's Day With the 5 Best Dads of the Broadway Season",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/showpage/saigon5.jpg",
"image-alt": "alt text placeholder",
"class": "content-link-image"
},
"info": [
{
"copy": "June 18, 2017"
}
]
},
{
"article": true,
"title": "Dear Evan Hansen and Hello, Dolly! Win Big at the Tony Awards",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/showpage/saigon6.jpg",
"image-alt": "alt text placeholder",
"class": "content-link-image"
},
"info": [
{
"copy": "June 11, 2017"
}
]
}
]
},
"related-link-text": "All Related Articles",
"crew-modifiers": {
"class": "show-block",
"cast-modifiers": {
"title": "Meet the Crew",
"aria-id": "meet_the_crew",
"icon": {
"modifier": "star"
}
},
"cast": [
{
"image": null,
"name": "Claude-Michel Schonberg",
"role": "Music"
},
{
"image": null,
"name": "Alain Boublil and Richard Maltby Jr.",
"role": "Lyrics"
},
{
"image": null,
"name": "Alain Boublil and Claude-Michel Schonberg",
"role": "Book"
},
{
"image": null,
"name": "Laurence Connor",
"role": "Director"
},
{
"image": null,
"name": "Totie Driver Matt Kinley",
"role": "Set Designer"
},
{
"image": null,
"name": "Andreane Neofitou",
"role": "Costume Designer"
},
{
"image": null,
"name": "Bruno Poet",
"role": "Lighting Designer"
},
{
"image": null,
"name": "Mick Potter",
"role": "Sound Designer"
},
{
"image": null,
"name": "William David Brohn",
"role": "Orchestrations"
}
]
},
"takeover": true,
"header-modifiers": {
"ad": null
}
}
.show-page {
margin-top: 0;
}
.show-page__block {
display: flex;
flex-direction: column;
margin-bottom: 2.5rem;
@include breakpoint($break-large) {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
}
.btn--primary {
.show-page-articles & {
display: block;
margin: 0 auto;
max-width: 14.75rem;
@include breakpoint($break-small) {
float: right;
margin: 0.5rem 0;
}
@include breakpoint($break-large) {
float: none;
}
}
}
.icon {
.show-closed & {
width: 1.2rem;
height: 1.1rem;
font-size: $ms-neg-1;
@include breakpoint($break-medium) {
width: 1.5rem;
height: 1.4rem;
font-size: $ms-0;
stroke: $color-white;
}
}
}
.show-page-ad-block {
margin: 0 auto;
@include breakpoint($break-large) {
min-width: 18.75rem;
}
}
.ad-container {
.show-page-ad-block & {
margin: 0;
}
}
.section-title {
.show-quotes & {
margin-bottom: 0.25rem;
@include breakpoint($break-large) {
margin-bottom: 0.75rem;
}
}
}
.star-rating {
.show-page & {
order: -1;
margin-bottom: 1rem;
@include breakpoint($break-xsmall) {
align-self: flex-start;
}
@include breakpoint($break-medium) {
order: 0;
align-self: flex-end;
margin: 0 0 0 1.5rem;
}
}
}
.show-closed {
display: flex;
justify-content: center;
margin-top: 0.75rem;
@include breakpoint($break-xsmall) {
justify-content: flex-start;
}
@include breakpoint($break-small) {
margin-top: 1.25rem;
}
}
.show-closed-copy {
align-self: center;
margin-left: 0.5rem;
font-family: $font-title;
}
.icon--play {
.content__list--related--show .content-list-item .thumbnail-overlay-container & {
@include breakpoint($break-large) {
transform: translate(-50%, -50%) scale(0.4);
}
@include breakpoint($break-xlarge) {
transform: translate(-50%, -50%) scale(0.55);
}
}
.content__list--related--show .content-list-item .thumbnail-video-link:hover & {
@include breakpoint($break-large) {
transform: translate(-50%, -50%) scale(0.55);
}
@include breakpoint($break-xlarge) {
transform: translate(-50%, -50%) scale(0.7);
}
}
}
.show-block {
flex: 1;
.show-page__block--two-col & {
margin-bottom: 2.5rem;
&:last-child {
margin-bottom: 0;
}
&:nth-child(n+3) {
margin-top: 2.5rem;
margin-bottom: 0;
}
@include breakpoint($break-large) {
flex-basis: 46%;
margin: 0 4% 0 0;
&:nth-child(even),
&:last-child {
margin-right: 0;
}
}
}
&.show-page-ad-block {
flex: 0;
}
}
.content {
.show-page-articles & {
margin-top: 0;
}
}
.show-page-articles {
order: 1;
@include breakpoint($break-large) {
order: 0;
}
}
.show-page-articles + .show-page-ad-block {
margin-bottom: 2.5rem;
@include breakpoint($break-large) {
margin-bottom: 0;
}
}
blockquote {
.show-quote:last-child & {
margin-bottom: 0;
}
}
.show-quote {
padding-bottom: 0.5rem;
border-bottom: 1px solid $color-border;
&:last-child {
padding-bottom: 0;
border: none;
}
.show-page__block--two-col & {
margin-bottom: 1rem;
}
blockquote {
margin-bottom: 1.25rem;
}
@include breakpoint($break-large) {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
&:nth-child(n+3) {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid $color-border;
blockquote {
margin-bottom: 0;
}
}
.show-page__block--two-col & {
margin-bottom: 0;
}
}
}
For client styling recommendations on the Ticket Details section, please see the Notes under the Discounts Pattern.
On Low Content versions, ads stack below desktop sizes. We are discussing reducing the number of ads in low content pages per the Guide Page. So, TODO: Remove the 300x250 ad if this approach is adopted, or adjust flex order for ad container if not.