<div class="image-card">
    <div class="image-card__inner">
        <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Alison Teal image">
      <div class="image-card__text">
        <h4 class="image-card__title">Alison Teal</h4>
        <h5 class="image-card__subtitle">Surf / Explorer</h5>
      </div>
    </a>
    </div>
</div>
<div class="image-card"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
  <div class="image-card__inner">
    <a class="image-card__link" href="#">
      <img class="image-card__image" src="{{image}}" alt="{{title}} image">
      <div class="image-card__text">
        {{#if title}}
        <h4 class="image-card__title">{{title}}</h4>
        {{/if}}
        {{#if subtitle}}
        <h5 class="image-card__subtitle">{{subtitle}}</h5>
        {{/if}}
      </div>
    </a>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .image-card {
      text-align: center;
    
      .image-cards--retailer & {
        margin: 0 0 50px;
      }
    }
    
    .image-card__inner {
      display: inline-block;
      position: relative;
      max-width: 340px;
    
      &:before {
        position: absolute;
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        border: 6px solid $color-lighter;
        content: '';
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-xl) {
        &:not(:hover):before {
          content: none;
        }
      }
    
      .image-cards--retailer & {
        &:before {
          content: none;
        }
      }
    }
    
    .image-card__link {
      display: block;
      text-decoration: none;
    
      &:focus {
        outline: none;
      }
    }
    
    .image-card__text {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      transform: translateY(-50%);
    
      @include breakpoint($breakpoint-xl) {
        .image-card__inner:not(:hover) & {
          display: none;
        }
      }
    }
    
    .image-card__title {
      margin-bottom: 0;
      padding-bottom: 15px;
      color: $color-white;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .image-card__subtitle {
      position: relative;
      margin-top: 0;
      padding-top: 15px;
      color: $color-white;
      font-size: 1.4rem;
      font-weight: $font-weight-normal;
      letter-spacing: 1px;
      line-height: 2.0rem;
    
      &:before {
        position: absolute;
        top: 0;
        left: calc(50% - 15px);
        width: 30px;
        border-top: 1px solid $color-white;
        content: '';
      }
    }
    
    
  • URL: /components/raw/image-card/image-card.scss
  • Filesystem Path: src/components/02-components/image-card/image-card.scss
  • Size: 1.5 KB

There are no notes for this item.