<div class="repairs-card repairs-card--lens prescription">
    <div class="repairs-card__heading">Lenses</div>
    <div class="repairs-card__image-wrapper">
        <img src="/assets/images/repairs-lens.jpg" alt="Photo of lenses" class="image repairs-card__image">

    </div>
    <div class="repairs-card__description">
        <p>If your prescription lenses are damaged or need replaced, please contact your eye doctor or search for an authorized Maui Jim prescription retail location.</p>

    </div>

    <div class="repairs-card__actions">
        <button class="button button--plain-text">Search for retailer</button>

    </div>
</div>
<div class="repairs-card repairs-card--{{modifier}}{{#if prescription}} prescription{{/if}}{{#if error}} js-repairs-card-error{{/if}}">
  <div class="repairs-card__heading">{{heading}}</div>
  <div class="repairs-card__image-wrapper">
    {{render (dynamicComponent 'image') image}}
  </div>
  <div class="repairs-card__description">
    {{#each description}}
    {{render (dynamicComponent component) this}}
    {{/each}}
  </div>
  {{#unless prescription}}<div class="repairs-card__price">{{price}}</div>{{/unless}}
  <div class="repairs-card__actions">
    {{#if actions}}
    {{#each actions}}
    {{render (dynamicComponent 'buttons') this}}
    {{/each}}
    {{else}}
    <span class="repairs-card__included">Included</span>
    {{/if}}
  </div>
</div>
{
  "prescription": true,
  "modifier": "lens",
  "heading": "Lenses",
  "image": {
    "alt": "Photo of lenses",
    "src": "/assets/images/repairs-lens.jpg",
    "classes": [
      "repairs-card__image"
    ],
    "attributes": []
  },
  "description": [
    {
      "component": "paragraph",
      "value": "If your prescription lenses are damaged or need replaced, please contact your eye doctor or search for an authorized Maui Jim prescription retail location."
    }
  ],
  "actions": [
    {
      "buttonValue": "Search for retailer",
      "modifier": "plain-text"
    }
  ]
}
  • Content:
    .repairs-card {
      display: flex;
      position: relative;
      flex-direction: column;
      width: 100%;
      margin-bottom: $gutter-width;
      padding-bottom: 70px;
      border: 1px solid $color-light;
      color: $color-darkest;
      box-sizing: border-box;
    
      &:hover {
        border-color: $color-primary;
      }
    
      &.js-repairs-card-error {
        border-color: $color-error;
      }
    
      @include breakpoint($breakpoint-md) {
        width: calc(50% - 20px);
        margin: $gutter-width-half;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: calc(25% - 20px);
      }
    }
    
    .repairs-card--lens.prescription {
      .repairs-card__heading {
        margin-bottom: 2rem;
      }
    
      .repairs-card__actions {
        .button--plain-text {
          background: transparent url('/assets/icons/individual/arrow-right.svg') no-repeat right center;
          background-size: auto 5px;
          color: $color-dark;
          font-weight: normal;
          text-transform: none;
        }
      }
    }
    
    .repairs-card__heading {
      font-weight: bold;
      line-height: 3rem;
      text-align: center;
      text-transform: uppercase;
    }
    
    .repairs-card__price {
      margin-top: auto;
      color: $color-medium-dark;
      font-size: 27px;
      letter-spacing: 0;
      text-align: center;
    }
    
    .repairs-card__image {
      width: 100%;
    }
    
    .repairs-card__description {
      margin: $gutter-width / 2;
    
      p:not([class]),
      ul:not([class]) {
        margin: 15px 0;
        font-size: 1.2rem;
        line-height: inherit;
      }
    
      ul:not([class]) {
        padding-left: 10px;
    
        li {
          margin: 0;
          padding: 0;
          font-size: inherit;
          line-height: inherit;
    
          &:before {
            color: inherit;
          }
        }
      }
    }
    
    .repairs-card__actions {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0 auto;
      padding: $gutter-width 0;
      text-align: center;
    
      .button {
        max-width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 1.4rem;
        line-height: 1.4;
        text-overflow: unset;
        white-space: normal;
      }
    
      .button--primary {
        position: relative;
        top: 5px;
        line-height: 3rem;
      }
    
      .button--plain-text {
        color: $color-error;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
    
    .repairs-card__included {
      font-size: 1.4rem;
      font-weight: bold;
      line-height: 1.4;
      text-transform: uppercase;
    }
    
  • URL: /components/raw/repairs-card/repairs-card.scss
  • Filesystem Path: src/components/02-components/repairs-card/repairs-card.scss
  • Size: 2.2 KB

There are no notes for this item.