<form class="gift-card-form">
    <p class="gift-card-form__details">To buy a gift card, select your desired quantity and amount below. The gift card will be added to your shopping cart. Gift cards are non-refundable and may not be used towards prescription purchases. Gift cards can only be redeemed on Mauijim.com.</p>
    <div class="gift-card-form__form-items">
        <div class="form-item form-item--select form-item--required">
            <label for="buy-gift-card-qty" class="label label--required">Quantity</label>
            <div class="select-wrapper">
                <select id="buy-gift-card-qty" name="qty" class="select js-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>
            </div>
        </div>

        <div class="form-item form-item--select form-item--required">
            <label for="buy-gift-card-amount" class="label label--required">Amount</label>
            <div class="select-wrapper">
                <select id="buy-gift-card-amount" name="amount" class="select js-select">
      <option value="25">$25</option>
      <option value="50">$50</option>
      <option value="100">$100</option>
      <option value="250">$250</option>
      <option value="500">$500</option>
    </select>
            </div>
        </div>

    </div>
    <div class="gift-card-form__actions">
        <button class="button button--primary">Add to Cart</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>
{
  "details": "To buy a gift card, select your desired quantity and amount below. The gift card will be added to your shopping cart. Gift cards are non-refundable and may not be used towards prescription purchases. Gift cards can only be redeemed on Mauijim.com.",
  "formItems": [
    {
      "component": "select-normal",
      "id": "buy-gift-card-qty",
      "name": "qty",
      "label": "Quantity",
      "options": {
        "1": "1",
        "2": "2",
        "3": "3",
        "4": "4",
        "5": "5",
        "6": "6",
        "7": "7",
        "8": "8",
        "9": "9"
      },
      "required": true
    },
    {
      "component": "select-normal",
      "id": "buy-gift-card-amount",
      "name": "amount",
      "label": "Amount",
      "options": {
        "25": "$25",
        "50": "$50",
        "100": "$100",
        "250": "$250",
        "500": "$500"
      },
      "required": true
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Add to Cart"
    }
  ]
}
  • 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.