TheaterMania Component Library

Show Page: Low Content 

<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 &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 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 &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 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&#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>

<main class="show-page show-page--low-content">
    <div class="show-banner">
        <section class="show-banner__show">
            <div class="show-banner-info contain">
                <div class="show-banner-image">
                    <img src="/assets/images/showpage/forlornBicycle.jpg" class="thumbnail" alt="Example image alt" />
                </div>
                <div class="show-banner-show-info">
                    <h1 class="heading-xlarge">The Forlorn Bicycle</h1>
                    <div class="show-banner-location">
                        <a href="#" class="show-banner-location-info">MainStage Theater</a>, <a href="#" class="show-banner-location-info">New York City</a>
                    </div>
                    <div class="show-banner-tickets">
                        <button class="btn btn--base btn--cta">
  Tickets from $29
</button>

                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="show-page-container contain">
        <section class="show-page__block show-page__block--two-col">
            <div class="title-text-container show-block">
                <div class="section-title">
                    <svg class="icon icon--question">
  <use xlink:href="/assets/icons/sprite-sheet.svg#question"></use>
</svg>
                    <h2 id="about_the_details" class="title-highlight">About This Show</h2>
                </div>
                <div class="title-text-copy">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                    <p></p>
                </div>
            </div>

            <div class="show-details-container show-block">
                <div class="section-title">
                    <svg class="icon icon--info">
  <use xlink:href="/assets/icons/sprite-sheet.svg#info"></use>
</svg>
                    <h2 id="show_details" class="title-highlight">Show Details</h2>
                </div>
                <div class="show-details">
                    <ul class="show-details__list">
                        <li class="show-details-list-item">
                            <svg class="icon icon--clock">
  <use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
                            <div class="show-details-info">
                                <span class="title-highlight">Duration:</span>
                                <span class="show-details-copy">2hr 35min. (1 intermission)</span>

                            </div>
                        </li>
                        <li class="show-details-list-item">
                            <svg class="icon icon--calendar">
  <use xlink:href="/assets/icons/sprite-sheet.svg#calendar"></use>
</svg>
                            <div class="show-details-info">
                                <span class="title-highlight">Dates:</span>
                                <span class="show-details-copy">Open Run</span>

                            </div>
                        </li>
                        <li class="show-details-list-item">
                            <svg class="icon icon--phone">
  <use xlink:href="/assets/icons/sprite-sheet.svg#phone"></use>
</svg>
                            <div class="show-details-info">
                                <span class="title-highlight">Ticket Office:</span>
                                <span class="show-details-copy">
                    <a href="tel:+18772502929" class="link--phone">877-250-2929</a>
                  </span>

                            </div>
                        </li>
                        <li class="show-details-list-item">
                            <svg class="icon icon--map-pin">
  <use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
                            <div class="show-details-info">
                                <span class="title-highlight">Location:</span>
                                <span class="show-details-copy">
                  <a href="#">MainStage Theatre</a>,
                    <a href="#">New York City</a>
                </span>
                                <span class="show-details-copy">
                  <a href="#">View Map</a>
                </span>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </section>
        <div class="show-page__block show-page__block--one-col">
            <div class="show-page-ad-block show-block">
                <div class="ad-container">
                    <a href="#">
                        <picture>
                            <source srcset="/assets/images/ads/300x250.jpg" media="(min-width: 769px)">
                            <img src="/assets/images/ads/300x250.jpg" alt="Ad for Noel Coward&#x27;s Present Laughter starring Kevin Kline with badge displaying NY Times Critic&#x27;s Pick" />
                        </picture>
                    </a>
                </div>

            </div>
        </div>
        <div class="show-page__block show-page__block--two-col">
            <div class="show-page-articles show-block">
                <section class="content">
                    <div class="section-title">
                        <svg class="icon icon--article">
  <use xlink:href="/assets/icons/sprite-sheet.svg#article"></use>
