TheaterMania Component Library

Large Show Console: Theatermania 

<div class="show-console">
    <div class="section-title">
        <svg class="icon icon--tickets">
  <use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
        <h2 class="title-highlight">Featured in this Story</h2>
    </div>
    <div class="show-console__show">
        <div class="show-console-image">
            <a href="#"><img src="/assets/images/articles/showCard1.jpg" class="thumbnail" alt="Hamliton promo poster - Hamliton standing on black star with golden rough metal as background" /></a>
        </div>
        <div class="show-console-info">
            <a href="#" class="show-console-play">Hamilton</a>
            <div class="show-console-location">
                <a href="#" class="show-console-theater">Richard Rodgers Theatre</a>
                <span class="show-console-text-divider">|  </span>
                <span>New York City</span>
            </div>
            <p class="show-console-copy">
                <span class="show-console-genre">
            Musical, 
            Broadway Hit, 
            History
        </span>
                <span class="show-console-text-divider">|  </span>
                <span class="show-console-date">Closes July 18, 2017</span>
            </p>
            <button class="btn btn--base btn--cta">
  Buy Tickets ($65+)
</button>

            <span class="show-console-fees">
          <strong>Theatermania is not a broker and does not mark up ticket prices in any way.</strong>
        </span>
        </div>
    </div>
</div>
 
<div class="show-console">
  {{render '@section-title' modifiers merge=true}}
  <div class="show-console__show">
    <div class="show-console-image">
      <a href="#"><img src="/assets/images/articles/{{image}}" class="thumbnail" alt="{{image-alt}}" /></a>
    </div>
    <div class="show-console-info">
      <a href="#" class="show-console-play">{{play}}</a>
      <div class="show-console-location">
        <a href="#" class="show-console-theater">{{theater}}</a>
        <span class="show-console-text-divider">{{text-divider}} </span>
        <span>{{location}}</span>
      </div>
      <p class="show-console-copy">
        <span class="show-console-genre">
          {{#each genres}}
            {{genre}}
          {{/each}}
        </span>
        <span class="show-console-text-divider">{{text-divider}} </span>
        <span class="show-console-date">{{date}}</span>
      </p>
      {{#if theatermania}}
        {{render '@buttons--cta' buttonModifiers merge=true}}
        <span class="show-console-fees">
          <strong>{{price}}</strong>
        </span>
        {{else}}
        {{render '@buttons--cta' buttonModifiers merge=true}}
      {{/if}}
    </div>
  </div>
</div>
 
{
  "theatermania": true,
  "image": "showCard1.jpg",
  "image-alt": "Hamliton promo poster - Hamliton standing on black star with golden rough metal as background",
  "play": "Hamilton",
  "theater": "Richard Rodgers Theatre",
  "location": "New York City",
  "date": "Closes July 18, 2017",
  "text-divider": "| ",
  "modifiers": {
    "title": "Featured in this Story",
    "aria-id": null,
    "icon": {
      "modifier": "tickets"
    }
  },
  "genres": [
    {
      "genre": "Musical, "
    },
    {
      "genre": "Broadway Hit, "
    },
    {
      "genre": "History"
    }
  ],
  "copy": "Broadway's Best Seller and Winner of 11 Tony Awards",
  "buttonModifiers": {
    "buttonValue": "Buy Tickets ($65+)"
  },
  "price": "Theatermania is not a broker and does not mark up ticket prices in any way."
}
  • Content: 
    .show-console {
  margin-bottom: 2.5rem;
}

.show-console__show {
  display: flex;
  flex-direction: column;

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

.show-console-image {
  flex: 0 1 75%;
  align-self: center;
  margin: 1.25rem auto 0;

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

  @include breakpoint($break-medium) {
    flex: 0 1 60%;
  }

  @include breakpoint($break-large) {
    flex: 0 1 auto;
  }
}

.show-console-info {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin-top: 1rem;
  text-align: center;

  @include breakpoint($break-small) {
    text-align: left;
    flex: 0 1 100%;
  }

  @include breakpoint($break-large) {
    flex: 1;
  }
}

.show-console-copy {
  margin-top: 0;
  font-size: $ms-neg-1;
}

.show-console-location {
  margin-bottom: 0.5rem;
  line-height: $line-height;
}

.show-console-theater {
  @include breakpoint($break-small) {
    margin-bottom: 0.25rem;
  }
}

.show-console-genre {
  margin-right: 0.15rem;
  font-style: italic;

  @include breakpoint($break-medium) {
    display: block;
  }
}

.show-console-text-divider {
  .show-console-copy & {
    @include breakpoint($break-medium) {
      display: none;
    }
  }
}

.show-console-date {
  font-size: $ms-neg-1;
}

.show-console-play {
  display: block;
  margin-bottom: 0.5rem;
  font-size: $ms-3;
  font-family: $font-title;

  @include breakpoint($break-xlarge) {
    margin-right: 0.75rem;
  }
}

.show-console-fees {
  display: block;
  margin-top: 1.5rem;
  font-size: $ms-neg-1;
  line-height: 1.3;
}
  • URL: /components/raw/large-show-console/Large-Show-Console.scss
  • Filesystem Path: src/components/02-Patterns/Show Console/Large Show Console/Large-Show-Console.scss
  • Size: 1.6 KB

There are no notes for this item.