Newsletter Subscriptions: Wos

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="overlay js-overlay"></div>
<div class="header-container js-header-container">
    <div class="header-ad">
        <div class="ad-container">
            <a href="#">
                <picture>
                    <source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
                    <img src="/assets/images/ads/300x50.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
                </picture>
            </a>
        </div>

    </div>
    <header class="header contain js-header">
        <div class="header-main">
            <div class="header-btns">
                <button class="btn header-btn-menu-open js-header-btn-menu-open">
          <svg class="icon icon--menu">
  <use xlink:href="/assets/icons/sprite-sheet.svg#menu"></use>
</svg>
          <span class="visually-hidden">Menu</span>
        </button>

                <button class="btn header-btn-menu-close js-header-btn-menu-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>

            </div>
            <div class="header-logo">
                <a href="#">
                    <img src="/assets/images/logos/whatsonstage.svg" alt="What&#x27;s on Stage Logo" />
                </a>
            </div>
            <div class="header-search-container js-header-search">
                <div class="header-btns">
                    <button class="btn header-btn-search-open js-header-btn-search-open">
            <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
            <span class="visually-hidden">Search</span>
          </button>
                    <button class="btn header-btn-search-close js-header-btn-search-close">
            <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
            <span class="visually-hidden">Close Search</span>
          </button>
                </div>
                <div class="header-search">
                    <div class="search-block">
                        <form class="search-block-form">
                            <label for="search" class="label visually-hidden">Search</label>
                            <input class="input search-block-form__input js-input-search" name="search" id="search" type="search" placeholder="Search city, actor or keyword..." />
                            <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-nav-container js-header-nav">
            <div class="header-nav-items">
                <nav class="header-nav">
                    <ul class="header-nav__list js-header-nav-list">
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Tickets &amp; Discounts
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary">
                                <li class="header-nav-close">
                                    <button class="btn btn--close js-btn-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist sublist--main">
                                    <div class="section-title">
                                        <svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
                                        <h2 class="title-highlight">London</h2>
                                    </div>
                                    <ul class="header-nav__sublist">
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">West End</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Off West End</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">All London</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sublist">
                                    <div class="section-title">
                                        <svg class="icon icon--map-pin">
  <use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
                                        <h2 class="title-highlight">Other Cities</h2>
                                    </div>
                                    <ul class="header-nav__sublist">
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Bath</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Birmingham</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Bristol</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Chichester</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Dublin</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Edinburgh</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Glasgow</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Leeds</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Liverpool</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Manchester</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Oxford</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Stratford-Upon-Avon</a>
                                        </li>
                                    </ul>
                                    <a href="#" class="btn btn--base btn--primary btn--submenu">See All Cities</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-list-item">
                            <a href="#nav-link" class="nav-link-item">News &amp; Reviews</a>
                        </li>
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Theater Clubs
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary">
                                <li class="header-nav-close">
                                    <button class="btn btn--close js-btn-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist-title">
                                    <div class="section-title">
                                        <svg class="icon icon--tickets">
  <use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
                                        <h2 class="title-highlight">Complimentary and Deeply Discounted Shows</h2>
                                    </div>
                                    <span class="sublist-copy">West End, Off-West End, Special Events, Film Screenings, Comedy, Dance and much more.</span>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/londonClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/londonClubSmall.jpg" class="nav-image" alt="London skyline at night with Big Ben" />
                                            </picture>
                                            <span class="nav-image-link">London</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/newyorkClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/newyorkClubSmall.jpg" class="nav-image" alt="New York City skyline at dusk" />
                                            </picture>
                                            <span class="nav-image-link">New York</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/bostonClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/bostonClubSmall.jpg" class="nav-image" alt="Boston skyline at dusk near waterfront" />
                                            </picture>
                                            <span class="nav-image-link">Boston</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Newsletter
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary header-nav__list-secondary--newsletter">
                                <li class="header-nav-close">
                                    <button class="btn btn--close js-btn-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist-title">
                                    <div class="section-title">
                                        <svg class="icon icon--email">
  <use xlink:href="/assets/icons/sprite-sheet.svg#email"></use>
