TheaterMania Component Library

Category Page 

<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">Theater News</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">
    <!--<h1></h1>-->
    <div class="category-items">
        <div class="content">
            <ul class="content__list content__list--category">
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category1.jpg" alt="Performer singing on stage under spotlight" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Jenn Colella, Andy Karl, Bette Midler, and More Receive Outer Critics Circle Awards</a>
                        <div class="content-info">
                            <div>The new comedy about Cindy Lou Who will make it to New York this fall.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category2.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Rachel Chavkin Directs I&#x27;ll Get You Back Again at Round House Theatre</a>
                        <div class="content-info">
                            <div>Performances of Sarah Gancher&#x27;s play begin tonight.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category3.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">The Briefly Dead to Have World Premiere at 59E59 Theaters</a>
                        <div class="content-info">
                            <div>Stephen Kaliski pens a modern reinterpretation of Greek theater.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category4.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Dominique Morisseau &amp; Ping Chong &amp; Company Receive Art of Change Fellowships</a>
                        <div class="content-info">
                            <div>The Ford Foundation recognizes artists and cultural leaders who &#x27;blend artistic brilliance with commitment to social justice, and pursue their creative lives in a spirit of generous collaboration.&#x27;</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="category-item-ad">
                <div class="ad-container">
                    <a href="#">
                        <picture>
                            <source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
                            <img src="/assets/images/ads/300x250.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
                        </picture>
                    </a>
                </div>

            </div>
            <ul aria-label="theater news" class="content__list content__list--category">
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category5.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Jonah Platt and More Set for Beauty and the Beast - A Christmas Rose Panto</a>
                        <div class="content-info">
                            <div>The production will take place at the Pasadena Civic Auditorium.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category6.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Desperate Measures Extends at the York Theatre Company</a>
                        <div class="content-info">
                            <div>The musical&#x27;s New York premiere adds two weeks of performances.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category7.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Barrington Stage Explores Psychological Manipulation With Gaslight</a>
                        <div class="content-info">
                            <div>Performances of Patrick Hamilton&#x27;s drama begin tonight on the Boyd-Quinson Mainstage.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category8.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Casting Set for Public Theater&#x27;s Mobile Unit Winter&#x27;s Tale</a>
                        <div class="content-info">
                            <div>Lee Sunday Evans will direct the Shakespearean late romance.</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="category-item-ad">
                <div class="ad-container">
                    <a href="#">
                        <picture>
                            <source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
                            <img src="/assets/images/ads/300x250.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
                        </picture>
                    </a>
                </div>

            </div>
            <ul aria-label="theater news" class="content__list content__list--category">
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category9.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">EXCLUSIVE: Hershey Felder to Return to US for One-Night-Only {Jewish} Sing-Along</a>
                        <div class="content-info">
                            <div>Felder will perform the work of great Jewish composers from George Gershwin to Leonard Bernstein.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category10.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Curvy Widow to End Off-Broadway Run at the Westside Theatre</a>
                        <div class="content-info">
                            <div>Nancy Opel leads the cast of the new musical comedy.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category11.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Jessie Mueller to Star in Industry Readings of The Museum of Broken Relationships</a>
                        <div class="content-info">
                            <div>The new musical features music by Daniel Green and book and lyrics by David H. Bell.</div>
                        </div>
                    </div>
                </li>
                <li class="content-list-item">
                    <a href="#article-link" class="content-link-image--category">
                        <img src="/assets/images/category/category12.jpg" alt="placeholder alt" class="thumbnail" />
                    </a>

                    <div class="content-list-info">
                        <a href="#" class="content-link-title">Ayad Akhtar to Discuss Junk With Director Doug Hughes</a>
                        <div class="content-info">
                            <div>The free pre-performance talk is part of Lincoln Center Theater&#x27;s Platform Series.</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <div class="category-pagination">
        <ul class="pagination">
            <li class="pagination-control">
                <a href="#page-link" class="pagination-item">
                    <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-left"></use>
</svg>
                    <span class="visually-hidden-medium-up prev">Previous</span>
                </a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">1</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">2</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">3</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">4</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item pagination-item--active">5</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">6</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">7</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">8</a>
            </li>
            <li class="pagination-control">
                <a href="" class="pagination-item">9</a>
            </li>
            <li class="pagination-control">
                <a href="#page-link" class="pagination-item">
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-right"></use>
</svg>
                    <span class="visually-hidden-medium-up next">Next</span>
                </a>
            </li>
        </ul>
    </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' text-modifiers merge=true}}
<main class="contain">
  <!--<h1>{{title}}</h1>-->
  <div class="category-items">
    {{render '@content-list' content-modifiers merge=true}}
  </div>
  <div class="category-pagination">
    {{render '@pagination'}}
  </div>
</main>
{{render '@ads--728x90' ad-modifiers-bottom merge=true}}
{{render '@footer'}}
 
