<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>
<div class="text-banner">
<div class="text-banner__info contain">
<div class="text-banner__info--copy">
<h1 class="heading-xlarge">Manage Newsletter Subscriptions</h1>
<div class="text-banner-text-container">
<p class="text-banner-info-text">gburke@theatermania.com</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>
<main class="contain body-content newsletter">
<div class="newsletter-sections">
<section class="newsletter-section">
<h2 class="heading-large">Local</h2>
<ul class="newsletter-list">
<li class="newsletter-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="location" class="label">Local Ticket Offers</label>
<input type="checkbox" name="location" id="location" class="input validation-item checkbox">
</div>
</div>
<span class="newsletter-subcopy">Available in select cities. Frequency varies by market.</span>
<button class="btn btn--text newsletter-link js-newsletter-link">Choose Market(s)</button>
</li>
</ul>
<div class="newsletter-options visually-hidden js-newsletter-options">
<h3 class="heading-medium">Your Markets</h3>
<span class="newsletter-options__copy">Choose the locations you're interested in. We'll periodically email you discount theater offers in those areas.</span>
<ul class="newsletter-options-list">
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="new-york" class="label">New York / Broadway</label>
<input type="checkbox" name="new-york" id="new-york" class="input validation-item checkbox" checked>
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="Boston" class="label">Boston</label>
<input type="checkbox" name="Boston" id="Boston" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="Chicago" class="label">Chicago</label>
<input type="checkbox" name="Chicago" id="Chicago" class="input validation-item checkbox" checked>
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="Dallas" class="label">Dallas</label>
<input type="checkbox" name="Dallas" id="Dallas" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="la" class="label">Los Angeles</label>
<input type="checkbox" name="la" id="la" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="miami" class="label">Miami</label>
<input type="checkbox" name="miami" id="miami" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="Minneapolis" class="label">Minneapolis</label>
<input type="checkbox" name="Minneapolis" id="Minneapolis" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="philadelphia" class="label">Philadelphia</label>
<input type="checkbox" name="philadelphia" id="philadelphia" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="san-diego" class="label">San Diego</label>
<input type="checkbox" name="san-diego" id="san-diego" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="san-francisco" class="label">San Francisco</label>
<input type="checkbox" name="san-francisco" id="san-francisco" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="seattle" class="label">Seattle</label>
<input type="checkbox" name="seattle" id="seattle" class="input validation-item checkbox">
</div>
</div>
</li>
<li class="newsletter-options-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="washington-dc" class="label">Washington, D.C.</label>
<input type="checkbox" name="washington-dc" id="washington-dc" class="input validation-item checkbox">
</div>
</div>
</li>
</ul>
<button class="btn btn--base btn--primary">
Update
</button>
</div>
</section>
<section class="newsletter-section">
<h2 class="heading-large">Weekly</h2>
<ul class="newsletter-list">
<li class="newsletter-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="theatermania-news" class="label">TheaterMania News</label>
<input type="checkbox" name="theatermania-news" id="theatermania-news" class="input validation-item checkbox">
</div>
</div>
<span class="newsletter-subcopy">Theater news and reviews.</span>
</li>
<li class="newsletter-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="theatermania-discounts" class="label">TheaterMania Discounts</label>
<input type="checkbox" name="theatermania-discounts" id="theatermania-discounts" class="input validation-item checkbox">
</div>
</div>
<span class="newsletter-subcopy">Current Broadway and Off-Broadway discount offers.</span>
</li>
<li class="newsletter-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="beyond-broadway" class="label">Beyond Broadway</label>
<input type="checkbox" name="beyond-broadway" id="beyond-broadway" class="input validation-item checkbox">
</div>
</div>
<span class="newsletter-subcopy">Curated offers for Off-Broadway and regional shows.</span>
</li>
</ul>
</section>
<section class="newsletter-section">
<h2 class="heading-large">Product Offers</h2>
<ul class="newsletter-list">
<li class="newsletter-list-item">
<div class="form-input">
<div class="validation js-validation">
<label for="theatermania-offers" class="label">TheaterMania Offers</label>
<input type="checkbox" name="theatermania-offers" id="theatermania-offers" class="input validation-item checkbox">
</div>
</div>
<span class="newsletter-subcopy">From time to time, we will send offers for other products.</span>
</li>
</ul>
</section>
</div>
<button class="btn btn--base btn--primary">
Update Preferences
</button>
<div class="newsletter-updates">
<a href="#" class="newsletter-updates__link">Change email address</a>
<a href="#" class="newsletter-updates__link">Unsubscribe</a>
</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'}}
{{render '@text-banner' text-modifiers merge=true}}
<main class="contain body-content newsletter">
<div class="newsletter-sections">
{{#each subsection}}
<section class="newsletter-section">
<h2 class="heading-large">{{title}}</h2>
<ul class="newsletter-list">
{{#each newsletter}}
<li class="newsletter-list-item">
{{render '@input' list-modifiers merge=true}}
{{#if subcopy}}
<span class="newsletter-subcopy">{{subcopy}}</span>
{{/if}}
{{#if link}}
<button class="btn btn--text {{link.class}}">{{link.copy}}</button>
{{/if}}
</li>
{{/each}}
</ul>
{{#if options}}
<div class="newsletter-options visually-hidden js-newsletter-options">
<h3 class="heading-medium">{{options.title}}</h3>
<span class="newsletter-options__copy">{{options.copy}}</span>
<ul class="newsletter-options-list">
{{#each options.items}}
<li class="newsletter-options-list-item">
{{render '@input' list-modifiers merge=true}}
</li>
{{/each}}
</ul>
{{render '@buttons--primary' options.markets-button merge=true}}
</div>
{{/if}}
</section>
{{/each}}
</div>
{{render '@buttons--primary' update-modifiers merge=true}}
<div class="newsletter-updates">
<a href="#" class="newsletter-updates__link">Change email address</a>
<a href="#" class="newsletter-updates__link">Unsubscribe</a>
</div>
</main>
{{render '@ads--728x90' ad-modifiers-bottom merge=true}}
{{render '@footer'}}
{
"text-modifiers": {
"title": "Manage Newsletter Subscriptions",
"info": "gburke@theatermania.com"
},
"ad-modifiers-bottom": {
"class": "ad-container--footer",
"imageSmall": "300x250.jpg"
},
"subsection": [
{
"title": "Local",
"options": {
"title": "Your Markets",
"copy": "Choose the locations you're interested in. We'll periodically email you discount theater offers in those areas.",
"markets-button": {
"buttonValue": "Update"
},
"items": [
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "new-york",
"value": "New York / Broadway"
},
"class": "checkbox",
"type-active": "checked",
"name": "new-york",
"input-id": "new-york"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "Boston",
"value": "Boston"
},
"class": "checkbox",
"name": "Boston",
"input-id": "Boston"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "Chicago",
"value": "Chicago"
},
"class": "checkbox",
"type-active": "checked",
"name": "Chicago",
"input-id": "Chicago"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "Dallas",
"value": "Dallas"
},
"class": "checkbox",
"name": "Dallas",
"input-id": "Dallas"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "la",
"value": "Los Angeles"
},
"class": "checkbox",
"name": "la",
"input-id": "la"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "miami",
"value": "Miami"
},
"class": "checkbox",
"name": "miami",
"input-id": "miami"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "Minneapolis",
"value": "Minneapolis"
},
"class": "checkbox",
"name": "Minneapolis",
"input-id": "Minneapolis"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "philadelphia",
"value": "Philadelphia"
},
"class": "checkbox",
"name": "philadelphia",
"input-id": "philadelphia"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "san-diego",
"value": "San Diego"
},
"class": "checkbox",
"name": "san-diego",
"input-id": "san-diego"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "san-francisco",
"value": "San Francisco"
},
"class": "checkbox",
"name": "san-francisco",
"input-id": "san-francisco"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "seattle",
"value": "Seattle"
},
"class": "checkbox",
"name": "seattle",
"input-id": "seattle"
}
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "washington-dc",
"value": "Washington, D.C."
},
"class": "checkbox",
"name": "washington-dc",
"input-id": "washington-dc"
}
}
]
},
"newsletter": [
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "location",
"value": "Local Ticket Offers"
},
"class": "checkbox",
"name": "location",
"input-id": "location"
},
"subcopy": "Available in select cities. Frequency varies by market.",
"link": {
"class": "newsletter-link js-newsletter-link",
"copy": "Choose Market(s)"
}
}
]
},
{
"title": "Weekly",
"newsletter": [
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "theatermania-news",
"value": "TheaterMania News"
},
"class": "checkbox",
"name": "theatermania-news",
"input-id": "theatermania-news"
},
"subcopy": "Theater news and reviews."
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "theatermania-discounts",
"value": "TheaterMania Discounts"
},
"class": "checkbox",
"name": "theatermania-discounts",
"input-id": "theatermania-discounts"
},
"subcopy": "Current Broadway and Off-Broadway discount offers."
},
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "beyond-broadway",
"value": "Beyond Broadway"
},
"class": "checkbox",
"name": "beyond-broadway",
"input-id": "beyond-broadway"
},
"subcopy": "Curated offers for Off-Broadway and regional shows."
}
]
},
{
"title": "Product Offers",
"newsletter": [
{
"list-modifiers": {
"type": "checkbox",
"modifiers": {
"id": "theatermania-offers",
"value": "TheaterMania Offers"
},
"class": "checkbox",
"name": "theatermania-offers",
"input-id": "theatermania-offers"
},
"subcopy": "From time to time, we will send offers for other products."
}
]
}
],
"update-modifiers": {
"buttonValue": "Update Preferences"
}
}
/**
* @overview Mock interaction for Choose Market(s) link on Newsletter Subscription view.
* @module Newsletter Subscriptions.js
*/
const newsletterLink = document.querySelector(`.js-newsletter-link`);
if (newsletterLink) {
const newsletterOptions = document.querySelector(`.js-newsletter-options`);
newsletterLink.addEventListener(`click`, () => {
newsletterOptions.classList.remove(`visually-hidden`);
newsletterOptions.classList.add(`is-active`);
});
}
.newsletter {
display: block;
margin-top: 1.5rem;
}
.newsletter-list {
margin-bottom: 0;
padding: 0;
list-style: none;
}
.newsletter-list-item {
margin-bottom: 2rem;
padding-left: 0;
}
.form-input {
.newsletter-list-item & {
margin-bottom: 0.5rem;
}
.newsletter-options & {
margin-bottom: 0;
}
}
.input {
.newsletter--manage & {
flex: 1;
}
}
.label {
.newsletter-list-item & {
display: inline;
line-height: 1.8;
font-size: 1rem;
}
.newsletter-options-list-item & {
display: inline;
font-size: 1rem;
font-weight: $font-normal;
}
.newsletter--manage & {
font-size: $ms-0;
text-align: center;
@include breakpoint($break-medium) {
align-self: center;
margin-bottom: 0;
padding-right: 1.5rem;
}
}
}
.checkbox {
.newsletter-list-item & {
float: left;
margin-right: 0.75rem;
}
.newsletter-options-list-item & {
float: left;
margin-right: 0.5rem;
}
}
.newsletter-link {
display: block;
margin-top: 0.5rem;
padding: 0;
&:hover {
color: $color-link-hover;
box-shadow: none;
transform: none;
}
}
.newsletter-sections {
margin-top: 2.5rem;
}
.newsletter-section {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid $color-border;
}
.newsletter-updates__link {
display: block;
margin-bottom: 0.75rem;
}
.newsletter-options {
margin-top: 1.5rem;
opacity: 0;
transform: translateY(10px);
transition: $transition;
&.is-active {
opacity: 1;
transform: translateY(0);
}
}
.heading-medium {
.newsletter-options & {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid $color-border;
}
}
.newsletter-options-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.newsletter-options-list-item {
flex: 0 1 100%;
margin-bottom: 0;
padding: 0;
@include breakpoint($break-small) {
flex: 0 1 48%;
}
&:first-child {
margin-top: 1rem;
}
}
.btn {
.newsletter-options & {
margin-top: 1.5rem;
}
.newsletter--manage & {
display: block;
margin: 1.25rem auto 0;
@include breakpoint($break-medium) {
margin-top: 2rem;
}
}
}
.newsletter-updates {
margin-top: 1.5rem;
}
.newsletter-options__copy {
line-height: $line-height;
}
.newsletter--manage {
display: block;
margin-bottom: 2.5rem;
max-width: 28rem;
@include breakpoint($break-medium) {
max-width: 37.5rem;
}
}
.validation {
.newsletter--manage & {
@include breakpoint($break-medium) {
display: flex;
}
}
}
There are no notes for this item.