<div class="contact-info contact-info--block u-page-width-max-restricted">
    <h2 class="contact-info__title">Customer Support</h2>
    <div class="contact-info__section-group">
        <div class="contact-info__section">
            <h3 class="contact-info__section-label">Warranty</h3>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          Our sunglasses are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship. Nose pads and temples are free as long as the parts are available. We’ll repair or replace at our option, any pair of Maui Jims found to be defective and exclusive of damage caused by improper or unreasonable use.
        </span>
            </div>
        </div>
        <div class="contact-info__section">
            <h3 class="contact-info__section-label">Returns</h3>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          Our satisfaction is our priority. You may return your merchandise purchased from the Maui Jim website for credit within 30 days of your purchase.  All returns must be in the original case and/or packaging and in perfect resalable condition for credit.
        </span>
            </div>
            <a class="contact-info__call-to-action button button--outlined" href="callToAction.path">Start Your Return</a>
        </div>
    </div>
    <div class="contact-info__section-group">
        <div class="contact-info__section">
            <h3 class="contact-info__section-label">Repairs</h3>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          Need to repair your sunglasses?
        </span>
            </div>
            <a class="contact-info__call-to-action button button--outlined" href="callToAction.path">Need a Repair?</a>
        </div>
        <div class="contact-info__section">
            <h3 class="contact-info__section-label">FAQs</h3>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          Check out our Frequently Asked Questions.
        </span>
            </div>
            <a class="contact-info__call-to-action button button--outlined" href="callToAction.path">FAQS</a>
        </div>
    </div>