{
  "text-modifiers": {
    "title": "Theater News",
    "info": null
  },
  "ad-modifiers-bottom": {
    "class": "ad-container--footer",
    "imageSmall": "300x250.jpg"
  },
  "content-modifiers": {
    "section-title": null,
    "aria-id": null,
    "aria-label": "theater news",
    "ordered": null,
    "class": "category",
    "article-links": [
      {
        "article": true,
        "title": "Jenn Colella, Andy Karl, Bette Midler, and More Receive Outer Critics Circle Awards",
        "thumbnail": true,
        "read-more": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category1.jpg",
          "image-alt": "Performer singing on stage under spotlight"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "David Gordon",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "The new comedy about Cindy Lou Who will make it to New York this fall."
          }
        ]
      },
      {
        "article": true,
        "title": "Rachel Chavkin Directs I'll Get You Back Again at Round House Theatre",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category2.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Jason Zednick",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "Performances of Sarah Gancher's play begin tonight."
          }
        ]
      },
      {
        "article": true,
        "title": "The Briefly Dead to Have World Premiere at 59E59 Theaters",
        "video": null,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category3.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Hayley Levitt",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "Stephen Kaliski pens a modern reinterpretation of Greek theater."
          }
        ]
      },
      {
        "article": true,
        "title": "Dominique Morisseau & Ping Chong & Company Receive Art of Change Fellowships",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category4.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Bethany Rickwald",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "The Ford Foundation recognizes artists and cultural leaders who 'blend artistic brilliance with commitment to social justice, and pursue their creative lives in a spirit of generous collaboration.'"
          }
        ]
      },
      {
        "article": true,
        "ad": true,
        "class": "category",
        "aria-label": "theater news",
        "ad-modifiers": {
          "imageSmall": "300x250.jpg"
        }
      },
      {
        "article": true,
        "title": "Jonah Platt and More Set for Beauty and the Beast - A Christmas Rose Panto",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category5.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Editorial Staff",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "The production will take place at the Pasadena Civic Auditorium."
          }
        ]
      },
      {
        "article": true,
        "title": "Desperate Measures Extends at the York Theatre Company",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category6.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Hayley Levitt",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "The musical's New York premiere adds two weeks of performances."
          }
        ]
      },
      {
        "article": true,
        "title": "Barrington Stage Explores Psychological Manipulation With Gaslight",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category7.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Jason Zednick",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "Performances of Patrick Hamilton's drama begin tonight on the Boyd-Quinson Mainstage."
          }
        ]
      },
      {
        "article": true,
        "title": "Casting Set for Public Theater's Mobile Unit Winter's Tale",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category8.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "David Gordon",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "Lee Sunday Evans will direct the Shakespearean late romance."
          }
        ]
      },
      {
        "article": true,
        "ad": true,
        "class": "category",
        "aria-label": "theater news",
        "ad-modifiers": {
          "imageSmall": "300x250.jpg"
        }
      },
      {
        "article": true,
        "title": "EXCLUSIVE: Hershey Felder to Return to US for One-Night-Only {Jewish} Sing-Along",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category9.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Hayley Levitt",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "Felder will perform the work of great Jewish composers from George Gershwin to Leonard Bernstein."
          }
        ]
      },
      {
        "article": true,
        "title": "Curvy Widow to End Off-Broadway Run at the Westside Theatre",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category10.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Hayley Levitt",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "Nancy Opel leads the cast of the new musical comedy."
          }
        ]
      },
      {
        "article": true,
        "title": "Jessie Mueller to Star in Industry Readings of The Museum of Broken Relationships",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category11.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Kenji Fujishima",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "The new musical features music by Daniel Green and book and lyrics by David H. Bell."
          }
        ]
      },
      {
        "article": true,
        "title": "Ayad Akhtar to Discuss Junk With Director Doug Hughes",
        "thumbnail": true,
        "modifiers": {
          "picture": null,
          "class": "content-link-image--category",
          "image": "/assets/images/category/category12.jpg",
          "image-alt": "placeholder alt"
        },
        "byline-modifiers": {
          "byline-item": [
            {
              "by-copy": "By ",
              "item": "Kenji Fujishima",
              "link": true
            }
          ]
        },
        "info": [
          {
            "copy": "The free pre-performance talk is part of Lincoln Center Theater's Platform Series."
          }
        ]
      }
    ]
  }
}
  • Content: 
    .category-items {
  margin-top: 2.5rem;
}

.content__list--category {
  @include breakpoint($break-small) {
    justify-content: space-between;
  }
}

.content-list-item {
  .content__list--category & {
    border-bottom: 1px solid $color-border;

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

    @include breakpoint($break-xsmall) {
      flex: 0 1 46%;

      &:nth-last-child(-n+2) {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }

    @include breakpoint($break-small) {
      flex: 0 1 47.5%;
      margin: 0 0 1.5rem;
      padding-bottom: 1rem;
    }

    @include breakpoint($break-medium) {
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
    }

    @include breakpoint($break-large) {
      padding-bottom: 2rem;
    }
  }
}

.content-link-image--category {
  margin-bottom: 1rem;

  @include breakpoint($break-medium) {
    width: 100%;
    background: $color-gray;
    border: 1px solid $color-gray;
  }

  @include breakpoint($break-large) {
    flex: 1 0 auto;
    margin: 0 1.25rem 0 0;
    max-width: 190px;
    background: none;
    border: none;
  }
}

.thumbnail {
  .content-link-image--category & {
    margin: 0 auto;
  }
}

.content-info {
  .content__list--category & {
    @include breakpoint($break-xsmall) {
      margin-top: 0.25rem;
    }

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

.content-link-title {
  .content__list--category & {
    @include breakpoint($break-large) {
      margin-top: -0.31rem;
    }
  }
}

.category-pagination {
  margin: 2.5rem 0 3.5rem;

  @include breakpoint($break-medium) {
    margin-top: 4.5rem;
  }
}

.ad-container {
  .category-item-ad & {
    margin: 2.5rem 0;

    @include breakpoint($break-medium) {
      margin: 2.5rem 0 4rem;
    }
  }
}
  • URL: /components/raw/category-page/Category-Page.scss
  • Filesystem Path: src/components/03-Views/Category Page/Category-Page.scss
  • Size: 1.8 KB

There are no notes for this item.