<div class="contact-info contact-info--block u-page-width-max-restricted">
    <div class="contact-info__section-group">
        <div class="contact-info__section">
            <h3 class="contact-info__section-label">The Zeal Optics Warranty</h3>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          Our goggles are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship. We will repair or replace at our option, any Zeal goggle (excludes closeout or discontinued goggles) 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">Contact Us</h3>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          Have a question about repair need assistance outside us?
        </span>
            </div>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          P: 888-454-9326
        </span>
            </div>
            <div class="contact-info__item">
                <span class="contact-info__item-value">
          
          E: info@zealoptics.com
        </span>
            </div>
        </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",
  "sections": [
    {
      "label": "The Zeal Optics Warranty",
      "items": [
        {
          "value": "Our goggles are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship. We will repair or replace at our option, any Zeal goggle (excludes closeout or discontinued goggles) found to be defective and exclusive of damage caused by improper or unreasonable use."
        }
      ]
    },
    {
      "label": "Contact Us",
      "items": [
        {
          "value": "Have a question about repair need assistance outside us?"
        },
        {
          "value": "P: 888-454-9326"
        },
        {
          "value": "E: info@zealoptics.com"
        }
      ]
    }
  ]
}
  • 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.