<div class="confirmation-return-instructions">
    <h4 class="confirmation-return-instructions__headline">Please follow the instruction below to ship your repair.</h4>
    <ul class="confirmation-return-instructions__steps">
        <li class="confirmation-return-instructions__step">
            <h5 class="confirmation-return-instructions__step-label">Print and include return slip in package:</h5>
            <a href="/assets/pdfs/repair-sunglasses.pdf" class="button button--primary confirmation-return-instructions__step-action js-confirmation-return-instructions-print-button" target="_blank">Print return slip</a>
        </li>
        <li class="confirmation-return-instructions__step">
            <h5 class="confirmation-return-instructions__step-label">Package your sunglasses and include return slip:</h5>
            <p class="confirmation-return-instructions__step-value">Please package your sunglasses in their case or wrapped and placed inside a sturdy cardboard container.<br>Include printed return request silp.</p>
        </li>
        <li class="confirmation-return-instructions__step">
            <h5 class="confirmation-return-instructions__step-label">Ship us your sunglasses:</h5>
            <p class="confirmation-return-instructions__step-value">Maui Jim, Inc.<br>Repair Department<br>One Aloha Lane<br>Peoria, IL 61615<br><br>If you have any questions, we’ll contact you by email.<br>If you still need assistance, just call us at 888-666-5602</p>
        </li>
    </ul>
</div>
<div class="confirmation-return-instructions">
  {{#if headline}}
  <h4 class="confirmation-return-instructions__headline">{{headline}}</h4>
  {{/if}}
  <ul class="confirmation-return-instructions__steps">
    {{#each steps}}
    <li class="confirmation-return-instructions__step">
      {{#if label}}
      <h5 class="confirmation-return-instructions__step-label">{{label}}</h5>
      {{/if}}
      {{#if value}}
      <p class="confirmation-return-instructions__step-value">{{{value}}}</p>
      {{/if}}
      {{#each actions}}
      <a{{#if url}} href="{{url}}"{{/if}} class="button button--{{modifier}}{{#if classes}}{{#each classes}} {{this}}{{/each}}{{/if}}"{{#if target}} target="{{target}}"{{/if}}>{{buttonValue}}</a>
      {{/each}}
    </li>
    {{/each}}
  </ul>
</div>
{
  "pageCss": [
    "checkout"
  ],
  "headline": "Please follow the instruction below to ship your repair.",
  "steps": [
    {
      "label": "Print and include return slip in package:",
      "actions": [
        {
          "modifier": "primary",
          "buttonValue": "Print return slip",
          "classes": [
            "confirmation-return-instructions__step-action",
            "js-confirmation-return-instructions-print-button"
          ],
          "url": "/assets/pdfs/repair-sunglasses.pdf",
          "target": "_blank"
        }
      ]
    },
    {
      "label": "Package your sunglasses and include return slip:",
      "value": "Please package your sunglasses in their case or wrapped and placed inside a sturdy cardboard container.<br>Include printed return request silp."
    },
    {
      "label": "Ship us your sunglasses:",
      "value": "Maui Jim, Inc.<br>Repair Department<br>One Aloha Lane<br>Peoria, IL 61615<br><br>If you have any questions, we’ll contact you by email.<br>If you still need assistance, just call us at 888-666-5602"
    }
  ]
}
  • Content:
    .confirmation-return-instructions {
      padding: 15px 10px;
      border: 1px solid $color-light;
    
      @include breakpoint($breakpoint-md) {
        padding-right: 40px;
        padding-left: 40px;
      }
    }
    
    .confirmation-return-instructions__headline {
      margin: 10px 0 0;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .confirmation-return-instructions__steps {
      padding-left: 15px;
    }
    
    .confirmation-return-instructions__step {
      margin-bottom: 25px;
      color: $color-dark;
    
      &:last-child {
        margin-bottom: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 40px;
      }
    }
    
    .confirmation-return-instructions__step-action {
      max-width: 100%;
      margin-top: 5px;
      padding: 0 20px;
      line-height: 3.0rem;
    }
    
    .confirmation-return-instructions__step-label {
      margin: 0;
      font-size: 1.4rem;
      font-weight: $font-weight-normal;
      letter-spacing: 1px;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .confirmation-return-instructions__step-value {
      margin: 5px 0;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
  • URL: /components/raw/confirmation-return-instructions/confirmation-return-instructions.scss
  • Filesystem Path: src/components/02-components/confirmation/confirmation-return-instructions/confirmation-return-instructions.scss
  • Size: 1.2 KB
  • Handle: @confirmation-return-instructions
  • Preview:
  • Filesystem Path: src/components/02-components/confirmation/confirmation-return-instructions/confirmation-return-instructions.html

There are no notes for this item.