</svg>
                        <h2 id="related_articles" class="title-highlight">Related Articles</h2>
                    </div>
                    <ul aria-labelledby="related_articles" class="content__list content__list--related content__list--related--show">
                        <li class="content-list-item">

                            <a href="#video-link" class="thumbnail-video-link content-link-image">
                                <div class="thumbnail-overlay-container">
                                    <svg class="icon icon--play">
  <use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg>
                                    <img src="/assets/images/showpage/bom1.jpg" alt="Book of Mormon Related Article alt text" class="thumbnail thumbnail--video" />
                                </div>
                            </a>

                            <div class="content-list-info">
                                <a href="#" class="content-link-title">Flashback Friday: Kristen Anderson-Lopez and Robert Lopez Accept &#x27;Let It Go&#x27; Oscar</a>
                                <div class="content-info">
                                    <div>Feburary 24, 2017</div>
                                </div>
                            </div>
                        </li>
                        <li class="content-list-item">
                            <a href="#article-link" class="content-link-image">
                                <img src="/assets/images/showpage/bom2.jpg" alt="Book of Mormon Related Article alt text" class="thumbnail" />
                            </a>

                            <div class="content-list-info">
                                <a href="#" class="content-link-title">Broadway&#x27;s The Book of Mormon to Release Original Broadway Cast Album on Vinyl</a>
                                <div class="content-info">
                                    <div>November 17, 2016</div>
                                </div>
                            </div>
                        </li>
                        <li class="content-list-item">
                            <a href="#article-link" class="content-link-image">
                                <img src="/assets/images/showpage/bom3.jpg" alt="Book of Mormon Related Article alt text" class="thumbnail" />
                            </a>

                            <div class="content-list-info">
                                <a href="#" class="content-link-title">Broadway&#x27;s Book of Mormon Stars Light Empire State Building to Celebrate 5th Birthday</a>
                                <div class="content-info">
                                    <div>March 4, 2016</div>
                                </div>
                            </div>
                        </li>
                        <li class="content-list-item">
                            <a href="#article-link" class="content-link-image">
                                <img src="/assets/images/showpage/bom4.jpg" alt="Book of Mormon Related Article alt text" class="thumbnail" />
                            </a>

                            <div class="content-list-info">
                                <a href="#" class="content-link-title">Celebrate the Holidays With Broadway&#x27;s Christmas Week Show Schedule</a>
                                <div class="content-info">
                                    <div>November 24, 2015</div>
                                </div>
                            </div>
                        </li>
                        <li class="content-list-item">
                            <a href="#article-link" class="content-link-image">
                                <img src="/assets/images/showpage/bom5.jpg" alt="Book of Mormon Related Article alt text" class="thumbnail" />
                            </a>

                            <div class="content-list-info">
                                <a href="#" class="content-link-title">When You&#x27;re Finished With Turkey, See a Broadway Show This Thanksgiving Weekend</a>
                                <div class="content-info">
                                    <div>November 23, 2015</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>

                <a href="#" class="btn btn--base btn--primary">All Related Articles</a>
            </div>
            <div class="show-page-ad-block">
                <div class="ad-container">
                    <a href="#">
                        <picture>
                            <source srcset="/assets/images/ads/300x600.jpg" media="(min-width: 769px)">
                            <img src="/assets/images/ads/300x250.jpg" alt="Ad with text displaying: Need Audition Stuff? Music, monologues and more good stuff with smiling and excited woman" />
                        </picture>
                    </a>
                </div>

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

</main>
<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 &amp; Discounts</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Broadway &amp; 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 &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">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&#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">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> &amp; <a href="#" class="nav-link-item">Privacy Policy</a>
            </p>
        </div>
    </div>
</footer>
 
{{render '@header'}}
<main class="show-page{{#if low-content}} show-page--low-content{{/if}}">
  {{render '@show-banner' banner-modifiers merge=true}}
  <div class="show-page-container contain">
    <section class="show-page__block show-page__block--two-col">
      {{render '@title-and-text' text-modifiers merge=true}}
      {{render '@show-details' details-modifiers merge=true}}
    </section>
    <div class="show-page__block show-page__block--one-col">
      <div class="show-page-ad-block show-block">
        {{render '@ads--300x250'}}
      </div>
    </div>
    <div class="show-page__block show-page__block--two-col">
       <div class="show-page-articles show-block">
        {{render '@content-list' article-modifiers merge=true}}
        <a href="#" class="btn btn--base btn--primary">{{related-link-text}}</a>
      </div>
      <div class="show-page-ad-block">
        {{render '@ads--300x600' ad-modifiers merge=true}}
      </div>
    </div>
  </div>
  {{render '@ads--728x90' ad-modifiers-bottom merge=true}}
</main>
{{render '@footer'}}
 
