<div class="contact-info contact-info--email u-page-width-max-restricted">
    <h2 class="contact-info__title">Contact Information</h2>
    <div class="contact-info__section-group">
        <div class="contact-info__section">
            <div class="contact-info__item">
                <span class="contact-info__item-label">For general questions and information:</span>
                <a class="contact-info__item-value" href="mailto:sales.us@mauijim.com">
          <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

          sales.us@mauijim.com
        </a>
            </div>
            <div class="contact-info__item">
                <span class="contact-info__item-label">For employment questions and information:</span>
                <a class="contact-info__item-value" href="mailto:hr.us@mauijim.com">
          <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

          hr.us@mauijim.com
        </a>
            </div>
        </div>
        <div class="contact-info__section">
            <div class="contact-info__item">
                <span class="contact-info__item-label">For product repairs:</span>
                <a class="contact-info__item-value" href="mailto:repair.us@mauijim.com">
          <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

          repair.us@mauijim.com
        </a>
            </div>
            <div class="contact-info__item">
                <span class="contact-info__item-label">For website concerns and technical help:</span>
                <a class="contact-info__item-value" href="mailto:webmamster.us@mauijim.com">
          <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

          webmaster.us@mauijim.com
        </a>
            </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": "email",
  "title": "Contact Information",
  "sections": [
    {
      "items": [
        {
          "label": "For general questions and information:",
          "value": "sales.us@mauijim.com",
          "path": "mailto:sales.us@mauijim.com",
          "icon": "action-mail"
        },
        {
          "label": "For employment questions and information:",
          "value": "hr.us@mauijim.com",
          "path": "mailto:hr.us@mauijim.com",
          "icon": "action-mail"
        }
      ]
    },
    {
      "items": [
        {
          "label": "For product repairs:",
          "value": "repair.us@mauijim.com",
          "path": "mailto:repair.us@mauijim.com",
          "icon": "action-mail"
        },
        {
          "label": "For website concerns and technical help:",
          "value": "webmaster.us@mauijim.com",
          "path": "mailto:webmamster.us@mauijim.com",
          "icon": "action-mail"
        }
      ]
    }
  ]
}
  • 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.