<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 guide-page--results 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 (47)</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" checked>
<div class="radio-label-container">
<label for="broadway" class="label label--radio">Broadway (40)</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 (7)</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" disabled>
<div class="radio-label-container">
<label for="off-off-broadway" class="label label--radio">Off-Off-Broadway (0)</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 (40)</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" disabled>
<div class="radio-label-container">
<label for="benefit" class="label label--radio">Benefit (0)</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" disabled>
<div class="radio-label-container">
<label for="cabaret" class="label label--radio">Cabaret (0)</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" checked>
<div class="radio-label-container">
<label for="comedy" class="label label--radio">Comedy (6)</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 (11)</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 (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="festival" name="genre" class="radio validation" disabled>
<div class="radio-label-container">
<label for="festival" class="label label--radio">Festival (0)</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" disabled>
<div class="radio-label-container">
<label for="magic-show" class="label label--radio">Magic Show (0)</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 (17)</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" disabled>
<div class="radio-label-container">
<label for="mature" class="label label--radio">Mature (0)</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" disabled>
<div class="radio-label-container">
<label for="opera" class="label label--radio">Opera (0)</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 (23)</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 filter-btn--active">
<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>
<section class="show-filter__results">
<div class="section-title">
<svg class="icon icon--info">
<use xlink:href="/assets/icons/sprite-sheet.svg#info"></use>
</svg>
<h2 id="displaying_results_for" class="title-highlight">Displaying Results For</h2>
</div>
<div class="clear-filters">
<button class="btn btn--base btn--plain">
Clear All Filters
</button>
</div>
<div class="tags">
<ul class="tags__list" aria-label="Tags list">
<li class="tags-list-item">
<button class="btn btn--base btn--plain">
Discount Shows
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
</button>
</li>
<li class="tags-list-item">
<button class="btn btn--base btn--plain">
Broadway
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
</button>
</li>
<li class="tags-list-item">
<button class="btn btn--base btn--plain">
Comedy
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
</button>
</li>
</ul>
</div>
</section>
</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/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">
<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 15%</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/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">
<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/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">
<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/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="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">
<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 70%</span>
</div>
<button class="btn btn--base btn--primary">
Discount Tickets
</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/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">
Comedy
</li>
<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 25%</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">
<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>
</ul>
</section>
</div>
</main>
<div class="ad-container">
<a href="#">
<picture>
<source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/728x90.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>
<section class="show-filter__results">
{{render '@section-title' results-title-modifiers merge=true}}
<div class="clear-filters">
{{render '@buttons--plain' results-clear-modifiers merge=true}}
</div>
{{render '@tags' results-tags merge=true}}
</section>
</div>
<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' classModifiers 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",
"location-genres": true,
"btn-text": "Show Type",
"modifiers": {
"modifier": "sort"
},
"btn-apply-modifiers": {
"modifier": "primary show-filter-apply",
"buttonValue": "Apply"
},
"list": [
{
"list-title": {
"title": "Area",
"aria-id": "area",
"icon": {
"modifier": "map-pin"
}
},
"list-item": [
{
"list-modifiers": {
"label": "All NYC Shows (47)",
"name": "location",
"id": "all-nyc"
}
},
{
"list-modifiers": {
"label": "Broadway (40)",
"name": "location",
"id": "broadway",
"type-active": "checked"
}
},
{
"list-modifiers": {
"label": "Off-Broadway (7)",
"name": "location",
"id": "off-broadway"
}
},
{
"list-modifiers": {
"label": "Off-Off-Broadway (0)",
"name": "location",
"id": "off-off-broadway",
"type-active": "disabled"
}
}
]
},
{
"list-title": {
"title": "Genre",
"icon": {
"modifier": "sort"
}
},
"list-item": [
{
"list-modifiers": {
"label": "All Genres (40)",
"name": "genre",
"id": "all-genres"
}
},
{
"list-modifiers": {
"label": "Benefit (0)",
"name": "genre",
"id": "benefit",
"type-active": "disabled"
}
},
{
"list-modifiers": {
"label": "Cabaret (0)",
"name": "genre",
"id": "cabaret",
"type-active": "disabled"
}
},
{
"list-modifiers": {
"label": "Comedy (6)",
"name": "genre",
"id": "comedy",
"type-active": "checked"
}
},
{
"list-modifiers": {
"label": "Drama (11)",
"name": "genre",
"id": "drama"
}
},
{
"list-modifiers": {
"label": "Family (5)",
"name": "genre",
"id": "family-kids"
}
},
{
"list-modifiers": {
"label": "Festival (0)",
"name": "genre",
"id": "festival",
"type-active": "disabled"
}
},
{
"list-modifiers": {
"label": "Magic Show (0)",
"name": "genre",
"id": "magic-show",
"type-active": "disabled"
}
},
{
"list-modifiers": {
"label": "Musical (17)",
"name": "genre",
"id": "musical"
}
},
{
"list-modifiers": {
"label": "Mature (0)",
"name": "genre",
"id": "mature",
"type-active": "disabled"
}
},
{
"list-modifiers": {
"label": "Opera (0)",
"name": "genre",
"id": "opera",
"type-active": "disabled"
}
},
{
"list-modifiers": {
"label": "Play (23)",
"name": "genre",
"id": "play"
}
}
]
}
]
}
},
{
"filter-modifiers": {
"class": "filter-btn--active",
"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": "bom.jpg",
"image-alt": "Example alt",
"title": "The Book of Mormon",
"theater": "Eugene O'Neill Theatre",
"thumbnail": true,
"notice-copy": "Save 15%",
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "dearevanhansen.jpg",
"image-alt": "Example alt",
"title": "Dear Evan Hansen",
"theater": "Music Box Theatre",
"notice-copy": "Save 55%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "greatcomet.jpg",
"image-alt": "Example alt",
"title": "The Great Comet",
"theater": "Imperial Theatre",
"notice-copy": "Save 35%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"item": "Comedy"
}
]
}
}
},
{
"listing-modifiers": {
"image": "groundhog.jpg",
"image-alt": "Example alt",
"title": "Groundhog Day",
"theater": "August Wilson Theatre",
"notice-copy": "Save 70%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"item": "Comedy"
}
]
}
}
},
{
"ad": true,
"ad-modifiers": {
"imageSmall": "300x250.jpg"
}
},
{
"listing-modifiers": {
"image": "kinkyboots.jpg",
"image-alt": "Example alt",
"title": "Kinky Boots",
"theater": "Al Hirschfeld Theatre",
"notice-copy": "Save 25%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
},
{
"listing-modifiers": {
"image": "waitress.jpg",
"image-alt": "Example alt",
"title": "Waitress",
"theater": "Brooks Atkinson Theatre",
"notice-copy": "Save 35%",
"thumbnail": true,
"button-discount": true,
"button-modifiers": {
"buttonValue": "Discount Tickets"
},
"tags-modifier": {
"tags": [
{
"text": true,
"item": "Comedy"
},
{
"text": true,
"item": "Musical"
}
]
}
}
}
],
"class": "results",
"results-title-modifiers": {
"title": "Displaying Results For",
"aria-id": "displaying_results_for",
"icon": {
"modifier": "info"
}
},
"results-clear-modifiers": {
"buttonValue": "Clear All Filters"
},
"results-tags": {
"tags": [
{
"tags": true,
"button": true,
"link": null,
"button-modifiers": {
"buttonValue": "Discount Shows",
"icon": true,
"icon-modifiers": {
"modifier": "close"
}
}
},
{
"tags": true,
"button": true,
"button-modifiers": {
"buttonValue": "Broadway",
"icon": true,
"icon-modifiers": {
"modifier": "close"
}
}
},
{
"tags": true,
"button": true,
"button-modifiers": {
"buttonValue": "Comedy",
"icon": true,
"icon-modifiers": {
"modifier": "close"
}
}
}
]
}
}
.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.