<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>
<div class="text-banner">
<div class="text-banner__info contain">
<div class="text-banner__info--copy">
<h1 class="heading-xlarge">New York City Shows & Tickets</h1>
<div class="text-banner-text-container">
<p class="text-banner-info-text">Here is a where a couple sentences will be to describe booking tickets at great prices. Enjoy everything at the best deals. Cum sociis natoque penatibus et magnis lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="text-banner__image">
<div class="banner">
<img src="/assets/images/guidepage/banner2.jpg" alt="image-alt" class="banner-image" />
</div>
</div>
</div>
<div class="guide-page contain">
<div class="show-filter js-show-filter">
<section class="show-filter__btns">
<div class="section-title">
<svg class="icon icon--filter">
<use xlink:href="/assets/icons/sprite-sheet.svg#filter"></use>
</svg>
<h2 id="filter_shows" class="title-highlight">Filter Shows By</h2>
</div>
<div class="show-filter-btn js-show-filter-btn">
<button class="btn btn--base btn--plain filter-btn js-filter-btn">
<svg class="icon icon--calendar">
<use xlink:href="/assets/icons/sprite-sheet.svg#calendar"></use>
</svg>
<span class="title-highlight">Date</span>
<svg class="icon icon--arrow-bottom">
<use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
</button>
<div class="show-filter__filters js-filter js-tabIndex" aria-hidden="true" tabindex="-1">
<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 Filter</span>
</button>
<div class="section-title">
<svg class="icon icon--calendar">
<use xlink:href="/assets/icons/sprite-sheet.svg#calendar"></use>
</svg>
<h2 class="title-highlight">Select Dates</h2>
</div>
<div class="date-filters js-tabIndex" tabindex="-1">
<div class="date-filters__user">
<div class="date-filters__pickers">
<div class="form-input">
<div class="validation js-validation">
<label for="from_date" class="label">From</label>
<input type="text" name="text-not-required" id="from_date" class="input validation-item" placeholder="Start Date">
</div>
</div>
<div class="form-input">
<div class="validation js-validation">
<label for="to_date" class="label">To</label>
<input type="text" name="text-not-required" id="to_date" class="input validation-item" placeholder="End Date">
</div>
</div>
</div>
<ul class="show-filter__list js-tabIndex" aria-label="Show Dates" tabindex="-1">
<li class="show-filter-list-item show-filter-list-item--full js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="playing-all" name="playing" class="radio validation" checked>
<div class="radio-label-container">
<label for="playing-all" class="label label--radio">All Shows</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item show-filter-list-item--full js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="playing-now" name="playing" class="radio validation">
<div class="radio-label-container">
<label for="playing-now" class="label label--radio">Playing Now</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item show-filter-list-item--full js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="playing-soon" name="playing" class="radio validation">
<div class="radio-label-container">
<label for="playing-soon" class="label label--radio">Playing Soon</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item show-filter-list-item--full js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="closing-soon" name="playing" class="radio validation">
<div class="radio-label-container">
<label for="closing-soon" class="label label--radio">Closing Soon</label>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="date-picker">
<div class="DayPicker" role="application" lang="en">
<div class="DayPicker-wrapper" tabindex="0">
<div class="DayPicker-NavBar">
<span tabindex="0" role="button" aria-label="Previous Month" class="DayPicker-NavButton DayPicker-NavButton--prev"></span>
<span tabindex="0" role="button" aria-label="Next Month" class="DayPicker-NavButton DayPicker-NavButton--next"></span>
</div>
<div class="DayPicker-Month" role="grid">
<div class="DayPicker-Caption" role="heading">
<div>July 2017</div>
</div>
<div class="DayPicker-Weekdays" role="rowgroup">
<div class="DayPicker-WeekdaysRow" role="row">
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Sunday">Su</abbr>
</div>
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Monday">Mo</abbr>
</div>
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Tuesday">Tu</abbr>
</div>
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Wednesday">We</abbr>
</div>
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Thursday">Th</abbr>
</div>
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Friday">Fr</abbr>
</div>
<div class="DayPicker-Weekday" role="columnheader">
<abbr title="Saturday">Sa</abbr>
</div>
</div>
</div>
<div class="DayPicker-Body" role="rowgroup">
<div class="DayPicker-Week" role="row">
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div class="DayPicker-Day" tabindex="0" role="gridcell" aria-label="Sat Jul 01 2017" aria-disabled="false" aria-selected="false">1</div>
</div>
<div class="DayPicker-Week" role="row">
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 02 2017" aria-disabled="false" aria-selected="false">2</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 03 2017" aria-disabled="false" aria-selected="false">3</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 04 2017" aria-disabled="false" aria-selected="false">4</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 05 2017" aria-disabled="false" aria-selected="false">5</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 06 2017" aria-disabled="false" aria-selected="false">6</div>
<div class="DayPicker-Day DayPicker-Day--today" tabindex="-1" role="gridcell" aria-label="Fri Jul 07 2017" aria-disabled="false" aria-selected="false">7</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 08 2017" aria-disabled="false" aria-selected="false">8</div>
</div>
<div class="DayPicker-Week" role="row">
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 09 2017" aria-disabled="false" aria-selected="false">9</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 10 2017" aria-disabled="false" aria-selected="false">10</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 11 2017" aria-disabled="false" aria-selected="false">11</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 12 2017" aria-disabled="false" aria-selected="false">12</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 13 2017" aria-disabled="false" aria-selected="false">13</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 14 2017" aria-disabled="false" aria-selected="false">14</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 15 2017" aria-disabled="false" aria-selected="false">15</div>
</div>
<div class="DayPicker-Week" role="row">
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 16 2017" aria-disabled="false" aria-selected="false">16</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 17 2017" aria-disabled="false" aria-selected="false">17</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 18 2017" aria-disabled="false" aria-selected="false">18</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 19 2017" aria-disabled="false" aria-selected="false">19</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 20 2017" aria-disabled="false" aria-selected="false">20</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 21 2017" aria-disabled="false" aria-selected="false">21</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 22 2017" aria-disabled="false" aria-selected="false">22</div>
</div>
<div class="DayPicker-Week" role="row">
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 23 2017" aria-disabled="false" aria-selected="false">23</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 24 2017" aria-disabled="false" aria-selected="false">24</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 25 2017" aria-disabled="false" aria-selected="false">25</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 26 2017" aria-disabled="false" aria-selected="false">26</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 27 2017" aria-disabled="false" aria-selected="false">27</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 28 2017" aria-disabled="false" aria-selected="false">28</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 29 2017" aria-disabled="false" aria-selected="false">29</div>
</div>
<div class="DayPicker-Week" role="row">
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 30 2017" aria-disabled="false" aria-selected="false">30</div>
<div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 31 2017" aria-disabled="false" aria-selected="false">31</div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
<div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn--base btn--primary show-filter-apply">
Apply
</button>
</div>
</div>
<div class="show-filter-btn js-show-filter-btn">
<button class="btn btn--base btn--plain filter-btn js-filter-btn">
<svg class="icon icon--sort">
<use xlink:href="/assets/icons/sprite-sheet.svg#sort"></use>
</svg>
<span class="title-highlight">Show Type</span>
<svg class="icon icon--arrow-bottom">
<use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
</button>
<div class="show-filter__filters js-filter js-tabIndex" aria-hidden="true" tabindex="-1">
<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 Filter</span>
</button>
<div class="section-title">
<svg class="icon icon--map-pin">
<use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
<h2 id="area" class="title-highlight">Area</h2>
</div>
<ul class="show-filter__list js-tabIndex" aria-labelledby="area" tabindex="-1">
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="all-nyc" name="location" class="radio validation" checked>
<div class="radio-label-container">
<label for="all-nyc" class="label label--radio">All NYC Shows (157)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="broadway" name="location" class="radio validation">
<div class="radio-label-container">
<label for="broadway" class="label label--radio">Broadway (112)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="off-broadway" name="location" class="radio validation">
<div class="radio-label-container">
<label for="off-broadway" class="label label--radio">Off-Broadway (32)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="off-off-broadway" name="location" class="radio validation">
<div class="radio-label-container">
<label for="off-off-broadway" class="label label--radio">Off-Off-Broadway (13)</label>
</div>
</div>
</div>
</li>
</ul>
<div class="section-title">
<svg class="icon icon--sort">
<use xlink:href="/assets/icons/sprite-sheet.svg#sort"></use>
</svg>
<h2 id="genre" class="title-highlight">Genre</h2>
</div>
<ul class="show-filter__list js-tabIndex" aria-labelledby="genre" tabindex="-1">
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="all-genres" name="genre" class="radio validation" checked>
<div class="radio-label-container">
<label for="all-genres" class="label label--radio">All Genres</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="benefit" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="benefit" class="label label--radio">Benefit (1)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="cabaret" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="cabaret" class="label label--radio">Cabaret (2)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="comedy" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="comedy" class="label label--radio">Comedy (5)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="drama" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="drama" class="label label--radio">Drama (20)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="family-kids" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="family-kids" class="label label--radio">Family (10)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="festival" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="festival" class="label label--radio">Festival (2)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="magic-show" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="magic-show" class="label label--radio">Magic Show (1)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="musical" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="musical" class="label label--radio">Musical (30)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="mature" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="mature" class="label label--radio">Mature (5)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="opera" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="opera" class="label label--radio">Opera (3)</label>
</div>
</div>
</div>
</li>
<li class="show-filter-list-item js-tabIndex" tabindex="-1">
<div class="form-input">
<div class="validation validation--radio">
<input type="radio" id="play" name="genre" class="radio validation">
<div class="radio-label-container">
<label for="play" class="label label--radio">Play (42)</label>
</div>
</div>
</div>
</li>
</ul>
<button class="btn btn--base btn--primary show-filter-apply">
Apply
</button>
</div>
</div>
<div class="show-filter-btn js-show-filter-btn">
<button class="btn btn--base btn--plain filter-btn">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="title-highlight">Discount Tickets</span>
</button>
</div>
</section>
</div>
<div class="featured-shows">
<ul class="show-listing show-listing--featured">
<li class="show-listing-item show-listing-item--featured">
<div class="section-title">
<svg class="icon icon--star">
<use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
<h2 class="title-highlight">Featured Show</h2>
</div>
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="show-image-featured" src="/assets/images/guidepage/missSaigon2.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Miss Saigon</a>
<p class="show-description">An epic love story set in the last days of the Vietnam War.</p>
</div>
<div class="show-button">
</div>
</div>
</li>
<li class="show-listing-item show-listing-item--featured">
<div class="section-title">
<svg class="icon icon--calendar">
<use xlink:href="/assets/icons/sprite-sheet.svg#calendar"></use>
</svg>
<h2 class="title-highlight">Featured Event</h2>
</div>
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="show-image-featured" src="/assets/images/guidepage/fringeFestival.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">The Broadway Fringe Festival</a>
<p class="show-description">Join the fun and see over 150 plays, musicals and improv comedy all over Broadway!</p>
</div>
<div class="show-button">
</div>
</div>
</li>
</ul>
</div>
<section class="show-listing-container">
<div class="section-title">
<svg class="icon icon--info">
<use xlink:href="/assets/icons/sprite-sheet.svg#info"></use>
</svg>
<h2 class="title-highlight">Shows</h2>
</div>
<ul class="show-listing">
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/1984.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">1984</a>
<div class="show-details">
<a href="#" class="show-details-item">Hudson Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Drama
</li>
<li class="tags-list-item tags-list-item--text">
Play
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($35+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/aladdin.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Aladdin</a>
<div class="show-details">
<a href="#" class="show-details-item">New Amsterdam Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Family
</li>
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($50+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/anastasia.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Anastasia</a>
<div class="show-details">
<a href="#" class="show-details-item">Broadhurst Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Drama
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($69+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/bandsvisit.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">The Band's Visit</a>
<div class="show-details">
<a href="#" class="show-details-item">Ethel Barrymore Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<div class="show-notice">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="show-notice-item">Save 55%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/bandstand.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Bandstand</a>
<div class="show-details">
<a href="#" class="show-details-item">Bernard B. Jacobs Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($59+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/beautiful.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Beautiful: The Carole King Musical</a>
<div class="show-details">
<a href="#" class="show-details-item">Stephen Sondheim Theatre</a>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($59+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/bom.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">The Book of Mormon</a>
<div class="show-details">
<a href="#" class="show-details-item">Eugene O'Neill Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Comedy
</li>
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($69+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/bronxtale.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">A Bronx Tale - The Musical</a>
<div class="show-details">
<a href="#" class="show-details-item">Longacre Theatre</a>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($45+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/cats.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Cats</a>
<div class="show-details">
<a href="#" class="show-details-item">Neil Simon Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Play
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<div class="show-notice">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="show-notice-item">Save 35%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/charliechocolate.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Charlie and the Chocolate Factory</a>
<div class="show-details">
<a href="#" class="show-details-item">Lunt-Fontanne Theatre</a>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($69+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/chicago.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Chicago</a>
<div class="show-details">
<a href="#" class="show-details-item">Ambassador Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<div class="show-notice">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="show-notice-item">Save 60%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/comefromaway.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Come From Away</a>
<div class="show-details">
<a href="#" class="show-details-item">Schoenfeld Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Play
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($47+)
</button>
</div>
</div>
</li>
</ul>
<div class="show-listing-item-ad">
<div class="ad-container">
<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>
</div>
<ul class="show-listing">
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/dearevanhansen.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Dear Evan Hansen</a>
<div class="show-details">
<a href="#" class="show-details-item">Music Box Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Comedy
</li>
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($49+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/dollshouse.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">A Doll's House, Part 2</a>
<div class="show-details">
<a href="#" class="show-details-item">John Golden Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($39+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/escapemargaritaville.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Escape to Margaritaville</a>
<div class="show-details">
<a href="#" class="show-details-item">Marquis Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Previews Febuary 16, 2018</span>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base" disabled>
On Sale Soon
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/farinelli.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Farinelli and the King</a>
<div class="show-details">
<a href="#" class="show-details-item">Belasco Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Previews December 5, 2017</span>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base" disabled>
On Sale Soon
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/greatcomet.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">The Great Comet</a>
<div class="show-details">
<a href="#" class="show-details-item">Imperial Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Comedy
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($59+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/groundhog.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Groundhog Day</a>
<div class="show-details">
<a href="#" class="show-details-item">August Wilson Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Opens April 22, 2018</span>
</div>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Comedy
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base" disabled>
On Sale Soon
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/hamilton.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Hamilton</a>
<div class="show-details">
<a href="#" class="show-details-item">Richard Rodgers Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Drama
</li>
<li class="tags-list-item tags-list-item--text">
Musical
</li>
<li class="tags-list-item tags-list-item--text">
Mature
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($65+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/harrypotter.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Harry Potter and the Cursed Child</a>
<div class="show-details">
<a href="#" class="show-details-item">Lyric Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Previews September 14, 2017</span>
</div>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Family
</li>
<li class="tags-list-item tags-list-item--text">
Play
</li>
<li class="tags-list-item tags-list-item--text">
Comedy
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<div class="show-notice">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="show-notice-item">Save 60%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/hellodolly.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Hello Dolly</a>
<div class="show-details">
<a href="#" class="show-details-item">Shubert Theatre</a>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($59+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/indecent.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Indecent</a>
<div class="show-details">
<a href="#" class="show-details-item">Cort Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Closes June 25, 2017</span>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($39+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/junk.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Junk</a>
<div class="show-details">
<a href="#" class="show-details-item">Vivian Beaumont Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Previews September 14, 2017</span>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base" disabled>
On Sale Soon
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/kinkyboots.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Kinky Boots</a>
<div class="show-details">
<a href="#" class="show-details-item">Al Hirschfeld Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($55+)
</button>
</div>
</div>
</li>
</ul>
<div class="show-listing-item-ad">
<div class="ad-container">
<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>
</div>
<ul class="show-listing">
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/littlefoxes.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Lillian Hellman's The Little Foxes</a>
<div class="show-details">
<a href="#" class="show-details-item">Samuel J. Friedman Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Closes July 2, 2017</span>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($70+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/lionking.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">The Lion King</a>
<div class="show-details">
<a href="#" class="show-details-item">Minskoff Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Family
</li>
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($50+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/marvinsroom.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Marvin's Room</a>
<div class="show-details">
<a href="#" class="show-details-item">American Airlines Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">In Previews. Opens June 29, 2017</span>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($79+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/missSaigon.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Miss Saigon</a>
<div class="show-details">
<a href="#" class="show-details-item">Boradway Theatre</a>
<div class="show-details-date">
<svg class="icon icon--clock">
<use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
<span class="show-details-item show-details-item--date">Closes January 13, 2018</span>
</div>
</div>
</div>
<div class="show-button">
<div class="show-notice">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="show-notice-item">Save 35%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/waitress.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Waitress</a>
<div class="show-details">
<a href="#" class="show-details-item">Brooks Atkinson Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Comedy
</li>
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($67+)
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/warpaint.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">War Paint</a>
<div class="show-details">
<a href="#" class="show-details-item">Nederlander Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Drama
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<div class="show-notice">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
<span class="show-notice-item">Save 45%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</button>
</div>
</div>
</li>
<li class="show-listing-item">
<div class="show-listing-show">
<a class="show-image" href="#">
<img class="thumbnail" src="/assets/images/guidepage/wicked.jpg" alt="Example alt" />
</a>
<div class="show-info">
<a class="show-title" href="#">Wicked</a>
<div class="show-details">
<a href="#" class="show-details-item">Gershwin Theatre</a>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item tags-list-item--text">
Musical
</li>
</ul>
</div>
</div>
</div>
<div class="show-button">
<button class="btn btn--base btn--cta">
Buy Tickets ($79+)
</button>
</div>
</div>
</li>
</ul>
</section>
</div>
</main>
<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>
{{render '@text-banner'}}
<div class="guide-page{{#if class}} guide-page--{{class}}{{/if}} contain">
<div class="show-filter js-show-filter">
<section class="show-filter__btns">
{{render '@section-title' filter-title-modifiers merge=true}}
{{#each filter-buttons}}
{{render '@show-filter' filter-modifiers merge=true}}
{{/each}}
</section>
</div>
{{#if featured-show}}
<div class="featured-shows">
<ul class="show-listing show-listing--featured">
{{#each featured-show}}
<li class="show-listing-item show-listing-item--featured">
{{render '@show-listing' featured-modifiers merge=true}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
<section class="show-listing-container">
{{render '@section-title' show-title-modifiers merge=true}}
<ul class="show-listing">
{{#each show}}
{{#if ad}}
</ul>
<div class="show-listing-item-ad">
{{render '@ads--728x90' ad-modifiers merge=true}}
</div>
<ul class="show-listing">
{{else}}
<li class="show-listing-item">
{{render '@show-listing' listing-modifiers merge=true}}
</li>
{{/if}}
{{/each}}
</ul>
</section>
</div>
</main>
{{render '@ads--728x90' ad-modifiers-bottom merge=true}}
{{render '@footer'}}
{
"ad-modifiers-bottom": {
"class": "ad-container--footer",
"imageSmall": "300x250.jpg"
},
"filter-title-modifiers": {
"title": "Filter Shows By",
"aria-id": "filter_shows",
"icon": {
"modifier": "filter"
}
},
"filter-buttons": [
{
"filter-modifiers": {
"class": "js-filter-btn",
"list": null,
"btn-apply-modifiers": {
"modifier": "primary show-filter-apply",
"buttonValue": "Apply"
},
"btn-text": "Date",
"modifiers": {
"modifier": "calendar"
},
"date-title": {
"title": "Select Dates",
"aria-id": null,
"icon": {
"modifier": "calendar"
}
},
"date": true,
"aria-label": "Show Dates",
"date-list-item": [
{
"date-modifiers": {
"label": "All Shows",
"name": "playing",
"id": "playing-all",
"type-active": "checked"
}
},
{
"date-modifiers": {
"label": "Playing Now",
"name": "playing",
"id": "playing-now"
}
},
{
"date-modifiers": {
"label": "Playing Soon",
"name": "playing",
"id": "playing-soon"
}
},
{
"date-modifiers": {
"label": "Closing Soon",
"name": "playing",
"id": "closing-soon"
}
}
],
"date-from-modifiers": {
"input-id": "from_date",
"modifiers": {
"value": "From",
"id": "from_date"
},
"placeholder": "Start Date"
},
"date-to-modifiers": {
"input-id": "to_date",
"modifiers": {
"value": "To",
"id": "to_date"
},
"placeholder": "End Date"
}
}
},
{
"filter-modifiers": {
"class": "js-filter-btn"
}
},
{
"filter-modifiers": {
"class": null,
"filter": null,
"btn-text": "Discount Tickets",
"modifiers": {
"modifier": "tickets"
}
}
}
],
"featured-show": [
{
"featured-modifiers": {
"section-title": true,
"featured": true,
"standard": true,
"section-modifiers": {
"title": "Featured Show",
"aria-id": null,
"icon": {
"modifier": "star"
}
},
"image": "missSaigon2.jpg",
"image-alt": "Example alt",
"title": "Miss Saigon",
"details": null,
"description": "An epic love story set in the last days of the Vietnam War.",
"buttonValue": "Buy Tickets ($39+)"
}
},
{
"featured-modifiers": {
"section-title": true,
"featured": true,
"standard": true,
"section-modifiers": {
"title": "Featured Event",
"aria-id": null,
"icon": {
"modifier": "calendar"
}
},
"image": "fringeFestival.jpg",
"image-alt": "Example alt",
"title": "The Broadway Fringe Festival",
"details": null,
"description": "Join the fun and see over 150 plays, musicals and improv comedy all over Broadway!",
"buttonValue": "Buy Tickets ($15)"
}
}
],
"show-title-modifiers": {
"title": "Shows",
"aria-id": null,
"icon": {
"modifier": "info"
}
},
"show": [
{
"listing-modifiers": {
"image": "1984.jpg",
"image-alt": "Example alt",
"title": "1984",
"theater": "Hudson Theatre",
"thumbnail": true,
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Drama"
},
{
"text": true,
"item": "Play"
}
]
},
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($35+)"
}
}
},
{
"listing-modifiers": {
"image": "aladdin.jpg",
"image-alt": "Example alt",
"title": "Aladdin",
"theater": "New Amsterdam Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($50+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Family"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "anastasia.jpg",
"image-alt": "Example alt",
"title": "Anastasia",
"theater": "Broadhurst Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($69+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Drama"
}
]
}
}
},
{
"listing-modifiers": {
"image": "bandsvisit.jpg",
"image-alt": "Example alt",
"title": "The Band's Visit",
"theater": "Ethel Barrymore Theatre",
"notice-copy": "Save 55%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "bandstand.jpg",
"image-alt": "Example alt",
"title": "Bandstand",
"theater": "Bernard B. Jacobs Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($59+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "beautiful.jpg",
"image-alt": "Example alt",
"title": "Beautiful: The Carole King Musical",
"theater": "Stephen Sondheim Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($59+)"
}
}
},
{
"listing-modifiers": {
"image": "bom.jpg",
"image-alt": "Example alt",
"title": "The Book of Mormon",
"theater": "Eugene O'Neill Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($69+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "bronxtale.jpg",
"image-alt": "Example alt",
"title": "A Bronx Tale - The Musical",
"theater": "Longacre Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($45+)"
}
}
},
{
"listing-modifiers": {
"image": "cats.jpg",
"image-alt": "Example alt",
"title": "Cats",
"theater": "Neil Simon Theatre",
"notice-copy": "Save 35%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Play"
}
]
}
}
},
{
"listing-modifiers": {
"image": "charliechocolate.jpg",
"image-alt": "Example alt",
"title": "Charlie and the Chocolate Factory",
"theater": "Lunt-Fontanne Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($69+)"
}
}
},
{
"listing-modifiers": {
"image": "chicago.jpg",
"image-alt": "Example alt",
"title": "Chicago",
"theater": "Ambassador Theatre",
"notice-copy": "Save 60%",
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "comefromaway.jpg",
"image-alt": "Example alt",
"title": "Come From Away",
"theater": "Schoenfeld Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($47+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Play"
}
]
}
}
},
{
"ad": true,
"ad-modifiers": {
"imageSmall": "300x250.jpg"
}
},
{
"listing-modifiers": {
"image": "dearevanhansen.jpg",
"image-alt": "Example alt",
"title": "Dear Evan Hansen",
"theater": "Music Box Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($49+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "dollshouse.jpg",
"image-alt": "Example alt",
"title": "A Doll's House, Part 2",
"theater": "John Golden Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($39+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "escapemargaritaville.jpg",
"image-alt": "Example alt",
"title": "Escape to Margaritaville",
"theater": "Marquis Theatre",
"date": "Previews Febuary 16, 2018",
"thumbnail": true,
"button-disabled": true,
"button-modifiers": {
"buttonValue": "On Sale Soon"
}
}
},
{
"listing-modifiers": {
"image": "farinelli.jpg",
"image-alt": "Example alt",
"title": "Farinelli and the King",
"theater": "Belasco Theatre",
"date": "Previews December 5, 2017",
"thumbnail": true,
"button-disabled": true,
"button-modifiers": {
"buttonValue": "On Sale Soon"
}
}
},
{
"listing-modifiers": {
"image": "greatcomet.jpg",
"image-alt": "Example alt",
"title": "The Great Comet",
"theater": "Imperial Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($59+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
}
]
}
}
},
{
"listing-modifiers": {
"image": "groundhog.jpg",
"image-alt": "Example alt",
"title": "Groundhog Day",
"theater": "August Wilson Theatre",
"date": "Opens April 22, 2018",
"thumbnail": true,
"button-disabled": true,
"button-modifiers": {
"buttonValue": "On Sale Soon"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
}
]
}
}
},
{
"listing-modifiers": {
"image": "hamilton.jpg",
"image-alt": "Example alt",
"title": "Hamilton",
"theater": "Richard Rodgers Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($65+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Drama"
},
{
"text": true,
"item": "Musical"
},
{
"text": true,
"item": "Mature"
}
]
}
}
},
{
"listing-modifiers": {
"image": "harrypotter.jpg",
"image-alt": "Example alt",
"title": "Harry Potter and the Cursed Child",
"theater": "Lyric Theatre",
"notice-copy": "Save 60%",
"date": "Previews September 14, 2017",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Family"
},
{
"text": true,
"item": "Play"
},
{
"text": true,
"item": "Comedy"
}
]
}
}
},
{
"listing-modifiers": {
"image": "hellodolly.jpg",
"image-alt": "Example alt",
"title": "Hello Dolly",
"theater": "Shubert Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($59+)"
}
}
},
{
"listing-modifiers": {
"image": "indecent.jpg",
"image-alt": "Example alt",
"title": "Indecent",
"theater": "Cort Theatre",
"date": "Closes June 25, 2017",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($39+)"
}
}
},
{
"listing-modifiers": {
"image": "junk.jpg",
"image-alt": "Example alt",
"title": "Junk",
"theater": "Vivian Beaumont Theatre",
"date": "Previews September 14, 2017",
"thumbnail": true,
"button-disabled": true,
"button-modifiers": {
"buttonValue": "On Sale Soon"
}
}
},
{
"listing-modifiers": {
"image": "kinkyboots.jpg",
"image-alt": "Example alt",
"title": "Kinky Boots",
"theater": "Al Hirschfeld Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($55+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"ad": true,
"ad-modifiers": {
"imageSmall": "300x250.jpg"
}
},
{
"listing-modifiers": {
"image": "littlefoxes.jpg",
"image-alt": "Example alt",
"title": "Lillian Hellman's The Little Foxes",
"theater": "Samuel J. Friedman Theatre",
"date": "Closes July 2, 2017",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($70+)"
}
}
},
{
"listing-modifiers": {
"image": "lionking.jpg",
"image-alt": "Example alt",
"title": "The Lion King",
"theater": "Minskoff Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($50+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Family"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "marvinsroom.jpg",
"image-alt": "Example alt",
"title": "Marvin's Room",
"theater": "American Airlines Theatre",
"date": "In Previews. Opens June 29, 2017",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($79+)"
}
}
},
{
"listing-modifiers": {
"image": "missSaigon.jpg",
"image-alt": "Example alt",
"title": "Miss Saigon",
"theater": "Boradway Theatre",
"date": "Closes January 13, 2018",
"notice-copy": "Save 35%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
}
}
},
{
"listing-modifiers": {
"image": "waitress.jpg",
"image-alt": "Example alt",
"title": "Waitress",
"theater": "Brooks Atkinson Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($67+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "warpaint.jpg",
"image-alt": "Example alt",
"title": "War Paint",
"theater": "Nederlander Theatre",
"notice-copy": "Save 45%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Drama"
}
]
}
}
},
{
"listing-modifiers": {
"image": "wicked.jpg",
"image-alt": "Example alt",
"title": "Wicked",
"theater": "Gershwin Theatre",
"thumbnail": true,
"button-cta": true,
"button-modifiers": {
"buttonValue": "Buy Tickets ($79+)"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Musical"
}
]
}
}
}
]
}
.show-filter {
position: relative;
margin-bottom: 2.5rem;
z-index: 1;
perspective: 19rem;
.guide-page--results & {
margin-bottom: 1.5rem;
}
}
.section-title {
.guide-page & {
margin-bottom: 1rem;
}
}
.show-filter__btns {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.featured-shows {
margin-bottom: 2.5rem;
@include breakpoint($break-large) {
display: flex;
justify-content: space-between;
}
}
.ad-container {
.featured-shows & {
@include breakpoint($break-large) {
margin: 0;
}
}
}
.show-listings {
clear: both;
}
.icon {
.show-filter__results & {
width: 1.25rem;
height: 1.25rem;
stroke-width: 4;
}
}
.show-filter__results {
position: relative;
z-index: -1;
@include breakpoint($break-medium) {
flex: 1;
}
}
.ad-container {
.show-filter & {
order: 1;
margin: 1rem 0 0;
@include breakpoint($break-medium) {
margin-bottom: 0;
min-width: 18.75rem;
}
@include breakpoint($break-large) {
float: right;
margin: 0 0 2rem;
}
}
}
.clear-filters {
margin-bottom: 1rem;
@include breakpoint($break-xsmall) {
position: absolute;
top: 0.81rem;
right: 0;
}
}
.show-filter-btn:nth-child(3n) {
.show-filter__filters {
.guide-page & {
@include breakpoint($break-small) {
// half of filter width
left: calc(50% - 16.31rem);
border-radius: $border-radius;
}
@include breakpoint($break-large) {
left: 0;
border-top-left-radius: 0;
}
}
}
}
.tags-list-item--text {
.show-info & {
font-style: italic;
}
}
There are no notes for this item.