{
  "theatermania": true,
  "ad-modifiers": {
    "imageSmall": "300x250.jpg"
  },
  "ad-modifiers-bottom": {
    "class": "ad-container--footer",
    "imageSmall": "300x250.jpg"
  },
  "short-info-modifiers": {
    "copy": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
    "callout-class": "callout--text",
    "class": "heading-large"
  },
  "col-modifiers": {
    "class": "show-block"
  },
  "modal-modifiers": {
    "class": null
  },
  "quotes-modifiers": {
    "title": "Critic Reviews",
    "icon": {
      "modifier": "chat"
    }
  },
  "quote": [
    {
      "quote-modifiers": {
        "copy": "In the title role, Eva Noblezada makes an astonishing stage debut. At 18, she has poise, power and a superb voice throughout a wide vocal range. Backed by a cracking 16-piece band and Mick Potter’s expert sound design, she gives the evening true passion.",
        "attribution": "David Benedict,",
        "source": "Variety"
      }
    },
    {
      "quote-modifiers": {
        "copy": "...remnant of the bombastic, spectacle-driven, opera-meets-rock English mega-musicals that conquered Broadway in the '80s and '90s...Miss Saigon is more relevant and heartbreaking today than when it premiered on Broadway in 1991 at the same theater.",
        "attribution": "Matt Windman,",
        "source": "amNY"
      }
    }
  ],
  "article-modifiers": {
    "ordered": null,
    "aria-id": "related_articles",
    "class": "related content__list--related--show",
    "modifiers": {
      "title": "Related Articles",
      "aria-id": "related_articles",
      "icon": {
        "modifier": "article"
      }
    },
    "article-links": [
      {
        "article": true,
        "title": "Flashback Friday: Kristen Anderson-Lopez and Robert Lopez Accept 'Let It Go' Oscar",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "image": "/assets/images/showpage/bom1.jpg",
          "image-alt": "Book of Mormon Related Article alt text"
        },
        "video": true,
        "info": [
          {
            "copy": "Feburary 24, 2017"
          }
        ]
      },
      {
        "article": true,
        "title": "Broadway's The Book of Mormon to Release Original Broadway Cast Album on Vinyl",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "image": "/assets/images/showpage/bom2.jpg",
          "image-alt": "Book of Mormon Related Article alt text"
        },
        "info": [
          {
            "copy": "November 17, 2016"
          }
        ]
      },
      {
        "article": true,
        "title": "Broadway's Book of Mormon Stars Light Empire State Building to Celebrate 5th Birthday",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "image": "/assets/images/showpage/bom3.jpg",
          "image-alt": "Book of Mormon Related Article alt text"
        },
        "video": null,
        "info": [
          {
            "copy": "March 4, 2016"
          }
        ]
      },
      {
        "article": true,
        "title": "Celebrate the Holidays With Broadway's Christmas Week Show Schedule",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "image": "/assets/images/showpage/bom4.jpg",
          "image-alt": "Book of Mormon Related Article alt text"
        },
        "info": [
          {
            "copy": "November 24, 2015"
          }
        ]
      },
      {
        "article": true,
        "title": "When You're Finished With Turkey, See a Broadway Show This Thanksgiving Weekend",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "image": "/assets/images/showpage/bom5.jpg",
          "image-alt": "Book of Mormon Related Article alt text",
          "class": "content-link-image"
        },
        "info": [
          {
            "copy": "November 23, 2015"
          }
        ]
      },
      {
        "article": null
      }
    ]
  },
  "related-link-text": "All Related Articles",
  "crew-modifiers": {
    "class": "show-block",
    "cast-modifiers": {
      "title": "Meet the Crew",
      "aria-id": "meet_the_crew",
      "icon": {
        "modifier": "star"
      }
    },
    "cast": [
      {
        "image": null,
        "name": "Claude-Michel Schonberg",
        "role": "Music"
      },
      {
        "image": null,
        "name": "Alain Boublil and Richard Maltby Jr.",
        "role": "Lyrics"
      },
      {
        "image": null,
        "name": "Alain Boublil and Claude-Michel Schonberg",
        "role": "Book"
      },
      {
        "image": null,
        "name": "Laurence Connor",
        "role": "Director"
      },
      {
        "image": null,
        "name": "Totie Driver Matt Kinley",
        "role": "Set Designer"
      },
      {
        "image": null,
        "name": "Andreane Neofitou",
        "role": "Costume Designer"
      },
      {
        "image": null,
        "name": "Bruno Poet",
        "role": "Lighting Designer"
      },
      {
        "image": null,
        "name": "Mick Potter",
        "role": "Sound Designer"
      },
      {
        "image": null,
        "name": "William David Brohn",
        "role": "Orchestrations"
      }
    ]
  },
  "low-content": true,
  "banner-modifiers": {
    "banner": null,
    "image-show": "forlornBicycle.jpg",
    "title": "The Forlorn Bicycle",
    "theater": "MainStage Theater",
    "theater-city": "New York City",
    "genres": null,
    "low-content-ticket": true,
    "modifiers": {
      "buttonValue": "Tickets from $29"
    },
    "ticket-buttons": null
  },
  "details-modifiers": {
    "class": "show-block",
    "show-info": [
      {
        "info": [
          {
            "copy": "2hr 35min. (1 intermission)"
          }
        ],
        "title": "Duration:",
        "icon-modifiers": {
          "modifier": "clock"
        }
      },
      {
        "info": [
          {
            "copy": "Open Run"
          }
        ],
        "title": "Dates:",
        "icon-modifiers": {
          "modifier": "calendar"
        }
      },
      {
        "info": [
          {
            "telephone": "+18772502929",
            "copy": "877-250-2929"
          }
        ],
        "title": "Ticket Office:",
        "icon-modifiers": {
          "modifier": "phone"
        }
      },
      {
        "info": [
          {
            "copy": "MainStage Theatre",
            "location": "New York City"
          },
          {
            "copy": "View Map"
          }
        ],
        "title": "Location:",
        "link": true,
        "icon-modifiers": {
          "modifier": "map-pin"
        }
      }
    ]
  },
  "text-modifiers": {
    "class": "show-block",
    "text": [
      {
        "copy": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."
      },
      {
        "copy": null
      }
    ]
  }
}
  • Content: 
    .show-page {
  margin-top: 0;
}