</svg>
                                        <h2 class="title-highlight">Sign up for our Newsletter</h2>
                                    </div>
                                </li>
                                <li class="nav-list-item nav-list-item--newsletter">
                                    <div class="nav-newsletter">
                                        <p class="newsletter-copy js-newsletter-copy">Be alerted when your favorite show goes on sale and keep up to date with the latest theater news.</p>
                                        <div class="newsletter-form-container js-newsletter-form-container">
                                            <div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
                                                <svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
                                                <div class="newsletter-confirmation__info">
                                                    <p>Thank you for signing up. We&#x27;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">

            <ul class="newsletter-list">
                <li class="newsletter-list-item">
                    <div class="form-input">
                        <div class="validation js-validation">
                            <label for="location" class="label">Daily Ticket Offers</label>

                            <input type="checkbox" name="location" id="location" class="input validation-item checkbox">
                        </div>
                    </div>

                    <span class="newsletter-subcopy">Discounted tickets for West End, Off West End, London Theatre and beyond.</span>
                    <button class="btn btn--text newsletter-link js-newsletter-link">Choose Market(s)</button>
                </li>
                <li class="newsletter-list-item">
                    <div class="form-input">
                        <div class="validation js-validation">
                            <label for="wos-news" class="label">Weekly Newsletter</label>

                            <input type="checkbox" name="wos-news" id="wos-news" class="input validation-item checkbox">
                        </div>
                    </div>

                    <span class="newsletter-subcopy">Theatre news, reviews and roundups.</span>
                </li>
            </ul>
            <div class="newsletter-options visually-hidden js-newsletter-options">
                <h3 class="heading-medium">Your Markets</h3>
                <span class="newsletter-options__copy">Discounted tickets for West End, Off West End, London Theatre and beyond.</span>
                <ul class="newsletter-options-list">
                    <li class="newsletter-options-list-item">
                        <div class="form-input">
                            <div class="validation js-validation">
                                <label for="west-end" class="label">West End</label>

                                <input type="checkbox" name="west-end" id="west-end" 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="off-west-end" class="label">Off West End</label>

                                <input type="checkbox" name="off-west-end" id="off-west-end" 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="all-london" class="label">All London</label>

                                <input type="checkbox" name="all-london" id="all-london" 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="Bath" class="label">Bath</label>

                                <input type="checkbox" name="Bath" id="Bath" 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="Birmingham" class="label">Birmingham</label>

                                <input type="checkbox" name="Birmingham" id="Birmingham" 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="Bristol" class="label">Bristol</label>

                                <input type="checkbox" name="Bristol" id="Bristol" 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="Chichester" class="label">Chichester</label>

                                <input type="checkbox" name="Chichester" id="Chichester" 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="Dublin" class="label">Dublin</label>

                                <input type="checkbox" name="Dublin" id="Dublin" 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="Edinburgh" class="label">Edinburgh</label>

                                <input type="checkbox" name="Edinburgh" id="Edinburgh" 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="glasgow" class="label">Glasgow</label>

                                <input type="checkbox" name="glasgow" id="glasgow" 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="Leeds" class="label">Leeds</label>

                                <input type="checkbox" name="Leeds" id="Leeds" 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="Liverpool" class="label">Liverpool</label>

                                <input type="checkbox" name="Liverpool" id="Liverpool" 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="Manchester" class="label">Manchester</label>

                                <input type="checkbox" name="Manchester" id="Manchester" 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="Oxford" class="label">Oxford</label>

                                <input type="checkbox" name="Oxford" id="Oxford" 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="Stratford-Upon-Avon" class="label">Stratford-Upon-Avon</label>

                                <input type="checkbox" name="Stratford-Upon-Avon" id="Stratford-Upon-Avon" class="input validation-item checkbox">
                            </div>
                        </div>

                    </li>
                </ul>
                <button class="btn btn--base btn--primary">
  Update
