<footer class="checkout-footer">
    <div class="u-page-width-max-gutters">
        <ul class="checkout-footer__links">
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Shipping
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Payment
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Warranty
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Terms &amp; Conditions
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
        </ul>
        <ul class="checkout-footer__payment-methods">
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--visa" src="/assets/images/payment-method-visa.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--mastercard" src="/assets/images/payment-method-mastercard.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--amex" src="/assets/images/payment-method-amex.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--discover" src="/assets/images/payment-method-discover.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--verisign" src="/assets/images/payment-method-verisign.png" alt="">
            </li>
        </ul>
    </div>
</footer>
<footer class="checkout-footer">
  <div class="u-page-width-max-gutters">
    {{#if links}}
    <ul class="checkout-footer__links">
      {{#each links}}
      <li class="checkout-footer__links-item">
        <a class="checkout-footer__link" href="{{this.path}}">
          {{label}}
          {{render '@icons--arrow-right'}}
        </a>
      </li>
      {{/each}}
    </ul>
    {{/if}}
    {{#if paymentMethods}}
    <ul class="checkout-footer__payment-methods">
      {{#each paymentMethods}}
      <li class="checkout-footer__payment-method">{{render (dynamicVariant 'payment-method' this)}}</li>
      {{/each}}
    </ul>
    {{/if}}
  </div>
</footer>
{
  "pageCss": [
    "checkout"
  ],
  "paymentMethods": [
    "visa",
    "mastercard",
    "amex",
    "discover",
    "verisign"
  ],
  "links": [
    {
      "label": "Shipping",
      "path": "#"
    },
    {
      "label": "Payment",
      "path": "#"
    },
    {
      "label": "Warranty",
      "path": "#"
    },
    {
      "label": "Terms & Conditions",
      "path": "#"
    }
  ]
}
  • Content:
    .checkout-footer {
      position: relative;
      height: 140px;
      border-top: 1px solid $color-light;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        height: 70px;
      }
    }
    
    .checkout-footer__links {
      @include reset-list;
      @include clearfix;
    
      @include breakpoint($breakpoint-md) {
        position: absolute;
        top: 50%;
        left: 0;
        margin-right: 250px;
        transform: translateY(-50%);
      }
    }
    
    .checkout-footer__links-item {
      float: left;
      font-size: 1.4rem;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-sm-only) {
        height: 40px;
        padding: 0 10px;
        line-height: 4.0rem;
    
        &:nth-child(odd) {
          width: calc(50% - 20px);
        }
    
        &:nth-child(even) {
          width: calc(50% + 20px);
        }
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 0 20px 0 10px;
        line-height: 3.5rem;
    
        &:last-child {
          margin-right: 0;
        }
      }
    }
    
    .checkout-footer__link {
      transition: color $transition-standard;
      color: $color-darkest;
      text-decoration: none;
    
      .icon {
        position: relative;
        top: -2px;
        height: 6px;
        padding-left: 5px;
        transition: fill $transition-standard;
        fill: $color-darkest;
      }
    
      &:hover {
        color: $color-primary;
    
        .icon {
          fill: $color-primary;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        font-weight: $font-weight-bold;
    
        .icon {
          display: none;
        }
      }
    }
    
    .checkout-footer__payment-methods {
      @include reset-list;
      display: flex;
      position: relative;
      justify-content: space-between;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-sm-only) {
        height: 60px;
        padding: 20px 10px;
    
        &:before {
          position: absolute;
          top: 0;
          right: $gutter-width-half;
          left: $gutter-width-half;
          border-top: 1px solid $color-light;
          content: '';
        }
      }
    
      @include breakpoint($breakpoint-md) {
        position: absolute;
        top: 0;
        right: 0;
        height: 70px;
        padding: 25px 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 20px 10px;
      }
    }
    
    .checkout-footer__payment-method {
      margin-left: 10px;
    
      &:first-child {
        margin-left: 0;
      }
    
      .payment-method {
        height: 20px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-left: 20px;
    
        .payment-method {
          height: 30px;
        }
      }
    }
    
  • URL: /components/raw/checkout-footer/checkout-footer.scss
  • Filesystem Path: src/components/02-components/checkout/checkout-footer/checkout-footer.scss
  • Size: 2.3 KB

There are no notes for this item.