<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/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>
<main class="main contain">
<article class="article-content">
<a href="#" class="category title-highlight">Theater News</a>
<h1 class="heading-xlarge">Leslie Odom Jr. to Join Phil Collins for US Open Performance</h1>
<h2 class="subtitle">Odom will take the stage at the annual tennis match.</h2>
<ul class="byline">
<li class="byline-list-item">
<a href="#">Editorial Staff</a>
</li>
<li class="byline-list-item">
<a href="#">Off-Broadway</a>
</li>
<li class="byline-list-item">
April 12, 2017
</li>
</ul>
<figure>
<img src="/assets/images/articles/articleLead.jpg" alt="Portrait of actor" class="lead-image" />
<figcaption>
Pellentesque at ex eu felis ullamcorper porta aliquam.
<span class="image-attribution">© John Photographer</span>
</figcaption>
</figure>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. <a href="#">In enim justo, rhoncus ut, imperdiet a, venenatis vitae</a>, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam
sit amet orci eget eros faucibus tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>
<div class="show-console">
<div class="section-title">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<h2 class="title-highlight">Featured in this Story</h2>
</div>
<div class="show-console__show">
<div class="show-console-image">
<a href="#"><img src="/assets/images/articles/showCard1.jpg" class="thumbnail" alt="Hamliton promo poster - Hamliton standing on black star with golden rough metal as background" /></a>
</div>
<div class="show-console-info">
<a href="#" class="show-console-play">Hamilton</a>
<div class="show-console-location">
<a href="#" class="show-console-theater">Richard Rodgers Theatre</a>
<span class="show-console-text-divider">| </span>
<span>New York City</span>
</div>
<p class="show-console-copy">
<span class="show-console-genre">
Musical,
Broadway Hit,
History
</span>
<span class="show-console-text-divider">| </span>
<span class="show-console-date">Closes July 18, 2017</span>
</p>
<button class="btn btn--base btn--cta">
Buy Tickets ($65+)
</button>
<span class="show-console-fees">
<strong>Theatermania is not a broker and does not mark up ticket prices in any way.</strong>
</span>
</div>
</div>
</div>
</article>
<div class="aside">
<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>
</main>
<div class="related-content contain">
<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">
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/articles/related1.jpg" alt="Patti LuPone smiling in front of awards banner" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Patti LuPone and Seth Rudetsky to Team Up for Deconstructing Patti Concert</a>
<div class="content-info">
<div>Theater News</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/articles/related2.jpg" alt="Children on stage in school uniforms performing a routine" class="thumbnail thumbnail--video" />
</div>
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">School of Rock Becomes a Broadway Hit</a>
<div class="content-info">
<div>Theater News</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/articles/related3.jpg" alt="Actor Matt de Rogatis in denim jacket and trucker hat drinking a Lone Star beer" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">James McLure's Lone Star Finds Its Way Back to New York</a>
<div class="content-info">
<div>Interviews</div>
</div>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/articles/related4.jpg" alt="Actors perform a young couple sitting on a couch holding hands" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Arlington: Enda Walsh fuses drama and dance in a dystopian work of art at St. Ann's Warehouse.</a>
<div class="content-info">
<div>Reviews</div>
</div>
</div>
</li>
</ul>
</section>
<div class="related-content__tags">
<div class="tag-block">
<div class="section-title">
<svg class="icon icon--link">
<use xlink:href="/assets/icons/sprite-sheet.svg#link"></use>
</svg>
<h2 id="related_content_tags" class="title-highlight">Discover Tagged Content</h2>
</div>
<div class="tags">
<ul class="tags__list" aria-labelledby="related_content_tags">
<li class="tags-list-item">
<a href="#" class="btn btn--base btn--plain">Lorem Ipsum</a>
</li>
<li class="tags-list-item">
</li>
<li class="tags-list-item">
</li>
<li class="tags-list-item">
</li>
<li class="tags-list-item">
</li>
<li class="tags-list-item">
</li>
<li class="tags-list-item">
</li>
<li class="tags-list-item">
</li>
</ul>
</div>
</div>
<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 class="content">
<div class="section-title">
<svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
<h2 id="most_viewed_articles" class="title-highlight">Most Viewed Articles</h2>
</div>
<ol aria-labelledby="most_viewed_articles" class="content__list content__list--related">
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/articles/mostViewed1Small.jpg" alt="placeholder alt" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Lesli Margherita to Star in World Premiere of Who's Holiday!</a>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/articles/mostViewed2Small.jpg" alt="Actor holding a straight razor while actress looks on in a dimly lit room" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Attend the Tale of Norm Lewis and Carolee Carmello in Sweeney Todd</a>
</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/articles/mostViewed3Small.jpg" alt="Small leaf growing from tree trunk on a stage with theater seats in background" class="thumbnail thumbnail--video" />
</div>
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">A Tree Grows on Broadway: Come From Away and the Cutting Edge of Green Set Design</a>
</div>
</li>
<li class="content-list-item">
<a href="#article-link" class="content-link-image">
<img src="/assets/images/articles/mostViewed4Small.jpg" alt="Actors perform a young couple sitting on a couch holding hands" class="thumbnail" />
</a>
<div class="content-list-info">
<a href="#" class="content-link-title">Ben Platt, Rachel Bay Jones, and More Top 2017 Lucille Lortel Award Winners List</a>
</div>
</li>
</ol>
</section>
</div>
<div class="ad-mobile-adhesion js-ad-mobile-adhesion">
<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>
<div class="ad-container">
<a href="#">
<picture>
<source srcset="/assets/images/ads/320x50.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/320x50.jpg" alt="Text ad for Dear Evan Hansen, a new musical on a blue background" />
</picture>
</a>
</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>
<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'}}
<main class="main contain">
<article class="article-content">
{{render '@category'}}
<h1 class="heading-xlarge">{{title}}</h1>
<h2 class="subtitle">{{subtitle}}</h2>
{{render '@byline'}}
{{render '@figure'}}
{{render '@body'}}
{{render '@large-show-console'}}
</article>
<div class="aside">
{{render '@ads--300x600' ad-modifiers merge=true}}
</div>
</main>
<div class="related-content contain">
{{render '@content-list' related-modifiers merge=true}}
<div class="related-content__tags">
{{render '@tag-block'}}
{{render '@ads--300x250'}}
</div>
{{render '@content-list' viewed-modifiers merge=true}}
</div>
{{render '@mobile-adhesion'}}
{{render '@ads--728x90' ad-modifiers-bottom merge=true}}
{{render '@footer'}}
{
"title": "Leslie Odom Jr. to Join Phil Collins for US Open Performance",
"subtitle": "Odom will take the stage at the annual tennis match.",
"ad-modifiers": {
"imageSmall": "300x250.jpg"
},
"ad-modifiers-bottom": {
"class": "ad-container--footer",
"imageSmall": "300x250.jpg"
},
"viewed-modifiers": {
"ordered": true
},
"related-modifiers": {
"title": "Related Articles",
"aria-id": "related_articles",
"ordered": null,
"class": "related",
"modifiers": {
"title": "Related Articles",
"aria-id": "related_articles",
"icon": {
"modifier": "article"
}
},
"article-links": [
{
"article": true,
"title": "Patti LuPone and Seth Rudetsky to Team Up for Deconstructing Patti Concert",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/articles/related1.jpg",
"image-alt": "Patti LuPone smiling in front of awards banner"
},
"info": [
{
"copy": "Theater News"
}
]
},
{
"article": true,
"title": "School of Rock Becomes a Broadway Hit",
"video": true,
"modifiers": {
"picture": null,
"image": "/assets/images/articles/related2.jpg",
"image-alt": "Children on stage in school uniforms performing a routine"
},
"info": [
{
"copy": "Theater News"
}
]
},
{
"article": true,
"title": "James McLure's Lone Star Finds Its Way Back to New York",
"video": null,
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/articles/related3.jpg",
"image-alt": "Actor Matt de Rogatis in denim jacket and trucker hat drinking a Lone Star beer"
},
"info": [
{
"copy": "Interviews"
}
]
},
{
"article": true,
"title": "Arlington: Enda Walsh fuses drama and dance in a dystopian work of art at St. Ann's Warehouse.",
"thumbnail": true,
"modifiers": {
"picture": null,
"image": "/assets/images/articles/related4.jpg",
"image-alt": "Actors perform a young couple sitting on a couch holding hands"
},
"info": [
{
"copy": "Reviews"
}
]
},
{
"article": null
}
]
}
}
.main {
display: flex;
flex-direction: column;
margin-top: 1.5rem;
@include breakpoint($break-large) {
flex-direction: row;
}
}
.article-content {
@include breakpoint($break-medium) {
margin: 0 auto;
max-width: 48rem;
}
@include breakpoint($break-large) {
flex: 0 1 calc(100% - 18.75rem);
max-width: none;
}
}
.category {
.article-content & {
display: inline-block;
margin-bottom: 0.75rem;
}
}
.article-content__sub {
display: flex;
flex-direction: column;
@include breakpoint($break-xsmall) {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
}
.subtitle {
.article-content__sub & {
margin: 0 0 1rem;
@include breakpoint($break-xsmall) {
flex: 0 1 67%;
margin-bottom: 1.44rem;
}
}
}
.star-rating {
.article-content__sub & {
margin-bottom: 0.75rem;
@include breakpoint($break-xsmall) {
margin: 0.13rem 0 0;
}
}
}
.aside {
@include breakpoint($break-large) {
flex: 0 1 calc(18.75rem + 4%);
}
}
.ad-container {
.main & {
margin: 2rem 0;
}
.aside & {
margin: 0 0 2rem;
@include breakpoint($break-large) {
justify-content: flex-end;
}
}
.related-content__tags & {
margin: 0 0 2.5rem;
@include breakpoint($break-medium) {
flex: 1 0 calc(18.75rem + 4%);
justify-content: flex-end;
}
}
}
.multiple-console-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 1.25rem;
@include breakpoint($break-medium) {
justify-content: space-between;
margin: 1.25rem auto 0;
max-width: 31.75rem;
}
@include breakpoint($break-large) {
max-width: 38.75rem;
}
}
.related-content__tags {
@include breakpoint($break-medium) {
display: flex;
justify-content: space-between;
}
}
.tag-block {
.related-content__tags & {
margin-bottom: 1rem;
@include breakpoint($break-medium) {
flex: 0 1 calc(100% - 18.75rem);
}
}
}
The only functional difference in article pages for WhatsOnStage is the possible inclusion of star ratings and date formatting.