Details

<div class="confirmation-details">
    <ul class="confirmation-details__items">
        <li class="confirmation-details__item">
            <span class="confirmation-details__item-label">Date:</span>
            <span class="confirmation-details__item-value">3/13/2017</span>
        </li>
        <li class="confirmation-details__item">
            <span class="confirmation-details__item-label">Order N.:</span>
            <span class="confirmation-details__item-value">W000153817911</span>
        </li>
        <li class="confirmation-details__item">
            <span class="confirmation-details__item-label">Shipping Method:</span>
            <span class="confirmation-details__item-value">FedEx - Ground Free</span>
        </li>
    </ul>
</div>
<div class="confirmation-details">
  <ul class="confirmation-details__items">
    {{#each info}}
    <li class="confirmation-details__item">
      <span class="confirmation-details__item-label">{{label}}:</span>
      <span class="confirmation-details__item-value">{{value}}</span>
    </li>
    {{/each}}
  </ul>
</div>
{
  "pageCss": [
    "checkout"
  ],
  "info": [
    {
      "label": "Date",
      "value": "3/13/2017"
    },
    {
      "label": "Order N.",
      "value": "W000153817911"
    },
    {
      "label": "Shipping Method",
      "value": "FedEx - Ground Free"
    }
  ]
}
  • Content:
    .confirmation-details__items {
      @include clearfix;
      @include reset-list;
      padding: 15px 10px;
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        padding: 30px;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 10px 0;
      }
    }
    
    .confirmation-details__item {
      @include breakpoint($breakpoint-md) {
        @include span(6);
        margin: 5px 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        @include span(3);
      }
    }
    
    .confirmation-details__item-label {
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 5px;
      }
    }
    
    .confirmation-details__item-value {
      @include breakpoint($breakpoint-xl) {
        color: $color-dark;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
  • URL: /components/raw/confirmation-details/confirmation-details.scss
  • Filesystem Path: src/components/02-components/confirmation/confirmation-details/confirmation-details.scss
  • Size: 881 Bytes
  • Handle: @confirmation-details
  • Preview:
  • Filesystem Path: src/components/02-components/confirmation/confirmation-details/confirmation-details.html

There are no notes for this item.