<div class="overlay js-overlay"></div>
<div class="header-container js-header-container">
<div class="header-ad">
<div class="ad-container">
<a href="#">
<picture>
<source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/300x50.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
</picture>
</a>
</div>
</div>
<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/whatsonstage.svg" alt="What's on Stage 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 js-btn-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>
</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">London</h2>
</div>
<ul class="header-nav__sublist">
<li class="nav-list-item">
<a href="#" class="nav-link-item">West End</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Off West End</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">All London</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">Bath</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Birmingham</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Bristol</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Chichester</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Dublin</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Edinburgh</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Glasgow</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Leeds</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Liverpool</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Manchester</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Oxford</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Stratford-Upon-Avon</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 js-btn-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>
</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">West End, Off-West End, Special Events, Film 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/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>
<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>
</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 js-btn-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>
</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">Sign up for our Newsletter</h2>
</div>
</li>
<li class="nav-list-item nav-list-item--newsletter">
<div class="nav-newsletter">
<p class="newsletter-copy js-newsletter-copy">Be alerted when your favorite show goes on sale and keep up to date with the latest theater news.</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>
<main class="show-page show-page--wos">
<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">Prince of Wales Theatre</a>, <a href="#" class="show-banner-location-info">London</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">Comedy</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">
Buy Tickets
</button>
<div class="star-rating star-rating--large star-rating--plain js-star-rating" aria-labelledby="show_rating">
<div class="star-container">
<span class="star-mask">
<span class="star"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</span>
<span class="star star--gray"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</div>
<div class="star-container">
<span class="star-mask">
<span class="star"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</span>
<span class="star star--gray"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</div>
<div class="star-container">
<span class="star-mask">
<span class="star"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</span>
<span class="star star--gray"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</div>
<div class="star-container">
<span class="star-mask">
<span class="star star"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</span>
<span class="star star--gray"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</div>
<div class="star-container">
<span class="star star--gray"><svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg></span>
</div>
<span id="show_rating" class="visually-hidden">4 out of 5 stars</span>
</div>
</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:+448444825115" class="link--phone">0844 482 5115</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="#">Prince of Wales Theatre</a>,
<a href="#">London</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>
<button class="btn btn--base btn--primary">
Buy Tickets
</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: #D62027; 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: #D62027; 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: #D62027; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>£49 - £89</strong></div>
<div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. £99-135)</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="whatsonstage_review" class="title-highlight">WhatsOnStage 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">
23 March 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-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_creatives" class="title-highlight">Meet the Creatives</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>28 September 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>11 September 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>8 September 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>15 August 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>18 June 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>11 June 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/whatsonstage.svg" alt="What's on Stage 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">London Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Dublin Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Glasgow Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Bath Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Birmingham Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Chichester Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Edinburgh Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Leeds Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Liverpool Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Manchester Theater</a>
</li>
<li class="nav-list-item">
<a href="#" class="nav-link-item">Stratford-Upon-Avon 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">London</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">New York</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">WhatsOnStage</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, WhatsOnStage.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 WhatsOnStage.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--wos'}}
<main class="show-page show-page--wos">
{{render '@show-banner' banner-modifiers merge=true}}
<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' details-modifiers merge=true}}
</section>
<div class="show-page__block show-page__block--one-col">
{{render '@discounts' discounts-modifiers}}
</div>
<section class="show-page__block show-page__block--two-col">
{{render '@review' review-modifiers merge=true}}
<div class="show-page-ad-block show-block">
{{render '@ads--300x250'}}
</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--wos'}}
{
"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": "28 September 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": "11 September 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": "8 September 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": "15 August 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": "18 June 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": "11 June 2017"
}
]
}
]
},
"related-link-text": "All Related Articles",
"crew-modifiers": {
"class": "show-block",
"cast-modifiers": {
"title": "Meet the Creatives",
"aria-id": "meet_the_creatives",
"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"
}
]
},
"banner-modifiers": {
"wos": true,
"theatermania": null,
"theater": "Prince of Wales Theatre",
"theater-city": "London",
"genres": true,
"tags-modifier": {
"tags": [
{
"tags": true,
"item": "Comedy"
},
{
"tags": null
},
{
"tags": null
}
]
},
"ticket-buttons": [
{
"button": true,
"cta": true,
"modifiers": {
"buttonValue": "Buy Tickets",
"class": null
}
},
{
"button": null
}
],
"star-rating": true,
"star-modifier": {
"modifier": "large star-rating--plain"
}
},
"discounts-modifiers": {
"class": "show-block",
"discount": {
"savings": "Save up to £40",
"code": null,
"regular-title": "Regular Price:",
"regular": "£104",
"offer-title": "Your Price:",
"offer": "£64",
"restrictions": "Conditions and Restrictions",
"details-heading": "Ticket Details",
"discount-button": {
"buttonValue": "Buy Tickets"
},
"details-info": "Valid on Select Performances Now",
"details": [
{
"info": "Mondays - Thursdays",
"section": "Select Orechestra",
"price": "£79 - £119",
"color": "#D62027;",
"regular": "(Reg. £89-129)"
},
{
"section": "Front Side Mezzanine",
"price": "£64 - £109",
"color": "#D62027;",
"regular": "(Reg. £104-129)"
},
{
"section": "Rear Mezzanine",
"price": "£49 - £89",
"color": "#D62027;",
"regular": "(Reg. £99-135)"
}
]
}
},
"details-modifiers": {
"class": "show-block",
"show-info": [
{
"info": [
{
"copy": "2hr 35min. (1 intermission)"
}
],
"title": "Duration:",
"icon-modifiers": {
"modifier": "clock"
}
},
{
"info": [
{
"copy": "Open Run"
}
],
"title": "Dates:",
"icon-modifiers": {
"modifier": "calendar"
}
},
{
"info": [
{
"telephone": "+448444825115",
"copy": "0844 482 5115"
}
],
"title": "Ticket Office:",
"icon-modifiers": {
"modifier": "phone"
}
},
{
"info": [
{
"copy": "Prince of Wales Theatre",
"city": "London"
},
{
"copy": "View Map"
}
],
"title": "Location:",
"link": true,
"icon-modifiers": {
"modifier": "map-pin"
}
}
]
},
"review-modifiers": {
"class": "show-block",
"review": {
"title-modifiers": {
"title": "WhatsOnStage Review",
"aria-id": "whatsonstage_review",
"icon": {
"modifier": "chat"
}
},
"byline-modifiers": {
"byline-item": [
{
"item": "Zachary Stewart",
"link": true
},
{
"item": "Broadway",
"link": true
},
{
"item": "23 March 2017"
}
]
}
}
},
"cast-modifiers": {
"cast": [
{
"image": null,
"name": "Nic Rouleau",
"role": "Elder Price"
},
{
"image": null,
"name": "Brian Sears",
"role": "Elder Cunningham"
},
{
"image": null,
"name": "Kim Exum",
"role": "Nabulungi"
},
{
"image": null,
"name": "Stephen Ashfield",
"role": "Elder McKinley"
},
{
"image": null,
"name": "Billy Eugene Jones",
"role": "Mafala Hatimbi"
},
{
"image": null,
"name": "Lewis Cleale",
"role": "Joesph Smith"
},
{
"image": null,
"name": "Derrick Williams",
"role": "General"
},
{
"image": null,
"name": "J. Casey Barrett",
"role": "Ensemble"
},
{
"image": null,
"name": "Tallia Brinson",
"role": "Ensemble"
}
]
}
}
.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.