TheaterMania Component Library

Discounts 

<div class="discount-container">
    <div class="discount-info">
        <div class="discount-heading heading-xlarge">
            Save up to $40
        </div>
        <div class="discount-savings">
            <div class="discount-regular">
                <span class="title-highlight">Regular Price:</span>
                <span class="discount-regular-copy">$104</span>
            </div>
            <div class="discount-offer">
                <span class="title-highlight">Your Price:</span>
                <span class="discount-offer-copy">$64</span>
            </div>
        </div>
        <div class="discount-code">
            Use code:
            <span class="btn btn--base btn--plain">INTHM301</span>
        </div>
        <button class="btn btn--base btn--primary">
  Discount Tickets ($64+)
</button>

        <div class="discounts-restrictions">
            <a href="#">Conditions and Restrictions</a>
        </div>
    </div>
    <div class="discount-details">
        <div class="heading-medium">
            Ticket Details
        </div>
        <div class="discount-details-info title-highlight title-highlight--light">Valid on Select Performances Now</div>
        <div class="discount-details-prices">
            <div class="discount-details-prices__info">
                <div style="margin-bottom: 0.75rem; font-weight: bold;">Mondays - Thursdays</div>
                <div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Select Orechestra</div>
                <div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$79 – $119</strong></div>
                <div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $89-129)</div>
            </div>
            <div class="discount-details-prices__info">
                <div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Front Side Mezzanine</div>
                <div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$64 – $109</strong></div>
                <div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $104-129)</div>
            </div>
            <div class="discount-details-prices__info">
                <div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Rear Mezzanine</div>
                <div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$49 – $89</strong></div>
                <div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $59-99)</div>
            </div>
            <div class="discount-details-prices__info">
                <div style="margin-bottom: 0.75rem; font-weight: bold;">Fridays &amp; Saturdays</div>
                <div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Select Orechestra</div>
                <div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$89 - $125</strong></div>
                <div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $99-135)</div>
            </div>
            <div class="discount-details-prices__info">
                <div style="margin-bottom: 0.25rem; font-size: 0.833rem;">Front Side Mezzanine</div>
                <div style="color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>$89 - $119</strong></div>
                <div style="margin-top: 0.5rem; font-size: 0.833rem;">(Reg. $99-129)</div>
            </div>
        </div>
    </div>
</div>
 
