<form class="gift-card-form">
    <h4 class="gift-card-form__title">Redeem your VIP &amp; Gift Card</h4>
    <p class="gift-card-form__details">Provide the 16 digit card Number and the 4 digit PIN number that can be found on the back of your card.</p>
    <div class="gift-card-form__form-items">
        <div class="form-item form-item--text form-item--redeem-gift-card-number form-item--required">
            <label for="redeem-gift-card-number" class="label label--text label--required">VIP or Gift Card Number</label>
            <input type="text" id="redeem-gift-card-number" name="number" class="input input--text">
        </div>

        <div class="form-item form-item--text form-item--redeem-gift-card-pin form-item--required">
            <label for="redeem-gift-card-pin" class="label label--text label--required">PIN</label>
            <input type="text" id="redeem-gift-card-pin" name="pin" class="input input--text">
        </div>

        <button class="button button--plain-text js-modal-open-link" data-modal-id="help-text-pin" formnovalidate type="button">What&#x27;s this?</button>

    </div>
    <div class="gift-card-form__actions">
        <button class="button button--primary">Redeem</button>

        <button class="button button--outlined">Check Balance</button>

    </div>
</form>
<form class="gift-card-form">
  {{#if title}}
  <h4 class="gift-card-form__title">{{title}}</h4>
  {{/if}}
  {{#if details}}
  <p class="gift-card-form__details">{{details}}</p>
  {{/if}}
  {{#if formItems}}
  <div class="gift-card-form__form-items">
    {{#each formItems}}
    {{render (dynamicComponent component) this}}
    {{/each}}
  </div>
  {{/if}}
  {{#if actions}}
  <div class="gift-card-form__actions">
    {{#each actions}}
    {{render (dynamicVariant 'buttons' type) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
</form>
{
  "title": "Redeem your VIP & Gift Card",
  "details": "Provide the 16 digit card Number and the 4 digit PIN number that can be found on the back of your card.",
  "formItems": [
    {
      "component": "input",
      "type": "text",
      "id": "redeem-gift-card-number",
      "name": "number",
      "label": "VIP or Gift Card Number",
      "required": true
    },
    {
      "component": "input",
      "type": "text",
      "id": "redeem-gift-card-pin",
      "name": "pin",
      "label": "PIN",
      "required": true
    },
    {
      "component": "buttons--plain-text",
      "modifier": "plain-text",
      "buttonValue": "What's this?",
      "buttonType": "button",
      "buttonModal": "help-text-pin",
      "noValidate": true
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Redeem"
    },
    {
      "type": "outlined",
      "buttonValue": "Check Balance"
    }
  ],
  "pageModals": [
    {
      "component": "help-text",
      "context": {
        "id": "help-text-pin",
        "value": "The 4-digit pin is case sensitive; please use capital letters when entering in your pin #."
      }
    }
  ]
}
  • Content:
    .gift-card-form {
      margin-bottom: 50px;
    
      .form-item--redeem-gift-card-pin {
        width: calc(50% - 10px);
        float: left;
      }
    
      .label {
        margin-bottom: 7px;
      }
    
      .button[data-modal-id='help-text-pin'] {
        width: auto;
        min-width: 0;
        margin-top: 37px;
        padding-left: 20px;
      }
    }
    
    .gift-card-form__title {
      margin: 20px 0 13px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 0 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 11px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .gift-card-form__details {
      margin: 0 0 25px;
      color: $color-dark;
      font-size: 1.4rem;
      letter-spacing: 0;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .gift-card-form__actions {
      margin-top: 20px;
      clear: both;
    
      .button {
        display: block;
        margin-bottom: 20px;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
      }
    }
    
  • URL: /components/raw/gift-card-form/gift-card-form.scss
  • Filesystem Path: src/components/01-elements/forms/gift-card-form/gift-card-form.scss
  • Size: 1.1 KB

There are no notes for this item.