TheaterMania Component Library

Show Listing 

<div class="show-listing-show">
    <a class="show-image" href="#">
        <img class="thumbnail" src="/assets/images/guidepage/bandsvisit.jpg" alt="Example alt" />
    </a>
    <div class="show-info">
        <a class="show-title" href="#">The Band&#x27;s Visit</a>
        <div class="show-details">
            <a href="#" class="show-details-item">Ethel Barrymore Theatre</a>
        </div>
    </div>
    <div class="show-button">
    </div>
</div>
 
{{#if section-title}}
  {{render '@section-title' section-modifiers merge=true}}
{{/if}}
<div class="show-listing-show{{#if class}} {{class}}{{/if}}">
  {{#if standard}}
  <a class="show-image" href="#">
    <img class="{{#if featured}}show-image-featured{{else}}thumbnail{{/if}}" src="/assets/images/guidepage/{{image}}" alt="{{image-alt}}" />
  </a>
  {{/if}}
  {{#if compact}}
    <button class="btn btn--base show-image">
      <img class="{{#if featured}}show-image-featured{{else}}thumbnail{{/if}}" src="/assets/images/guidepage/{{image}}" alt="{{image-alt}}" />
    </button>
  {{/if}}
  {{#if title}}
    <div class="show-info">
      <a class="show-title" href="#">{{title}}</a>
      {{#if description}}
        <p class="show-description">{{description}}</p>
      {{/if}}
      {{#if details}}
        <div class="show-details">
          <a href="#" class="show-details-item">{{theater}}</a>
          {{#if date}}
            <div class="show-details-date">
              {{render '@icons--clock'}}
              <span class="show-details-item show-details-item--date">{{date}}</span>
            </div>
          {{/if}}
          {{#if tags-modifier}}
            {{render '@tags--tags-text' tags-modifier merge=true}}
          {{/if}}
        </div>
      {{/if}}
    </div>
  {{/if}}
  <div class="show-button">
    {{#if notice-copy}}
      <div class="show-notice">
        {{render '@icons--tickets' notice-icon merge=true}}
        <span class="show-notice-item">{{notice-copy}}</span>
      </div>
    {{/if}}
    {{#if button-disabled}}
      {{render '@buttons--disabled' button-modifiers merge=true}}
    {{/if}}
    {{#if button-discount}}
      {{render '@buttons--primary' button-modifiers merge=true}}
    {{/if}}
    {{#if button-cta}}
      {{render '@buttons--cta' button-modifiers merge=true}}
    {{/if}}
  </div>
</div>
 
{
  "image": "bandsvisit.jpg",
  "image-alt": "Example alt",
  "title": "The Band's Visit",
  "theater": "Ethel Barrymore Theatre",
  "details": true,
  "standard": true,
  "button-modifiers": {
    "buttonValue": "Buy Tickets ($65+)"
  }
}
  • Content: 
    .show-listing {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;

  @include breakpoint($break-xsmall) {
    justify-content: space-between;
  }

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

.show-listing--featured {
  @include breakpoint($break-xsmall) {
    justify-content: center;
  }

  @include breakpoint($break-large) {
    flex: 0 1 100%;
    justify-content: space-between;
  }
}

.show-listing-item {
  display: flex;
  position: relative;
  margin: 0 auto 1.25rem;
  padding: 0 0 1.25rem;
  max-width: 19.25rem;
  border-bottom: 1px solid $color-border;

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

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

    &:last-child {
      margin-bottom: 1.25rem;
    }

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

  @include breakpoint($break-small) {
    max-width: none;
  }

  @include breakpoint($break-medium) {
    flex: 0 1 31%;
    margin-right: calc(7% / 2);

    &:nth-of-type(3n) {
      margin-right: 0;
    }

    &:nth-last-child(-n+3) {
      border-bottom: none;
    }
  }

  @include breakpoint($break-large) {
    flex: 0 1 23%;
    margin-right: calc(8% / 3);

    &:nth-of-type(3n) {
      margin-right: calc(8% / 3);
    }

    &:nth-of-type(4n) {
      margin-right: 0;
    }

    &:nth-last-child(-n+4) {
      border-bottom: none;
    }
  }
}

.show-listing-item--featured {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  border-bottom: none;

  &:last-child {
    padding-bottom: 0;
  }

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

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

  @include breakpoint($break-xsmall) {
    flex: 0 1 100%;
    margin-bottom: 2.5rem;

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

  @include breakpoint($break-small) {
    flex: 0 1 48%;
    flex-direction: column;
    margin: 0 4% 0 0;

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

  @include breakpoint($break-large) {
    flex: 0 1 48.5%;
    margin-right: 3%;

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

.show-listing-show {
  display: flex;
  flex-direction: column;
  width: 100%;

  .show-listing-item--featured & {
    box-sizing: border-box;

    @include breakpoint($break-xsmall) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: auto;
      height: 100%;
    }
  }
}

.show-image {
  align-self: baseline;
  display: inline-block;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 19.25rem;
  box-shadow: 0px 1px 1px 0 rgba(0,0,0, 0.35);

  .show-listing-item--featured & {
    flex: 0 1 40%;
    align-self: stretch;
    margin: 0 0 1rem;
    background: $color-gray-lighter;
    box-shadow: none;

    @include breakpoint($break-xsmall) {
      display: flex;
      margin-bottom: 0;
      max-width: none;
    }

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

    @include breakpoint($break-large) {
      flex: 0 1 40%;
      align-self: stretch;
    }
  }

  &.btn {
    .show-listing-show--compact & {
      padding: 0;
      box-shadow: none;
    }
  }
}

.thumbnail {
  .show-listing-item & {
    width: 100%;
  }
}

.show-description {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0 1rem;
  font-size: $ms-neg-1;

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

  @include breakpoint($break-large) {
    padding: 0 1.5rem;
  }
}

.show-title {
  display: inline-block;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  font-size: $ms-2;

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

  @include breakpoint($break-xlarge) {
    font-size: $ms-2;
  }

  .show-listing--featured & {
    margin: -0.25rem 0 0.5rem;

    @include breakpoint($break-xsmall) {
      margin-bottom: 1rem;
      padding: 1.5rem 1rem 0;
      font-size: $ms-1;
    }

    @include breakpoint($break-large) {
       padding: 1.5rem 1.5rem 0;
    }
  }

  .show-listing-item--row & {
    font-size: $ms-0;
  }
}

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

.show-details-item {
  display: block;
  margin-bottom: 0.75rem;
}

.show-details-item--date {
  display: inline;
  vertical-align: middle;
}

.icon--clock {
  .show-notice & {
    margin-top: -0.16rem;
    width: 1rem;
    height: 1rem;
    stroke-width: 4;
  }

  .show-details & {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 4;
  }
}

.btn {
  .show-listing & {
    width: 100%;

    @include breakpoint($break-xsmall) {
      padding: 0.63rem 1rem;
      font-size: $ms-neg-1;
    }

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

    @include breakpoint($break-medium) {
      font-size: $ms-neg-1;
    }

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

  .show-listing--featured & {
    border-radius: 0;
    width: 100%;

    &:last-child {
      margin-top: auto;
    }

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

  .show-listing-item--row & {
    margin-top: auto;
    border-radius: 0;
  }
}

.show-details-date {
  margin-bottom: 0.75rem;
}

.show-listing-item-ad {
  flex: 0 1 100%;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.show-listing-show {
  .show-listing--featured & {
    max-width: 19.25rem;
    box-shadow: 0 0 0.38rem 1px rgba($color-black, 0.2);

    @include breakpoint($break-xsmall) {
      max-width: none;
      width: 100%;
    }
  }
}

.ad-container {
  .show-listing-item-ad & {
    margin: 1.25rem 0 2.5rem;

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

.show-info {
  margin: 1rem 0 0.25rem;
  text-align: center;

  @include breakpoint($break-xsmall) {
    text-align: left;
  }

  .show-listing--featured & {
    flex: 0 1 60%;
    align-self: center;
    margin: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;

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

    @include breakpoint($break-large) {
      align-self: center;
      flex: 0 60%;
      padding: 0;
    }
  }

  .show-listing-item--row & {
    padding: 0 1rem;
    text-align: center;
  }
}

.section-title {
  .show-listing--featured & {
    align-self: baseline;
    width: 100%;
  }
}

.tags__list {
  .show-listing & {
    justify-content: center;

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

.show-image-featured {
  align-self: center;
  margin: 0 auto;

  @include breakpoint($break-medium) {
    max-width: 18.75rem;
    width: 100%;
  }

  @include breakpoint($break-large) {
    max-width: 100%;
  }
}

.show-notice {
  margin-top: -0.5rem;
  padding: 0.5rem 0;
  border-top: 2px solid $color-accent-red;
  font-size: $ms-neg-1;
  text-align: center;
  color: $color-accent-red;

  .icon {
    margin: -0.13rem 0.16rem 0 0;
    width: 1.1rem;
    height: 1.1rem;
    stroke: $color-accent-red;
  }

  .show-listing-show--compact & {
    margin-top: 0;
  }
}

.show-button {
  margin-top: auto;
}

.show-row {
  margin-bottom: 2.5rem;
}

.show-listing--row {
  margin: 0 auto 2.5rem;

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

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

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

.show-listing-item--row {
  padding-bottom: 0;
  background: $color-white;
  box-shadow: 0 0 0.38rem 1px rgba($color-black, 0.2);

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

  @include breakpoint($break-small) {
    flex: 0 1 31%;
    margin-right: calc(7% / 2);

    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }

  @include breakpoint($break-large) {
    flex: 1;
    margin-right: 2rem !important;

    &:last-child {
      margin-right: 0 !important;
    }
  }
}
  • URL: /components/raw/show-listing/Show-Listing.scss
  • Filesystem Path: src/components/02-Patterns/Show Listing/Show-Listing.scss
  • Size: 8 KB

There are no notes for this item.