Maui Jim Style Guide

Assistance Info: Default 

<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.