</button>

            </div>
        </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/whatsonstage.svg" alt="What&#x27;s on Stage Logo" />
            </a>
        </div>
        <div class="footer-nav-items">
            <nav class="footer-nav">
                <ul class="footer-nav__list">
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Tickets &amp; Discounts</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">London Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Dublin Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Glasgow Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Bath Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Birmingham Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Chichester Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Edinburgh Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Leeds Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Liverpool Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Manchester Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Stratford-Upon-Avon Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">See All Cities</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-list-item">
                        <a href="#" class="nav-link-item">News &amp; Reviews</a>
                    </li>
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Theater Clubs</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">London</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Boston</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">New York</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-list-item nav-list-item--newsletter">
                        <span class="nav-link-item--title">Newsletter</span>
                        <div class="nav-newsletter">
                            <div class="newsletter-form-container js-newsletter-form-container">
                                <div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
                                    <svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
                                    <div class="newsletter-confirmation__info">
                                        <p>Thank you for signing up. We&#x27;ll send you a welcome message shortly.</p>
                                        <p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
                                    </div>
                                </div>
                                <form class="newsletter-form js-newsletter-form">
                                    <div class="newsletter-error visually-hidden js-newsletter-error">
                                        <svg class="icon icon--error">
  <use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
                                        <span class="input-error">Please enter a valid email address.</span>
                                    </div>
                                    <div class="form-input">
                                        <div class="validation js-validation">
                                            <label for="footer-email" class="label label--required visually-hidden">Email Address</label>

                                            <input type="email" name="email" id="footer-email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
                                        </div>
                                    </div>

                                    <button class="btn btn--base btn--cta js-newsletter-btn">
  Sign Up
</button>

                                </form>
                            </div>

                            <a href="#" class="nav-link-item nav-link-item--newsletter">Manage Email Preferences</a>
                        </div>
                    </li>
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">WhatsOnStage</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">About Us</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Contact Us</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Jobs</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Advertising</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Submit Your Listing</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="footer-social">
                <div class="social">
                    <ul class="social__list" aria-label="Social network profiles">
                        <li class="social-list-item">
                            <a href="#facebook-url">
                                <svg class="icon icon--facebook">
  <use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
                                <span class="visually-hidden">Facebook</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#twitter-url">
                                <svg class="icon icon--twitter">
  <use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
                                <span class="visually-hidden">Twitter</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#youtube-url">
                                <svg class="icon icon--youtube">
  <use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
                                <span class="visually-hidden">YouTube</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#instagram-url">
                                <svg class="icon icon--instagram">
  <use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
                                <span class="visually-hidden">Instagram</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-tos">
        <div class="contain">
            <p class="footer-tos-copy">By providing information about entertainment and cultural events on this site, WhatsOnStage.com shall not be deemed to endorse, recommend, approve and/or guarantee such events, or any facts, views, advice and/or information contained therein.</p>
            <p class="footer-tos-copy">
                ©1999-2017 WhatsOnStage.com, Inc. All Rights Reserved.
                <a href="#" class="nav-link-item">Terms of Use</a> &amp; <a href="#" class="nav-link-item">Privacy Policy</a>
            </p>
        </div>
    </div>
