Maui Jim Style Guide

Find Model: Zeal 

<div class="find-model" id="find-model">
    <h4 class="find-model__title">Find your style model</h4>
    <p class="find-model__content">Refer to the right temple of your sunglasses (refer to image below) for the Style Number. Style Number begins with ZL-</p>
    <img class="find-model__image" alt="An image displaying the model number on the right temple of the sunglasses" src="/assets/images/zeal-find-model.jpg">
</div>
 
<div class="find-model" id="find-model">
  {{#if title}}
  <h4 class="find-model__title">{{title}}</h4>
  {{/if}}
  {{#if content}}
  <p class="find-model__content">{{content}}</p>
  {{/if}}
  {{#if image}}
  <img class="find-model__image" alt="{{image.alt}}" src="{{image.src}}">
  {{/if}}
</div>
 
{
  "title": "Find your style model",
  "content": "Refer to the right temple of your sunglasses (refer to image below) for the Style Number. Style Number begins with ZL-",
  "image": {
    "src": "/assets/images/zeal-find-model.jpg",
    "alt": "An image displaying the model number on the right temple of the sunglasses"
  }
}
  • Content: 
    .find-model__title {
  margin: 0 0 13px;
  color: $color-dark;
  font-size: 1.6rem;
  font-weight: $font-weight-bold;
  letter-spacing: 1px;
  line-height: 1.9rem;
  text-transform: uppercase;

  @include breakpoint($breakpoint-md) {
    margin-bottom: 10px;
  }

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 11px;
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

.find-model__content {
  color: $color-dark;
  font-size: 1.4rem;
  line-height: 1.7rem;

  @include breakpoint($breakpoint-xl) {
    font-size: 1.9rem;
    line-height: 2.3rem;
  }
}
  • URL: /components/raw/find-model/find-model.scss
  • Filesystem Path: src/components/01-elements/text-blocks/find-model/find-model.scss
  • Size: 568 Bytes

There are no notes for this item.