TheaterMania Component Library

Search Results 

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

<div class="text-banner">
    <div class="text-banner__info contain">
        <div class="text-banner__info--copy">
            <h1 class="heading-xlarge">Results for &#x27;Book of Mormon&#x27;</h1>
        </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">
    <ul aria-label="Search Categories" class="search-tabs">
        <li class="search-tabs-list-item">
            <a href="#" class="btn btn--base btn--plain">All (589)</a>
        </li>
        <li class="search-tabs-list-item">
            <a href="#" class="btn btn--base btn--plain">Shows (5)</a>
        </li>
        <li class="search-tabs-list-item">
            <a href="#" class="btn btn--base btn--plain">Articles (564)</a>
        </li>
        <li class="search-tabs-list-item">
            <a href="#" class="btn btn--base btn--plain">Video (20)</a>
        </li>
        <li class="search-tabs-list-item">
            <span class="btn btn--base btn--disabled">Theaters (0)</span>
        </li>
    </ul>
    <div class="search-section search-section--ad">
        <section class="content">
            <div class="section-title">
                <svg class="icon icon--tickets">
  <use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
                <h2 id="shows" class="title-highlight">Shows</h2>
            </div>
            <ul aria-labelledby="shows" class="content__list content__list--search">
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/showCard4Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/showCard4.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">The Book of Mormon</a>
                        <div class="content-info">
                            <div>Eugene O&#x27;Neill Theatre</div>
                            <div>New York City</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/showCard4Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/showCard4.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">The Book of Mormon</a>
                        <div class="content-info">
                            <div>Prince of Wales Theatre</div>
                            <div>London</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/broadwayWTh.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/broadwayW.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Broadway at the W</a>
                        <div class="content-info">
                            <div>The Loft at W Hollywood</div>
                            <div>Los Angeles</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/showCard4Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/showCard4.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">The Book of Mormon</a>
                        <div class="content-info">
                            <div>State Theatre</div>
                            <div>Cleveland</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/kennCenterTh.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/kennCenter.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">The Book of Mormon</a>
                        <div class="content-info">
                            <div>The Kennedy Center</div>
                            <div>Washington, D.C.</div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>

        <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 class="search-section search-section--ad">
        <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="articles" class="title-highlight">Articles</h2>
            </div>
            <ul aria-labelledby="articles" class="content__list content__list--search">
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article1Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article1.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </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>Music News</div>
                            <div>November 17, 2016</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article2Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article2.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Hamilton Finds Its Newest Tony-Nominated King George</a>
                        <div class="content-info">
                            <div>Theater News</div>
                            <div>March 28, 2016</div>
                        </div>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/article3Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/article3.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </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>Photo Flash</div>
                            <div>March 4, 2016</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article4Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article4.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Glee&#x27;s Samantha Marie Ware to Take the Cabaret Stage</a>
                        <div class="content-info">
                            <div>Cabaret News</div>
                            <div>June 29, 2015</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article5Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article5.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Book of Mormon&#x27;s Daniel Breaker to Return to Joe&#x27;s Pub</a>
                        <div class="content-info">
                            <div>Cabaret News</div>
                            <div>March 9, 2015</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article6Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article6.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Gavin Creel Will Bring His Award-Winning Elder Price to Book of Mormon</a>
                        <div class="content-info">
                            <div>Theater News</div>
                            <div>December 4, 2014</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article7Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article7.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Van Davis, a Rock-Funk Band With Ties to Broadway&#x27;s The Book of Mormon, Will Release New CD</a>
                        <div class="content-info">
                            <div>Music News</div>
                            <div>June 12, 2014</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image">
                        <picture>
                            <source srcset="/assets/images/search/article8Th.jpg" media="(min-width: 1025px)">
                            <img src="/assets/images/search/article8.jpg" class="thumbnail" alt="Example image alt" />
                        </picture>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Daniel Breaker Will Join Broadway&#x27;s The Book of Mormon in February</a>
                        <div class="content-info">
                            <div>Theater News</div>
                            <div>January 29, 2014</div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>

        <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 class="search-section">
        <section class="content">
            <div class="section-title">
                <svg class="icon icon--play">
  <use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg>
                <h2 id="videos" class="title-highlight">Videos</h2>
            </div>
            <ul aria-labelledby="videos" class="content__list content__list--search">
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video1Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video1.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">EXCLUSIVE: The Making of the Poignant New Musical Dear Evan Hansen at Arena Stage</a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video2Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video2.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Meet Andrew Rannells, the New Queen of Broadway&#x27;s Hedwig and the Angry Inch</a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video3Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video3.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Aladdin Montage</a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video4Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video4.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Stephanie J. Block and Andrew Rannells Celebrate Broadway With the New York Pops </a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video5Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video5.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Les Misérables Returns to Broadway With Ramin Karimloo, Will Swenson, and More</a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video6Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video6.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Theatermania News Minute - Dec 15, 2011</a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video7Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video7.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Theatermania News Minute - Nov 30, 2011</a>
                    </div>
                </li>
                <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>
                            <picture>
                                <source srcset="/assets/images/search/video8Th.jpg" media="(min-width: 1025px)">
                                <img srcset="/assets/images/search/video8.jpg" class="thumbnail thumbnail--video" alt="Example image alt" />
                            </picture>
                        </div>
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Rory O&#x27;Malley&#x27;s Happy Day</a>
                    </div>
                </li>
            </ul>
        </section>

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