</footer>


        {{render '@header--wos'}}
{{render '@text-banner' text-modifiers merge=true}}
<main class="contain body-content newsletter">
  <div class="newsletter-sections">
    {{#each subsection}}
      <section class="newsletter-section">
        {{#if title}}<h2 class="heading-large">{{title}}</h2>{{/if}}
        <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--wos'}}


        
            
            {
  "text-modifiers": {
    "title": "Manage Newsletter Subscriptions",
    "info": "gburke@theatermania.com"
  },
  "ad-modifiers-bottom": {
    "class": "ad-container--footer",
    "imageSmall": "300x250.jpg"
  },
  "subsection": [
    {
      "options": {
        "title": "Your Markets",
        "copy": "Discounted tickets for West End, Off West End, London Theatre and beyond.",
        "markets-button": {
          "buttonValue": "Update"
        },
        "items": [
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "west-end",
                "value": "West End"
              },
              "class": "checkbox",
              "type-active": "checked",
              "name": "west-end",
              "input-id": "west-end"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "off-west-end",
                "value": "Off West End"
              },
              "class": "checkbox",
              "name": "off-west-end",
              "input-id": "off-west-end"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "all-london",
                "value": "All London"
              },
              "class": "checkbox",
              "type-active": "checked",
              "name": "all-london",
              "input-id": "all-london"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Bath",
                "value": "Bath"
              },
              "class": "checkbox",
              "name": "Bath",
              "input-id": "Bath"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Birmingham",
                "value": "Birmingham"
              },
              "class": "checkbox",
              "name": "Birmingham",
              "input-id": "Birmingham"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Bristol",
                "value": "Bristol"
              },
              "class": "checkbox",
              "name": "Bristol",
              "input-id": "Bristol"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Chichester",
                "value": "Chichester"
              },
              "class": "checkbox",
              "name": "Chichester",
              "input-id": "Chichester"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Dublin",
                "value": "Dublin"
              },
              "class": "checkbox",
              "name": "Dublin",
              "input-id": "Dublin"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Edinburgh",
                "value": "Edinburgh"
              },
              "class": "checkbox",
              "name": "Edinburgh",
              "input-id": "Edinburgh"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "glasgow",
                "value": "Glasgow"
              },
              "class": "checkbox",
              "name": "glasgow",
              "input-id": "glasgow"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Leeds",
                "value": "Leeds"
              },
              "class": "checkbox",
              "name": "Leeds",
              "input-id": "Leeds"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Liverpool",
                "value": "Liverpool"
              },
              "class": "checkbox",
              "name": "Liverpool",
              "input-id": "Liverpool"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Manchester",
                "value": "Manchester"
              },
              "class": "checkbox",
              "name": "Manchester",
              "input-id": "Manchester"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Oxford",
                "value": "Oxford"
              },
              "class": "checkbox",
              "name": "Oxford",
              "input-id": "Oxford"
            }
          },
          {
            "list-modifiers": {
              "type": "checkbox",
              "modifiers": {
                "id": "Stratford-Upon-Avon",
                "value": "Stratford-Upon-Avon"
              },
              "class": "checkbox",
              "name": "Stratford-Upon-Avon",
              "input-id": "Stratford-Upon-Avon"
            }
          }
        ]
      },
      "newsletter": [
        {
          "list-modifiers": {
            "type": "checkbox",
            "modifiers": {
              "id": "location",
              "value": "Daily Ticket Offers"
            },
            "class": "checkbox",
            "name": "location",
            "input-id": "location"
          },
          "subcopy": "Discounted tickets for West End, Off West End, London Theatre and beyond.",
          "link": {
            "class": "newsletter-link js-newsletter-link",
            "copy": "Choose Market(s)"
          }
        },
        {
          "list-modifiers": {
            "type": "checkbox",
            "modifiers": {
              "id": "wos-news",
              "value": "Weekly Newsletter"
            },
            "class": "checkbox",
            "name": "wos-news",
            "input-id": "wos-news"
          },
          "subcopy": "Theatre news, reviews and roundups."
        }
      ]
    }
  ],
  "update-modifiers": {
    "buttonValue": "Update Preferences"
  }
}

File:

Content:


                                /**
 * @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`);
  });
}

URL: /components/raw/newsletter-subscriptions/Newsletter%20Subscriptions.js
Filesystem Path: src/components/03-Views/Newsletter Subscriptions/Newsletter Subscriptions.js
Size: 476 Bytes

Content:


                                .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;
    }
  }
}

URL: /components/raw/newsletter-subscriptions/Newsletter-Subscriptions.scss
Filesystem Path: src/components/03-Views/Newsletter Subscriptions/Newsletter-Subscriptions.scss
Size: 2.6 KB

Handle: @newsletter-subscriptions--wos
Variants (3): Theatermania , Wos , Manage
Preview:
- With layout
- Component only
Filesystem Path: src/components/03-Views/Newsletter Subscriptions/Newsletter Subscriptions--wos.html
References (6): @header--wos, @text-banner, @input, @buttons--primary, @ads--728x90, @footer--wos

There are no notes for this item.

Newsletter Subscriptions: Wos

Ads

Buttons

Form Elements

Input

Label

Radio

Select

Icons

Images

Thumbnails

Links

Call Link

Lists

Logos

Notices

Tags

Text Blocks

Byline

Type

Titles

Header

Ad Blocks

Banners

Footer

Forms

Show Console

Large Show Console

Small Show Console

Show Listing

Article

Guide Page

Home Page

Show Page