<div class="discount-container{{#if class}} {{class}}{{/if}}">
  <div class="discount-info">
    <div class="discount-heading heading-xlarge">
      {{discount.savings}}
    </div>
    <div class="discount-savings">
      <div class="discount-regular">
        <span class="title-highlight">{{discount.regular-title}}</span>
        <span class="discount-regular-copy">{{discount.regular}}</span>
      </div>
      <div class="discount-offer">
        <span class="title-highlight">{{discount.offer-title}}</span>
        <span class="discount-offer-copy">{{discount.offer}}</span>
      </div>
    </div>
    {{#if discount.code}}
      <div class="discount-code">
        {{discount.code}}
        <span class="btn btn--base btn--plain">{{discount.code-value}}</span>
      </div>
    {{/if}}
    {{render '@buttons' discount.discount-button merge=true}}
    <div class="discounts-restrictions">
      <a href="#">{{discount.restrictions}}</a>
    </div>
  </div>
  <div class="discount-details">
    <div class="heading-medium">
      {{discount.details-heading}}
    </div>
    <div class="discount-details-info title-highlight title-highlight--light">{{discount.details-info}}</div>
    <div class="discount-details-prices">
      {{#each discount.details}}
        <div class="discount-details-prices__info">
          {{#if info}}
            <div style="margin-bottom: 0.75rem; font-weight: bold;">{{info}}</div>
          {{/if}}
          <div style="margin-bottom: 0.25rem; font-size: 0.833rem;">{{section}}</div>
          <div style="color: {{color}} margin-bottom: 0.25rem; font-size: 1.44rem;"><strong>{{price}}</strong></div>
          <div style="margin-top: 0.5rem; font-size: 0.833rem;">{{regular}}</div>
        </div>
      {{/each}}
    </div>
  </div>
</div>
 
{
  "discount": {
    "savings": "Save up to $40",
    "code": "Use code: ",
    "code-value": "INTHM301",
    "regular-title": "Regular Price:",
    "regular": "$104",
    "offer-title": "Your Price:",
    "offer": "$64",
    "discount-button": {
      "buttonValue": "Discount Tickets ($64+)"
    },
    "restrictions": "Conditions and Restrictions",
    "details-heading": "Ticket Details",
    "details-info": "Valid on Select Performances Now",
    "details": [
      {
        "info": "Mondays - Thursdays",
        "section": "Select Orechestra",
        "price": "$79 – $119",
        "color": "#D54308;",
        "regular": "(Reg. $89-129)"
      },
      {
        "section": "Front Side Mezzanine",
        "price": "$64 – $109",
        "color": "#D54308;",
        "regular": "(Reg. $104-129)"
      },
      {
        "section": "Rear Mezzanine",
        "price": "$49 – $89",
        "color": "#D54308;",
        "regular": "(Reg. $59-99)"
      },
      {
        "info": "Fridays & Saturdays",
        "section": "Select Orechestra",
        "price": "$89 - $125",
        "color": "#D54308;",
        "regular": "(Reg. $99-135)"
      },
      {
        "section": "Front Side Mezzanine",
        "price": "$89 - $119",
        "color": "#D54308;",
        "regular": "(Reg. $99-129)"
      }
    ]
  }
}
  • Content: 
    .discount-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid $color-border;
  border-radius: $border-radius;
  text-align: center;

  @include breakpoint($break-medium) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.discount-info {
  @include breakpoint($break-small) {
    margin-right: 1rem;
  }

  @include breakpoint($break-medium) {
    align-self: center;
    flex: 0 1 48%;
  }
}


.discount-heading {
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.discount-code {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;

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

.btn {
  .discount-code & {
    margin: 0.25rem 0 0 0.5rem;

    &:hover {
      border: 1px solid $color-border;
      color: $color-gray-light;
    }

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

.discount-regular {
  flex: 0 1 48%;
  padding-right: 4%;
  border-right: 1px solid $color-border;
}

.discount-offer {
  display: flex;
  flex-direction: column;
  flex: 0 1 48%;
  padding-left: 4%;
  box-sizing: border-box;
}

.discount-offer-copy {
  margin-top: auto;
}

.discount-regular-copy {
  position: relative;

  &::after {
    position: absolute;
    top: -0.5rem;
    left: 35%;
    content: "∖";
    font-size: 2.7rem;
    font-weight: $font-bold;
    font-family: $font-title;
    color: $color-cta;
  }
}

.discount-savings {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 1.25rem;
  max-width: 18.75rem;
  font-size: $ms-3;
}

.discounts-restrictions {
  padding-top: 1rem;
  margin-top: auto;
  font-size: $ms-neg-2;
}

.discount-details {
  align-self: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid $color-border;

  @include breakpoint($break-medium) {
    flex: 0 1 48%;
    margin-top: 0;
    padding: 0 0 0 4%;
    border-top: none;
    border-left: 1px solid $color-border;
    text-align: left;
  }
}

.discount-details-info {
  margin: 1rem 0;
}

.show-page__block--critics {
  margin-bottom: 2.5rem;

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

.title-highlight {
  .discount & {
    margin-bottom: 0.75rem;
  }

  .discount-savings & {
    display: block;
    margin-bottom: 0.35rem;
    line-height: 1.2;
    font-size: $ms-neg-1;
  }
}

.discount-details-prices {
  @include breakpoint($break-small) {
    display: flex;
    flex-wrap: wrap;
  }
}

.discount-details-prices__info {
  align-self: flex-end;
  margin-bottom: 1.5rem;

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

  @include breakpoint($break-small) {
    text-align: left;
    margin: 0 1.25rem 1.5rem 0;

    &:last-child {
      margin-bottom: 1.5rem;
    }
  }
}
  • URL: /components/raw/discounts/Discounts.scss
  • Filesystem Path: src/components/02-Patterns/Discounts/Discounts.scss
  • Size: 2.8 KB

The discounts section has the ability for content editiors to add their own markup and styles.

For branding and consistenancy, it is recommended to enforce these styling guidelines:

Font-sizes:

  • 1.44rem;
  • 1.2rem;
  • 1rem;
  • 0.833rem;

Colors:

  • TM Accent: #D54308
  • WOS Accent: #D62027

Spacing (margins):

  • 1rem;
  • 0.75rem;
  • 0.5rem;
  • 0.25rem;

To be direct, the follow inline styles are applied to the discount price:

color: #D54308; margin-bottom: 0.25rem; font-size: 1.44rem;

The following are applied to the regular price:

margin-bottom: 1rem; font-size: 0.833rem;

The following is applied to each section title (Select Orechestra & Front Mezzanine for example):

margin-bottom: 0.25rem;