<div class="patterned-text testimonial-review">
    <div class="testimonial-review__item">
        <h2 class="testimonial-review__title">"Great service, as always."</h2>
        <p class="testimonial-review__review">"I have been a Maui Jim customer for 15 years. I have sent several pairs of beloved glasses through the repair services and always receive the most excellent customer service. That and the high quality of the glasses has kept me a loyal customer."</p>
        <div class="testimonial-review__rating">
            <div class="rating" data-rating-value="4.5" aria-label="Rating: 4.5 out of 5 Stars.">
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
            </div>
            <span class="testimonial-review__author"> - AngelB from California</span>
        </div>
    </div>
    <div class="testimonial-review__item">
        <h2 class="testimonial-review__title">"Fantastic repair options"</h2>
        <p class="testimonial-review__review">"I recently had my MJ Sport sunglasses rebuilt and additionally had a set of nose pads sent for a second pair of Maui Jims that I own at no charge. I&#x27;ve had both sets for years and GREATLY appreciate Maui Jim and their efforts to ensure customer
            satisfaction. Rest assured you have a lifetime customer with me."</p>
        <div class="testimonial-review__rating">
            <div class="rating" data-rating-value="5" aria-label="Rating: 5 out of 5 Stars.">
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
                <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

    <svg class="icon icon--star-half" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-half"></use>
</svg>

    <svg class="icon icon--star-empty" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

  </span>
            </div>
            <span class="testimonial-review__author"> - Mcmar from Florida</span>
        </div>
    </div>
</div>
<div class="patterned-text testimonial-review">
  {{#each reviews}}
  <div class="testimonial-review__item">
    <h2 class="testimonial-review__title">"{{ this.reviewTitle }}"</h2>
    <p class="testimonial-review__review">"{{ this.review }}"</p>
    <div class="testimonial-review__rating">
      {{render '@rating' this}}<span class="testimonial-review__author"> - {{ this.reviewAuthor }}</span>
    </div>
  </div>
  {{/each}}
</div>
{
  "reviews": [
    {
      "reviewTitle": "Great service, as always.",
      "review": "I have been a Maui Jim customer for 15 years. I have sent several pairs of beloved glasses through the repair services and always receive the most excellent customer service. That and the high quality of the glasses has kept me a loyal customer.",
      "reviewAuthor": "AngelB from California",
      "rating": 4.5
    },
    {
      "reviewTitle": "Fantastic repair options",
      "review": "I recently had my MJ Sport sunglasses rebuilt and additionally had a set of nose pads sent for a second pair of Maui Jims that I own at no charge. I've had both sets for years and GREATLY appreciate Maui Jim and their efforts to ensure customer satisfaction. Rest assured you have a lifetime customer with me.",
      "reviewAuthor": "Mcmar from Florida",
      "rating": 5
    }
  ]
}
  • Content:
    .testimonial-review__item {
      overflow: auto;
    }
    
    .testimonial-review__title {
      margin: 2.49rem 0;
      color: $color-medium-dark;
      font-size: 3rem;
      line-height: 130%;
    }
    
    .testimonial-review__review {
      color: $color-dark;
    }
    
    .testimonial-review__rating {
      display: inline-block;
      margin-bottom: 2.4rem;
    
      .rating {
        display: inline-block;
      }
    }
    
    .testimonial-review__author {
      margin-left: 1px;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
  • URL: /components/raw/testimonial-review/testimonial-review.scss
  • Filesystem Path: src/components/02-components/testimonial-review/testimonial-review.scss
  • Size: 564 Bytes

There are no notes for this item.