TheaterMania Component Library

Show Banner 

<div class="show-banner">
    <div class="banner js-banner">
        <div class="banner__video">
            <div class="video">
                <div class="video__banner">
                    <!-- This is using a sample bright cove video player called Peter G test (560 height).
       I removed the initial DIVs position relative provided by Brightcove for the
       max-height demo seen in Banner.js.  -->
                    <div style="display: block;">
                        <div style="padding-top: 43.75%;"><video data-video-id="5536441155001" data-account="64254751001" data-player="BkwMOPODb" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
                            <script src="//players.brightcove.net/64254751001/BkwMOPODb_default/index.min.js"></script>
                        </div>
                    </div>
                </div>
            </div>

            <button class="banner__video-controls js-banner__video-controls" aria-label="Pause">
        <span class="controls-pause"><svg class="icon icon--pause">
  <use xlink:href="/assets/icons/sprite-sheet.svg#pause"></use>
</svg></span>
        <span class="controls-play"><svg class="icon icon--play">
  <use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg></span>
      </button>
        </div>
    </div>

    <section class="show-banner__show">
        <div class="show-banner-info contain">
            <div class="show-banner-image">
                <img src="/assets/images/showpage/missSaigon.jpg" class="thumbnail" alt="Example image alt" />
            </div>
            <div class="show-banner-show-info">
                <h1 class="heading-xlarge">Miss Saigon</h1>
                <div class="show-banner-location">
                    <a href="#" class="show-banner-location-info">Broadway Theatre</a>, <a href="#" class="show-banner-location-info">New York City</a>
                </div>
                <div class="show-banner-genre">
                    <div class="tags">
                        <ul class="tags__list" aria-label="Tags list">
                            <li class="tags-list-item">
                                <a href="#" class="btn btn--base btn--plain">Musical</a>
                            </li>
                            <li class="tags-list-item">
                                <a href="#" class="btn btn--base btn--plain">Drama</a>
                            </li>
                            <li class="tags-list-item">
                                <a href="#" class="btn btn--base btn--plain">Broadway Hit</a>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="show-banner-tickets">
                    <button class="btn btn--base btn--cta js-tickets-button">
  Regular Tickets ($104+)
</button>

                    <button class="btn btn--base btn--primary">
  Discount Tickets ($64+)
</button>

                </div>
            </div>
        </div>
    </section>
</div>
 
<div class="show-banner">
  {{#if banner}}
    {{render '@banner' banner-modifiers merge=true}}
  {{/if}}
  <section class="show-banner__show">
    <div class="show-banner-info contain">
      {{#if image-show}}
        <div class="show-banner-image">
          <img src="/assets/images/showpage/{{image-show}}" class="thumbnail" alt="{{image-alt-show}}" />
        </div>
      {{/if}}
      <div class="show-banner-show-info">
        <h1 class="heading-xlarge">{{title}}</h1>
        <div class="show-banner-location">
          <a href="#" class="show-banner-location-info">{{theater}}</a>, <a href="#" class="show-banner-location-info">{{theater-city}}</a>
        </div>
        {{#if genres}}
          <div class="show-banner-genre">
            {{render '@tags' tags-modifier merge=true}}
          </div>
        {{/if}}
        {{#if closed}}
          <div class="show-closed">
            {{render '@icons--clock' closed-modifiers merge=true}}
            <span class="show-closed-copy">{{closed-copy}}</span>
          </div>
        {{/if}}
        {{#if low-content-ticket}}
          <div class="show-banner-tickets">
            {{render '@buttons--cta' modifiers merge=true}}
          </div>
        {{/if}}
        {{#if ticket-buttons}}
          <div class="show-banner-tickets">
            {{#each ticket-buttons}}
              {{#if button}}
                {{#if cta}}
                  {{render '@buttons--cta' modifiers merge=true}}
                  {{else}}
                  {{render '@buttons' modifiers merge=true}}
                {{/if}}
              {{/if}}
            {{/each}}
            {{#if star-rating}}
              {{render '@rating' star-modifier merge=true}}
            {{/if}}
          </div>
        {{/if}}
      </div>
    </div>
  </section>
</div>
 
{
  "banner": true,
  "image-show": "missSaigon.jpg",
  "image-alt-show": "Example image alt",
  "title": "Miss Saigon",
  "theater": "Broadway Theatre",
  "theater-city": "New York City",
  "related-link-text": "All Related Articles",
  "genres": true,
  "theatermania": true,
  "banner-modifiers": {
    "video-banner": true,
    "video-modifiers": {
      "video-banner": true
    }
  },
  "tags-modifier": {
    "tags": [
      {
        "link": true,
        "item": "Musical"
      },
      {
        "link": true,
        "item": "Drama"
      },
      {
        "link": true,
        "item": "Broadway Hit"
      }
    ]
  },
  "ticket-buttons": [
    {
      "button": true,
      "cta": true,
      "modifiers": {
        "buttonValue": "Regular Tickets ($104+)",
        "class": "js-tickets-button"
      }
    },
    {
      "button": true,
      "modifiers": {
        "buttonValue": "Discount Tickets ($64+)"
      }
    }
  ]
}

There are no notes for this item.