Summary

<div class="confirmation-summary">
    <div class="confirmation-summary__group confirmation-summary__group--billing">
        <span class="confirmation-summary__group-label">Billing Information</span>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-value">American Express<br>John Doe<br>****-****-**12-3456<br>10/2018</span>
        </div>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-value">John Doe<br>Apple, Inc.<br>888-888-1234<br>One Aloha Lane<br>Peoria, IL 61615<br>United States</span>
        </div>
    </div>
    <div class="confirmation-summary__group">
        <span class="confirmation-summary__group-label">Shipping Address</span>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-value">John Doe<br>One Aloha Lane<br>Peoria, IL 61615<br>United States</span>
        </div>
    </div>
    <div class="confirmation-summary__group">
        <span class="confirmation-summary__group-label">Amount</span>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-label">Subtotal (5):</span>
            <span class="confirmation-summary__data-value">$1,389.97</span>
        </div>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-label">Gift Bag (1):</span>
            <span class="confirmation-summary__data-value">$3.99</span>
        </div>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-label">Tax:</span>
            <span class="confirmation-summary__data-value">$142.88</span>
        </div>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-label">Delivery:</span>
            <span class="confirmation-summary__data-value">$0.00</span>
        </div>
        <div class="confirmation-summary__data">
            <span class="confirmation-summary__data-label">Total:</span>
            <span class="confirmation-summary__data-value">$1,536.84</span>
        </div>
    </div>
</div>
<div class="confirmation-summary">
  {{#each items}}
  <div class="confirmation-summary__group{{#if modifier}} confirmation-summary__group--{{modifier}}{{/if}}">
    {{#if label}}
    <span class="confirmation-summary__group-label">{{label}}</span>
    {{/if}}
    {{#each data}}
    <div class="confirmation-summary__data">
      {{#if label}}
      <span class="confirmation-summary__data-label">{{label}}:</span>
      {{/if}}
      <span class="confirmation-summary__data-value">{{{value}}}</span>
    </div>
    {{/each}}
  </div>
  {{/each}}
</div>
{
  "pageCss": [
    "checkout"
  ],
  "items": [
    {
      "modifier": "billing",
      "label": "Billing Information",
      "data": [
        {
          "value": "American Express<br>John Doe<br>****-****-**12-3456<br>10/2018"
        },
        {
          "value": "John Doe<br>Apple, Inc.<br>888-888-1234<br>One Aloha Lane<br>Peoria, IL 61615<br>United States"
        }
      ]
    },
    {
      "label": "Shipping Address",
      "data": [
        {
          "value": "John Doe<br>One Aloha Lane<br>Peoria, IL 61615<br>United States"
        }
      ]
    },
    {
      "label": "Amount",
      "data": [
        {
          "label": "Subtotal (5)",
          "value": "$1,389.97"
        },
        {
          "label": "Gift Bag (1)",
          "value": "$3.99"
        },
        {
          "label": "Tax",
          "value": "$142.88"
        },
        {
          "label": "Delivery",
          "value": "$0.00"
        },
        {
          "label": "Total",
          "value": "$1,536.84"
        }
      ]
    }
  ]
}
  • Content:
    // .confirmation-products__* classes can be removed once it is confirmed that
    // they are not used in production.
    
    .confirmation-products__footer,
    .confirmation-summary {
      @include clearfix;
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        padding: 5px 30px;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 0;
      }
    }
    
    .confirmation-products__footer-group,
    .confirmation-summary__group {
      @include span(12);
      margin-bottom: 10px;
    
      @include breakpoint($breakpoint-md) {
        @include span(6);
      }
    
      @include breakpoint($breakpoint-xl) {
        @include span(4);
      }
    }
    
    .confirmation-products__footer-group--billing,
    .confirmation-summary__group--billing {
      .confirmation-summary__data:not(:first-of-type) {
        margin-top: 15px;
      }
    }
    
    .confirmation-products__footer-group-label,
    .confirmation-summary__group-label {
      display: block;
      margin: 10px 0;
      font-weight: $font-weight-bold;
    }
    
    .confirmation-products__footer-data-label,
    .confirmation-summary__data-label {
      font-weight: $font-weight-bold;
    }
    
  • URL: /components/raw/confirmation-summary/confirmation-summary.scss
  • Filesystem Path: src/components/02-components/confirmation/confirmation-summary/confirmation-summary.scss
  • Size: 1.1 KB
  • Handle: @confirmation-summary
  • Preview:
  • Filesystem Path: src/components/02-components/confirmation/confirmation-summary/confirmation-summary.html

There are no notes for this item.