<div class="big-card big-card--image-left u-block u-page-width-max-gutters">
    <a class="big-card__link" href="#">
        <div class="big-card__image-container">
            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
        </div>
        <div class="big-card__text">
            <span class="big-card__prefix">New Arrivals</span>
            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
            <button class="big-card__call-to-action button button--outlined">View</button>
        </div>
    </a>
</div>
<div class="big-card big-card--{{modifier}} u-block u-page-width-max-gutters">
  {{#if callToAction}}
  <a class="big-card__link" href="{{this.path}}">
  {{/if}}
    {{#each images}}
    <div class="big-card__image-container{{#if @key}} big-card__image-container--{{@key}}{{/if}}">
      <img class="big-card__image u-object-fit-cover" src="{{imageLarge}}" sizes="(min-width: 681px) {{imageMediumVw}}vw, 100vw"
        srcset="{{imageSmall}} {{imageSmallWidth}}w, {{imageMedium}} {{imageMediumWidth}}w, {{imageLarge}} {{imageLargeWidth}}w">
    </div>
    {{/each}}
    <div class="big-card__text">
      {{#if prefix}}
      <span class="big-card__prefix">{{prefix}}</span>
      {{/if}}
      <h2 class="big-card__headline">{{headline}}</h2>
      {{#if suffix}}
      <span class="big-card__suffix">{{suffix}}</span>
      {{/if}}
      {{#if description}}
      <p class="big-card__description">{{{description}}}</p>
      {{/if}}
      {{#if callToAction}}
      <button class="big-card__call-to-action button button--outlined">{{callToAction}}</button>
      {{/if}}
    </div>
  {{#if callToAction}}
  </a>
  {{/if}}
</div>
{
  "path": "#",
  "modifier": "image-left",
  "prefix": "New Arrivals",
  "images": [
    {
      "imageSmall": "/assets/images/big-card-left-small.jpg",
      "imageMedium": "/assets/images/big-card-left-medium.jpg",
      "imageLarge": "/assets/images/big-card-left-large.jpg",
      "imageSmallWidth": "400",
      "imageMediumWidth": "533",
      "imageLargeWidth": "710",
      "imageMediumVw": "50"
    }
  ],
  "headline": "Color. Clarity. Detail.",
  "suffix": "Polarized Plus2 Sunglasses",
  "callToAction": "View"
}
  • Content:
    .big-card {
      position: relative;
      background-color: $color-lighter;
      color: $color-dark;
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        min-height: 300px;
    
        &:before {
          position: absolute;
          top: calc(50% - 30px);
          width: 0;
          height: 0;
          border-top: 30px solid transparent;
          border-bottom: 30px solid transparent;
          content: '';
          z-index: 1;
        }
    
        &.big-card--image-right:before {
          left: 50%;
          border-left: 20px solid $color-lighter;
        }
    
        &.big-card--image-left:before {
          right: 50%;
          border-right: 20px solid $color-lighter;
        }
    
        &.big-card--image-right-landscape:before {
          left: 33.3333%;
          border-left: 20px solid $color-lighter;
        }
    
        &.big-card--image-left-landscape:before {
          right: 33.3333%;
          border-right: 20px solid $color-lighter;
        }
      }
    
      @include breakpoint($page-width-max) {
        min-height: 400px;
    
        &.big-card--double-image {
          min-height: 350px;
        }
      }
    }
    
    .big-card__link {
      display: block;
      width: 100%;
      height: 100%;
      color: $color-dark;
      text-decoration: none;
    }
    
    .big-card__image-container {
      width: 100%;
      height: 170px;
      overflow: hidden;
    
      .big-card--double-image & {
        width: 50%;
        height: 130px;
        margin-bottom: 25px;
        float: left;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        height: 100%;
    
        .big-card--image-right & {
          position: absolute;
          right: 0;
          width: 50%;
          float: right;
        }
    
        .big-card--image-left & {
          position: absolute;
          left: 0;
          width: 50%;
          float: left;
        }
    
        .big-card--image-right-landscape & {
          position: absolute;
          right: 0;
          width: 66.6666%;
          float: right;
        }
    
        .big-card--image-left-landscape & {
          position: absolute;
          left: 0;
          width: 66.6666%;
          float: left;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .big-card--double-image & {
          width: 33.3333%;
          height: 100%;
          margin-bottom: 0;
    
          &.big-card__image-container--left {
            position: absolute;
            left: 0;
            float: left;
          }
    
          &.big-card__image-container--right {
            position: absolute;
            right: 0;
            float: right;
          }
        }
      }
    }
    
    .big-card__text {
      padding: 20px 10px;
      text-align: center;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        padding: 30px;
        text-align: left;
    
        .big-card--image-right & {
          width: 50%;
          float: left;
        }
    
        .big-card--image-left & {
          width: 50%;
          float: right;
        }
    
        .big-card--image-right-landscape & {
          width: 33.3333%;
          float: left;
        }
    
        .big-card--image-left-landscape & {
          width: 33.3333%;
          float: right;
        }
    
        .big-card--double-image & {
          text-align: center;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 32px 30px 30px;
    
        .big-card--double-image & {
          width: 33.3333%;
          margin-right: 33.3333%;
          margin-left: 33.3333%;
          float: left;
        }
      }
    
      @include breakpoint($page-width-max) {
        padding: 32px 50px 50px;
      }
    }
    
    .big-card__prefix {
      display: block;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 2px;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        color: $color-darkest;
        font-size: 1.6rem;
        letter-spacing: 1px;
        line-height: 2.0rem;
      }
    
      @include breakpoint($page-width-max) {
        padding-top: 2px;
        font-size: 2.4rem;
        font-weight: $font-weight-bold;
        letter-spacing: 1px;
        line-height: 2.8rem;
      }
    }
    
    .big-card__headline {
      margin: 7px 0 0;
      color: $color-darkest;
      font-size: 2.0rem;
      letter-spacing: 1px;
      line-height: 2.4rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 27px;
        color: $color-dark;
        font-size: 2.8rem;
        line-height: 3.4rem;
      }
    
      @include breakpoint($page-width-max) {
        margin-top: 46px;
        font-size: 4.7rem;
        line-height: 5.6rem;
    
        .big-card--double-image & {
          margin-top: 26px;
        }
      }
    }
    
    .big-card__suffix {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        margin-top: 9px;
        font-size: 1.4rem;
      }
    
      @include breakpoint($breakpoint-lg) {
        color: $color-darkest;
        font-size: 1.6rem;
        line-height: 1.9rem;
      }
    
      @include breakpoint($page-width-max) {
        margin-top: 20px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .big-card__description {
      margin: 7px 0 0;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 23px;
      }
    
      @include breakpoint($page-width-max) {
        margin-top: 40px;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .big-card li:not([class]) {
      margin: 0;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .big-card__call-to-action {
      display: block;
      margin: 15px auto 0;
      background: transparent;
      line-height: 4.8rem;
    
      @include breakpoint($breakpoint-md) {
        max-width: 100%;
        margin: 30px 0 0;
      }
    
      @include breakpoint($breakpoint-lg) {
        .big-card--double-image & {
          margin-right: auto;
          margin-left: auto;
        }
      }
    }
    
  • URL: /components/raw/big-card/big-card.scss
  • Filesystem Path: src/components/02-components/big-card/big-card.scss
  • Size: 5.3 KB

There are no notes for this item.