TheaterMania Component Library

Show Console: Theatermania 

<div class="show-console show-console--small">
    <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-date">Closes July 18, 2017</span>
            </p>
            <button class="btn btn--base btn--cta">
  Buy Tickets ($65+)
</button>

        </div>
    </div>
</div>
 
<div class="show-console show-console--small">
  <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-date">{{date}}</span>
      </p>
      {{render '@buttons--cta' buttonModifiers merge=true}}
    </div>
  </div>
</div>
 
{
  "title": "Best Priced Shows",
  "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",
  "date": "Closes July 18, 2017",
  "location": "New York City",
  "text-divider": "| ",
  "theatermania": true,
  "genres": [
    {
      "genre": "Musical, "
    },
    {
      "genre": "Broadway Hit, "
    },
    {
      "genre": "History"
    }
  ],
  "buttonModifiers": {
    "buttonValue": "Buy Tickets ($65+)"
  }
}
  • Content: 
    .show-console--small {
  margin: 0 auto 1.5rem;
  padding-top: 0;
  border-top: none;

  &:last-child {
    .show-console__show {
      border-bottom: none;

      @include breakpoint($break-small) {
        border-bottom: 1px solid $color-gray-lighter;
      }
    }
  }

  &:nth-last-child(-n+2) {
    .show-console__show {
      @include breakpoint($break-small) {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }

  @include breakpoint($break-small) {
    display: flex;
    margin: 0 0 1rem;
    flex: 0 1 46%;
  }
}

.show-console__show {
  .show-console--small & {
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid $color-gray-lighter;

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

    @include breakpoint($break-small) {
      padding-bottom: 2rem;
      flex-direction: column;
    }
  }
}

.show-console-image {
  .show-console--small & {
    margin-top: 0;

    @include breakpoint($break-xsmall) {
      flex: 0 1 45%;
      margin: 0 1.5rem 0 0;
    }

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

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

.show-console-info {
  .show-console--small & {
    @include breakpoint($break-xsmall) {
      flex: 0 1 55%;
      margin-top: 0;
      text-align: left;
    }

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

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

.show-console-play {
  .show-console--small & {
    font-size: $ms-1;
  }
}

.show-console-fees {
  .show-console--small & {
    margin-top: 1rem;
  }
}

.show-console-theater {
  .show-console--small & {
    @include breakpoint($break-medium) {
      display: block;
      margin-bottom: 0;
    }

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

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

    @include breakpoint($break-large) {
      display: inline;
    }
  }
}

.btn--cta {
  .show-console--small & {
    @include breakpoint($break-xsmall) {
      margin-top: auto;
      font-size: $ms-neg-1;
    }

    @include breakpoint($break-large) {
      font-size: $ms-0;
    }
  }
}

.show-console-location {
  .show-console--small & {
    font-size: $ms-neg-1;
  }
}

.show-console-genre {
  .show-console--small & {
    display: block;
  }
}
  • URL: /components/raw/small-show-console/Small-Show-Console.scss
  • Filesystem Path: src/components/02-Patterns/Show Console/Small Show Console/Small-Show-Console.scss
  • Size: 2.5 KB

There are no notes for this item.