</div>
<div class="contact-info contact-info--{{modifier}} u-page-width-max-restricted">
  {{#if title}}
  <h2 class="contact-info__title">{{title}}</h2>
  {{/if}}
  {{#groupEach 2 sections}}
  <div class="contact-info__section-group">
    {{#each this}}
    <div class="contact-info__section">
      {{#if label}}
      <h3 class="contact-info__section-label">{{label}}</h3>
      {{/if}}
      {{#each items}}
      {{#if this}}
      <div class="contact-info__item">
        {{#if label}}
        <span class="contact-info__item-label">{{label}}</span>
        {{/if}}
        {{#if value}}
        {{#if this.path}}
        <a class="contact-info__item-value" href="{{this.path}}">
          {{#if this.icon}}{{render (dynamicVariant 'icons' this.icon)}}{{/if}}
          {{{value}}}
        </a>
        {{else}}
        <span class="contact-info__item-value">
          {{#if this.icon}}{{render (dynamicVariant 'icons' this.icon)}}{{/if}}
          {{{value}}}
        </span>
        {{/if}}
        {{/if}}
      </div>
      {{/if}}
      {{/each}}
      {{#if callToAction}}
      <a class="contact-info__call-to-action button button--outlined" href="callToAction.path">{{callToAction.value}}</a>
      {{/if}}
    </div>
    {{/each}}
  </div>
  {{/groupEach}}
</div>
{
  "modifier": "block",
  "title": "Customer Support",
  "sections": [
    {
      "label": "Warranty",
      "items": [
        {
          "value": "Our sunglasses are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship. Nose pads and temples are free as long as the parts are available. We’ll repair or replace at our option, any pair of Maui Jims found to be defective and exclusive of damage caused by improper or unreasonable use."
        }
      ]
    },
    {
      "label": "Returns",
      "items": [
        {
          "value": "Our satisfaction is our priority. You may return your merchandise purchased from the Maui Jim website for credit within 30 days of your purchase.  All returns must be in the original case and/or packaging and in perfect resalable condition for credit."
        }
      ],
      "callToAction": {
        "value": "Start Your Return",
        "path": "#"
      }
    },
    {
      "label": "Repairs",
      "items": [
        {
          "value": "Need to repair your sunglasses?"
        }
      ],
      "callToAction": {
        "value": "Need a Repair?",
        "path": "#"
      }
    },
    {
      "label": "FAQs",
      "items": [
        {
          "value": "Check out our Frequently Asked Questions."
        }
      ],
      "callToAction": {
        "value": "FAQS",
        "path": "#"
      }
    }
  ]
}
  • Content:
    .contact-info {
      margin-top: 40px;
      margin-bottom: 40px;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-sm-only) {
        padding: 0 $gutter-width-half;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
      }
    
      @include breakpoint($breakpoint-xl) {
        color: $color-dark;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .contact-info__title + .contact-info__section-group {
      &::before {
        // ~2x height of preceding heading.
        top: 70px;
      }
    }
    
    .contact-info__section-group {
      @include clearfix;
      position: relative;
    
      @include breakpoint($breakpoint-md) {
        &::before {
          display: block;
          position: absolute;
          top: 0;
          right: 51.125%;
          bottom: 0;
          left: auto;
          width: 1px;
          border-right: 1px solid $color-medium-light;
          content: ' ';
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        &::before {
          right: 50%;
        }
      }
    }
    
    .contact-info--block {
      .contact-info__section-group {
        .contact-info__section {
          padding-bottom: 30px;
        }
    
        &:last-child {
          .contact-info__section:last-child {
            padding-bottom: 0;
          }
        }
      }
    
      .contact-info__section-label {
        margin-top: 25px;
        font-size: #{map-get($contact-info-block-section-label-font-size, sm)};
        line-height: #{map-get($contact-info-block-section-label-line-height, sm)};
      }
    
      @include breakpoint($breakpoint-md) {
        .contact-info__section-group {
          &:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
    
            .contact-info__section {
              padding-bottom: 0;
            }
          }
    
          .contact-info__section {
            padding-bottom: 60px;
    
            &:first-child {
              padding-right: 20px;
            }
          }
        }
    
        .contact-info__section-label {
          margin-top: 0;
          font-size: #{map-get($contact-info-block-section-label-font-size, md)};
          line-height: #{map-get($contact-info-block-section-label-line-height, md)};
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        &:last-child {
          margin-bottom: 60px;
        }
    
        .contact-info__section-group {
          &:not(:last-child) {
            .contact-info__section::after {
              right: -10px;
            }
          }
        }
    
        .contact-info__section-label {
          font-size: #{map-get($contact-info-block-section-label-font-size, xl)};
          line-height: #{map-get($contact-info-block-section-label-line-height, xl)};
        }
      }
    }
    
    .contact-info__title {
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      line-height: 2.8rem;
      text-align: center;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        @include span(12);
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 0;
        letter-spacing: 2px;
      }
    }
    
    .contact-info__section {
      position: relative;
      letter-spacing: 0;
    
      &:first-of-type {
        margin-bottom: 20px;
        padding-bottom: 20px;
    
        &::after {
          display: block;
          position: absolute;
          right: 50px;
          bottom: 0;
          left: 50px;
          border-bottom: 1px solid $color-medium-light;
          content: '';
        }
      }
    
      @include breakpoint($breakpoint-md) {
        @include span(6);
    
        &:first-of-type {
          margin-bottom: 0;
          padding-bottom: 0;
    
          &::after {
            border-bottom: 0;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 460px;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
    
        &:first-of-type::after {
          right: -10px;
        }
    
        &:nth-of-type(even) {
          padding-left: 20px;
          float: right;
        }
      }
    }
    
    .contact-info__section-label {
      margin: 15px 0 5px;
      color: $contact-info-section-label-color;
      font-size: #{map-get($contact-info-section-label-font-size, sm)};
      letter-spacing: 3px;
      line-height: #{map-get($contact-info-section-label-line-height, sm)};
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 0;
        font-size: #{map-get($contact-info-section-label-font-size, md)};
        line-height: #{map-get($contact-info-section-label-line-height, md)};
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
        font-size: #{map-get($contact-info-section-label-font-size, xl)};
        line-height: #{map-get($contact-info-section-label-line-height, xl)};
      }
    }
    
    .contact-info__item {
      margin-bottom: 20px;
    
      &:last-of-type {
        margin-bottom: 0;
      }
    
      // Adds necessary margin when an item is not wrapped in a section.
      .contact-info > & {
        margin-right: $gutter-width-half;
        margin-left: $gutter-width-half;
    
        @include breakpoint($breakpoint-xl) {
          margin-right: 0;
          margin-left: 0;
        }
      }
    }
    
    .contact-info__item-label {
      display: block;
      margin-bottom: $contact-info-item-label-margin-bottom;
      font-weight: $font-weight-medium;
    
      @include breakpoint($breakpoint-xl) {
        font-size: $contact-info-item-label-font-size-xl;
        line-height: $contact-info-item-label-line-height-xl;
      }
    }
    
    .contact-info__item-value {
      display: block;
      color: $color-dark;
      text-decoration: none;
    
      @include breakpoint($breakpoint-xl) {
        color: $color-dark;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    a.contact-info__item-value:hover {
      color: $color-primary;
    }
    
    .contact-info__call-to-action {
      margin-top: 20px;
    }
    
  • URL: /components/raw/contact-info/contact-info.scss
  • Filesystem Path: src/components/01-elements/text-blocks/contact-info/contact-info.scss
  • Size: 5.3 KB

There are no notes for this item.