<header class="checkout-header">
    <div class="checkout-header__inner u-page-width-max-gutters">
        <a class="checkout-header__logo-wrapper" href="#">
      <img class="checkout-header__logo" src="/assets/images/zeal-brand-logo.png" alt="Zeal logo">
    </a>
        <h1 class="checkout-header__title">
            <span class="checkout-header__title-label">Checkout</span>
            <svg class="icon icon--lock">
  <use xlink:href="/assets/icons/icons.svg#lock"></use>
</svg>

            <span class="checkout-header__cart-number">C014550633</span>
        </h1>
    </div>
    <a class="checkout-header__cart-link" href="#checkout-cart">
    <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

  </a>
</header>
<header class="checkout-header">
  <div class="checkout-header__inner u-page-width-max-gutters">
    {{#if logo}}
    <a class="checkout-header__logo-wrapper" href="{{logo.path}}">
      <img class="checkout-header__logo" src="{{logo.image}}" alt="{{logo.alt}}">
    </a>
    {{/if}}
    {{#if title}}
    <h1 class="checkout-header__title">
      <span class="checkout-header__title-label">{{title.label}}</span>
      {{#if title.icon}}
      {{render (dynamicVariant 'icons' title.icon)}}
      {{/if}}
      {{#if number}}
      <span class="checkout-header__cart-number">{{number}}</span>
      {{/if}}
    </h1>
    {{/if}}
  </div>
  <a class="checkout-header__cart-link" href="#checkout-cart">
    {{render '@icons--cart-item'}}
  </a>
</header>
{
  "pageCss": [
    "checkout"
  ],
  "title": {
    "label": "Checkout",
    "icon": "lock"
  },
  "number": "C014550633",
  "logo": {
    "image": "/assets/images/zeal-brand-logo.png",
    "alt": "Zeal logo",
    "path": "#"
  }
}
  • Content:
    .checkout-header {
      position: relative;
      height: 50px;
      border-bottom: 1px solid $color-light;
    
      @include breakpoint($breakpoint-md) {
        height: 70px;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 100px;
      }
    }
    
    .checkout-header__inner {
      height: 100%;
      padding: 5px 10px;
      box-sizing: border-box;
    }
    
    .checkout-header__logo-wrapper {
      display: block;
      height: 100%;
      margin-right: 20px;
      float: left;
    
      @include breakpoint($breakpoint-xl) {
        white-space: nowrap;
      }
    }
    
    .checkout-header__logo {
      width: auto;
      height: 100%;
    
      @include breakpoint($breakpoint-md) {
        max-width: none;
      }
    }
    
    .checkout-header__title {
      margin: 0;
      color: $color-dark;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 4.0rem;
      text-shadow: none;
      text-transform: none;
    
      .icon {
        width: 9px;
        height: 11px;
        padding-left: 5px;
        fill: $color-dark;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        position: relative;
        height: 100%;
        float: left;
    
        .icon {
          position: relative;
          top: -8px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        line-height: 6.0rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 9.0rem;
    
        .icon {
          width: 12px;
          height: 16px;
        }
      }
    }
    
    .checkout-header__title-label {
      @include breakpoint($breakpoint-sm-only) {
        position: relative;
        top: -8px;
      }
    }
    
    .checkout-header__cart-number {
      position: relative;
      left: 4px;
      color: $color-medium-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-normal;
    
      @include breakpoint($breakpoint-sm-only) {
        position: absolute;
        bottom: -9px;
        left: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        position: absolute;
        right: 10px;
        bottom: 5px;
        left: auto;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
    .checkout-header__cart-link {
      position: absolute;
      top: 14px;
      right: $gutter-width-half;
    
      & > .icon {
        width: 25px;
        height: 22px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
  • URL: /components/raw/checkout-header/checkout-header.scss
  • Filesystem Path: src/components/02-components/checkout/checkout-header/checkout-header.scss
  • Size: 2 KB

There are no notes for this item.