Maui Jim Style Guide

Repairs Card: Repairs Card 

<div class="repairs-card repairs-card--nose-pads">
    <div class="repairs-card__heading">Need nose pads?</div>
    <div class="repairs-card__image-wrapper">
        <img src="/assets/images/repairs-nose-pads.jpg" alt="Photo of nose pads" class="image repairs-card__image">

    </div>
    <div class="repairs-card__description">
        <p>Nose pads are free as long as parts are available.</p>

    </div>
    <div class="repairs-card__price">Free</div>
    <div class="repairs-card__actions">
        <button class="button button--primary">Add</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>
 
{
  "modifier": "nose-pads",
  "heading": "Need nose pads?",
  "price": "Free",
  "image": {
    "alt": "Photo of nose pads",
    "src": "/assets/images/repairs-nose-pads.jpg",
    "classes": [
      "repairs-card__image"
    ],
    "attributes": []
  },
  "description": [
    {
      "component": "paragraph",
      "value": "Nose pads are free as long as parts are available."
    }
  ],
  "actions": [
    {
      "buttonValue": "Add",
      "modifier": "primary"
    }
  ]
}
  • 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.