<footer class="footer">
    <div class="footer-main contain">
        <div class="footer-logo">
            <a href="#">
                <img src="/assets/images/logos/theatermania-notag-white.svg" alt="Theatermania Logo" />
            </a>
        </div>
        <div class="footer-nav-items">
            <nav class="footer-nav">
                <ul class="footer-nav__list">
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Tickets &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'}}
{{render '@text-banner' banner-modifiers merge=true}}
<main class="contain">
  <ul aria-label="{{aria}}" class="search-tabs">
    {{#each search-tabs}}
      <li class="search-tabs-list-item">
        {{#if disabled}}
          <span class="btn btn--base btn--disabled">{{copy}}</span>
          {{else}}
          <a href="#" class="btn btn--base btn--plain">{{copy}}</a>
        {{/if}}
      </li>
    {{/each}}
  </ul>
  {{#each search-sections}}
    <div class="search-section{{#if ad}} search-section--ad{{/if}}">
      {{render '@content-list' article-modifiers merge=true}}
      {{#if ad}}
        {{#if skyscraper}}
          {{render '@ads--300x600' skyscraper-modifiers merge=true}}
          {{else}}
            {{render '@ads--300x250'}}
        {{/if}}
      {{/if}}
    </div>
  {{/each}}
</main>
{{render '@ads--728x90' ad-modifiers-bottom merge=true}}
{{render '@footer'}}
 
{
  "banner-modifiers": {
    "title": "Results for 'Book of Mormon'",
    "info": null
  },
  "aria": "Search Categories",
  "ad-modifiers-bottom": {
    "class": "ad-container--footer",
    "imageSmall": "300x250.jpg"
  },
  "search-tabs": [
    {
      "copy": "All (589)"
    },
    {
      "copy": "Shows (5)"
    },
    {
      "copy": "Articles (564)"
    },
    {
      "copy": "Video (20)"
    },
    {
      "copy": "Theaters (0)",
      "disabled": true
    }
  ],
  "search-sections": [
    {
      "ad": true,
      "article-modifiers": {
        "ordered": null,
        "aria-id": "shows",
        "class": "search",
        "modifiers": {
          "title": "Shows",
          "aria-id": "shows",
          "icon": {
            "modifier": "tickets"
          }
        },
        "article-links": [
          {
            "article": true,
            "show": true,
            "title": "The Book of Mormon",
            "video": null,
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/showCard4Th.jpg",
              "imageSmall": "/assets/images/search/showCard4.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Eugene O'Neill Theatre"
              },
              {
                "copy": "New York City"
              }
            ]
          },
          {
            "article": true,
            "show": true,
            "title": "The Book of Mormon",
            "video": null,
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/showCard4Th.jpg",
              "imageSmall": "/assets/images/search/showCard4.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Prince of Wales Theatre"
              },
              {
                "copy": "London"
              }
            ]
          },
          {
            "article": true,
            "show": true,
            "title": "Broadway at the W",
            "video": null,
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/broadwayWTh.jpg",
              "imageSmall": "/assets/images/search/broadwayW.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "The Loft at W Hollywood"
              },
              {
                "copy": "Los Angeles"
              }
            ]
          },
          {
            "article": true,
            "show": true,
            "title": "The Book of Mormon",
            "video": null,
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/showCard4Th.jpg",
              "imageSmall": "/assets/images/search/showCard4.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "State Theatre"
              },
              {
                "copy": "Cleveland"
              }
            ]
          },
          {
            "article": true,
            "show": true,
            "title": "The Book of Mormon",
            "theater": "The Kennedy Center",
            "location": "Washington, D.C.",
            "video": null,
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/kennCenterTh.jpg",
              "imageSmall": "/assets/images/search/kennCenter.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "The Kennedy Center"
              },
              {
                "copy": "Washington, D.C."
              }
            ]
          }
        ]
      }
    },
    {
      "ad": true,
      "skyscraper": true,
      "skyscraper-modifiers": {
        "imageSmall": "300x250.jpg"
      },
      "article-modifiers": {
        "ordered": null,
        "aria-id": "articles",
        "class": "search",
        "modifiers": {
          "title": "Articles",
          "aria-id": "articles",
          "icon": {
            "modifier": "article"
          }
        },
        "article-links": [
          {
            "article": true,
            "title": "Broadway's The Book of Mormon to Release Original Broadway Cast Album on Vinyl",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article1Th.jpg",
              "imageSmall": "/assets/images/search/article1.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Music News"
              },
              {
                "copy": "November 17, 2016"
              }
            ]
          },
          {
            "article": true,
            "title": "Hamilton Finds Its Newest Tony-Nominated King George",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article2Th.jpg",
              "imageSmall": "/assets/images/search/article2.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Theater News"
              },
              {
                "copy": "March 28, 2016"
              }
            ]
          },
          {
            "article": true,
            "title": "Broadway's Book of Mormon Stars Light Empire State Building to Celebrate 5th Birthday",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article3Th.jpg",
              "imageSmall": "/assets/images/search/article3.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Photo Flash"
              },
              {
                "copy": "March 4, 2016"
              }
            ]
          },
          {
            "article": true,
            "title": "Glee's Samantha Marie Ware to Take the Cabaret Stage",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article4Th.jpg",
              "imageSmall": "/assets/images/search/article4.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Cabaret News"
              },
              {
                "copy": "June 29, 2015"
              }
            ]
          },
          {
            "article": true,
            "title": "Book of Mormon's Daniel Breaker to Return to Joe's Pub",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article5Th.jpg",
              "imageSmall": "/assets/images/search/article5.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Cabaret News"
              },
              {
                "copy": "March 9, 2015"
              }
            ]
          },
          {
            "article": true,
            "title": "Gavin Creel Will Bring His Award-Winning Elder Price to Book of Mormon",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article6Th.jpg",
              "imageSmall": "/assets/images/search/article6.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Theater News"
              },
              {
                "copy": "December 4, 2014"
              }
            ]
          },
          {
            "article": true,
            "title": "Van Davis, a Rock-Funk Band With Ties to Broadway's The Book of Mormon, Will Release New CD",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article7Th.jpg",
              "imageSmall": "/assets/images/search/article7.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Music News"
              },
              {
                "copy": "June 12, 2014"
              }
            ]
          },
          {
            "article": true,
            "title": "Daniel Breaker Will Join Broadway's The Book of Mormon in February",
            "thumbnail": true,
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/article8Th.jpg",
              "imageSmall": "/assets/images/search/article8.jpg",
              "image-alt": "Example image alt"
            },
            "info": [
              {
                "copy": "Theater News"
              },
              {
                "copy": "January 29, 2014"
              }
            ]
          }
        ]
      }
    },
    {
      "article-modifiers": {
        "ordered": null,
        "aria-id": "videos",
        "class": "search",
        "modifiers": {
          "title": "Videos",
          "aria-id": "videos",
          "icon": {
            "modifier": "play"
          }
        },
        "article-links": [
          {
            "article": true,
            "video": true,
            "title": "EXCLUSIVE: The Making of the Poignant New Musical Dear Evan Hansen at Arena Stage",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video1Th.jpg",
              "imageSmall": "/assets/images/search/video1.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Meet Andrew Rannells, the New Queen of Broadway's Hedwig and the Angry Inch",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video2Th.jpg",
              "imageSmall": "/assets/images/search/video2.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Aladdin Montage",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video3Th.jpg",
              "imageSmall": "/assets/images/search/video3.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Stephanie J. Block and Andrew Rannells Celebrate Broadway With the New York Pops ",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video4Th.jpg",
              "imageSmall": "/assets/images/search/video4.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Les Misérables Returns to Broadway With Ramin Karimloo, Will Swenson, and More",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video5Th.jpg",
              "imageSmall": "/assets/images/search/video5.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Theatermania News Minute - Dec 15, 2011",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video6Th.jpg",
              "imageSmall": "/assets/images/search/video6.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Theatermania News Minute - Nov 30, 2011",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video7Th.jpg",
              "imageSmall": "/assets/images/search/video7.jpg",
              "image-alt": "Example image alt"
            }
          },
          {
            "article": true,
            "video": true,
            "title": "Rory O'Malley's Happy Day",
            "modifiers": {
              "picture": true,
              "class": "content-link-image",
              "image": "/assets/images/search/video8Th.jpg",
              "imageSmall": "/assets/images/search/video8.jpg",
              "image-alt": "Example image alt"
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    .search-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
  list-style: none;

  @include breakpoint($break-xsmall) {
    margin-top: 1.75rem;
  }

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

.search-tabs-list-item {
  flex: 0 1 100%;
  margin: 0 0 0.5rem 0;
  padding: 0;

  @include breakpoint($break-xsmall) {
    flex: 0 1 48%;
    margin-bottom: 0.75rem;
  }

  @include breakpoint($break-medium) {
    flex: 0 1 auto;
    margin: 0 0.75rem 0 0;

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

.btn {
  .search-tabs-list-item & {
    display: block;
    padding: 0.5rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
    font-size: $ms-neg-1;

    @include breakpoint($break-small) {
      padding: 0.63rem 2rem;
    }
  }
}

.search-section--ad {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @include breakpoint($break-medium) {
    flex-direction: row;
  }
}

.content {
  .search-section & {
    margin: 0;
  }

  .search-section--ad & {
    @include breakpoint($break-medium) {
      flex: 0 1 calc(100% - 18.75rem);
    }
  }
}

.ad-container {
  .search-section--ad & {
    flex: 0 1 calc(18.75rem + 8%);
    margin: 0 0 2.5rem;

    @include breakpoint($break-medium) {
      justify-content: flex-end;
      flex: 0 1 calc(18.75rem + 4%);
    }
  }
}

.search-section--ad {
  @include breakpoint($break-medium) {
    &:nth-child(odd) {
      .ad-container {
        order: -1;
        justify-content: flex-start;
      }
    }
  }
}

.content__list--search {
  .search-section--ad & {
    justify-content: space-between;

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

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

.content-list-item {
  .search-section--ad & {
    @include breakpoint($break-medium) {
      flex: 0 1 47%;
      margin-right: 0;
    }

    @include breakpoint($break-large) {
      flex: 0 1 48%;

      &:nth-last-child(3) {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid $color-border;
      }
    }
  }

  .search-section & {
    @include breakpoint($break-xsmall) {
      &:nth-last-child(-n+2) {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}

.content-link-image {
  .search-section & {
    @include breakpoint($break-large) {
      margin-right: 1rem;
      min-width: 120px;
      max-width: 120px;
    }
  }
}

.content-info {
  .content__list--search & {
    font-size: $ms-neg-1;
    font-style: italic;
  }
}

.content {
  .search-section--ad & {
    margin-bottom: 2.5rem;
  }
}
  • URL: /components/raw/search-page/Search-Page.scss
  • Filesystem Path: src/components/03-Views/Search Page/Search-Page.scss
  • Size: 2.7 KB

There are no notes for this item.