<div class="assistance-info assistance-info--default">
    <h4 class="assistance-info__title">Need assistance?</h4>
    <ul class="assistance-info__items">
        <li class="assistance-info__item">
            <a class="assistance-info__item-value" href="tel:+1800229933">
        <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

        <span class="assistance-info__item-label">888-666-5905</span>
      </a>
        </li>
        <li class="assistance-info__item">
            <a class="assistance-info__item-value" href="mailto:customercare@mauijim.com">
        <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

        <span class="assistance-info__item-label">customercare@mauijim.com</span>
      </a>
        </li>
    </ul>
</div>
<div class="assistance-info assistance-info--{{_self.name}}">
  <h4 class="assistance-info__title">{{title}}</h4>
  <ul class="assistance-info__items">
    {{#each items}}
    <li class="assistance-info__item">
      {{#if this.path}}
      <a class="assistance-info__item-value" href="{{this.path}}">
      {{else}}
      <span class="assistance-info__item-value">
      {{/if}}
        {{#if prefixIcon}}
        {{render (dynamicVariant 'icons' prefixIcon)}}
        {{/if}}
        <span class="assistance-info__item-label">{{label}}</span>
        {{#if suffixIcon}}
        {{render (dynamicVariant 'icons' suffixIcon)}}
        {{/if}}
      {{#if this.path}}
      </a>
      {{else}}
      </span>
      {{/if}}
    </li>
    {{/each}}
  </ul>
</div>
{
  "title": "Need assistance?",
  "items": [
    {
      "label": "888-666-5905",
      "path": "tel:+1800229933",
      "prefixIcon": "action-phone"
    },
    {
      "label": "customercare@mauijim.com",
      "path": "mailto:customercare@mauijim.com",
      "prefixIcon": "action-mail"
    }
  ]
}
  • Content:
    .assistance-info {
      margin-bottom: 50px;
    }
    
    .assistance-info__title {
      margin: 0 0 10px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      .assistance-info--cart & {
        margin: 10px 0;
        border-bottom: 1px solid $color-light;
        text-transform: none;
      }
    
      .assistance-info--account & {
        margin: 10px 0;
        text-transform: none;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 17px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .assistance-info__items {
      @include reset-list;
    }
    
    .assistance-info__item {
      display: block;
      margin-bottom: 10px;
    }
    
    .assistance-info__item-value {
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-decoration: none;
    
      .icon {
        padding-right: 5px;
        vertical-align: middle;
        fill: $color-darkest;
      }
    
      .icon--arrow-right {
        height: 6px;
      }
    }
    
    a.assistance-info__item-value {
      transition: color $transition-standard;
    
      &[href^='mailto:'] {
        color: $color-primary;
      }
    
      &:hover {
        color: $color-primary;
    
        .icon {
          fill: $color-primary;
        }
      }
    
      .icon {
        transition: fill $transition-standard;
      }
    }
    
    .assistance-info__item-label {
      display: inline-block;
      vertical-align: middle;
    }
    
  • URL: /components/raw/assistance-info/assistance-info.scss
  • Filesystem Path: src/components/01-elements/text-blocks/assistance-info/assistance-info.scss
  • Size: 1.3 KB

There are no notes for this item.