.show-page__block {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;

  @include breakpoint($break-large) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.btn--primary {
  .show-page-articles & {
    display: block;
    margin: 0 auto;
    max-width: 14.75rem;

    @include breakpoint($break-small) {
      float: right;
      margin: 0.5rem 0;
    }

    @include breakpoint($break-large) {
      float: none;
    }
  }
}

.icon {
  .show-closed & {
    width: 1.2rem;
    height: 1.1rem;
    font-size: $ms-neg-1;

    @include breakpoint($break-medium) {
      width: 1.5rem;
      height: 1.4rem;
      font-size: $ms-0;
      stroke: $color-white;
    }
  }
}

.show-page-ad-block {
  margin: 0 auto;

  @include breakpoint($break-large) {
    min-width: 18.75rem;
  }
}

.ad-container {
  .show-page-ad-block & {
    margin: 0;
  }
}

.section-title {
  .show-quotes & {
    margin-bottom: 0.25rem;

    @include breakpoint($break-large) {
      margin-bottom: 0.75rem;
    }
  }
}

.star-rating {
  .show-page & {
    order: -1;
    margin-bottom: 1rem;

    @include breakpoint($break-xsmall) {
      align-self: flex-start;
    }

    @include breakpoint($break-medium) {
      order: 0;
      align-self: flex-end;
      margin: 0 0 0 1.5rem;
    }
  }
}

.show-closed {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;

  @include breakpoint($break-xsmall) {
    justify-content: flex-start;
  }

  @include breakpoint($break-small) {
    margin-top: 1.25rem;
  }
}

.show-closed-copy {
  align-self: center;
  margin-left: 0.5rem;
  font-family: $font-title;
}

.icon--play {
  .content__list--related--show .content-list-item .thumbnail-overlay-container & {
    @include breakpoint($break-large) {
      transform: translate(-50%, -50%) scale(0.4);
    }

    @include breakpoint($break-xlarge) {
      transform: translate(-50%, -50%) scale(0.55);
    }
  }

  .content__list--related--show .content-list-item .thumbnail-video-link:hover & {
    @include breakpoint($break-large) {
      transform: translate(-50%, -50%) scale(0.55);
    }

    @include breakpoint($break-xlarge) {
      transform: translate(-50%, -50%) scale(0.7);
    }
  }
}

.show-block {
  flex: 1;

  .show-page__block--two-col & {
    margin-bottom: 2.5rem;

    &:last-child {
      margin-bottom: 0;
    }

    &:nth-child(n+3) {
      margin-top: 2.5rem;
      margin-bottom: 0;
    }

    @include breakpoint($break-large) {
      flex-basis: 46%;
      margin: 0 4% 0 0;

      &:nth-child(even),
      &:last-child {
        margin-right: 0;
      }
    }
  }

  &.show-page-ad-block {
    flex: 0;
  }
}

.content {
  .show-page-articles & {
    margin-top: 0;
  }
}

.show-page-articles {
  order: 1;

  @include breakpoint($break-large) {
    order: 0;
  }
}

.show-page-articles + .show-page-ad-block {
  margin-bottom: 2.5rem;

  @include breakpoint($break-large) {
    margin-bottom: 0;
  }
}

blockquote {
  .show-quote:last-child & {
    margin-bottom: 0;
  }
}

.show-quote {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid $color-border;

  &:last-child {
    padding-bottom: 0;
    border: none;
  }

  .show-page__block--two-col & {
    margin-bottom: 1rem;
  }

  blockquote {
    margin-bottom: 1.25rem;
  }

  @include breakpoint($break-large) {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;

    &:nth-child(n+3) {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid $color-border;

      blockquote {
        margin-bottom: 0;
      }
    }

    .show-page__block--two-col & {
      margin-bottom: 0;
    }
  }
}
  • URL: /components/raw/show-page/Show-Page.scss
  • Filesystem Path: src/components/03-Views/Show Page/Show-Page.scss
  • Size: 3.7 KB

For client styling recommendations on the Ticket Details section, please see the Notes under the Discounts Pattern.

On Low Content versions, ads stack below desktop sizes. We are discussing reducing the number of ads in low content pages per the Guide Page. So, TODO: Remove the 300x250 ad if this approach is adopted, or adjust flex order for ad container if not.