From 057b76a10a00cd7fa3f7fb04e290c5651a50e5d7 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Wed, 19 Feb 2025 10:09:42 -0600
Subject: [PATCH] created e-commerce index

---
 .../patterns/ecommerce-category-preview.md    |   1 +
 docs/docs/patterns/ecommerce-incentives.md    |   4 +-
 docs/docs/patterns/ecommerce-order-history.md |  33 +--
 .../patterns/ecommerce-product-features.md    | 102 --------
 .../patterns/ecommerce-product-overview.md    | 232 +++++++-----------
 docs/docs/patterns/ecommerce-review.md        |  43 ++++
 docs/docs/patterns/ecommerce-shopping-cart.md |   8 +-
 .../patterns/ecommerce-store-navigation.md    |   1 +
 docs/docs/patterns/ecommerce.md               |  10 -
 docs/docs/patterns/ecommerce.njk              |  26 ++
 10 files changed, 184 insertions(+), 276 deletions(-)
 delete mode 100644 docs/docs/patterns/ecommerce-product-features.md
 delete mode 100644 docs/docs/patterns/ecommerce.md
 create mode 100644 docs/docs/patterns/ecommerce.njk

diff --git a/docs/docs/patterns/ecommerce-category-preview.md b/docs/docs/patterns/ecommerce-category-preview.md
index 78427bb62..f5682edf7 100644
--- a/docs/docs/patterns/ecommerce-category-preview.md
+++ b/docs/docs/patterns/ecommerce-category-preview.md
@@ -47,6 +47,7 @@ icon: preview
       <div></div>
       <div></div>
     </div>
+     <div style="--aspect-ratio: 1/.25"></div>
   </div>
 </div>
 ```
diff --git a/docs/docs/patterns/ecommerce-incentives.md b/docs/docs/patterns/ecommerce-incentives.md
index 343f04ecd..b39d01fbf 100644
--- a/docs/docs/patterns/ecommerce-incentives.md
+++ b/docs/docs/patterns/ecommerce-incentives.md
@@ -2,12 +2,12 @@
 title: Incentives
 description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
 parent: ecommerce
-tags: e-commerce
+unlisted: true
 ---
 
 ## Promotion Dialog
 
-```html {.example viewport}
+```html {.example}
 <wa-dialog label="New Here?" with-header class="coupon" style="--width: 50rem;" open>
   <div class="coupon-split">
     <img style="height: 100%" src="/assets/images/patterns/coupon.jpg" />
diff --git a/docs/docs/patterns/ecommerce-order-history.md b/docs/docs/patterns/ecommerce-order-history.md
index fdd1d5962..956f34692 100644
--- a/docs/docs/patterns/ecommerce-order-history.md
+++ b/docs/docs/patterns/ecommerce-order-history.md
@@ -29,7 +29,7 @@ tags: e-commerce
       </span>
   </div>
   <div class="wa-stack">
-    <div class="wa-flank">
+    <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
       <img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="max-width: 215px">
       <div>
         <span class="wa-split">
@@ -37,14 +37,15 @@ tags: e-commerce
           <span><strong>$215.00</strong></span>
         </span>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
-        <span>
-          <a href="#">View Product</a> |  <a href="#">Buy Again</a>
+        <div class="wa-split">
+          <span>
+            <wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
         </span>
-        <br/>
-        <span>Delivered</span>
+        <wa-badge appearance="filled" variant="success">Delivered</wa-badge>
+        </div> 
       </div>
     </div>
-    <div class="wa-flank">
+    <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
       <img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="max-width: 215px">
       <div>
         <span class="wa-split">
@@ -52,14 +53,15 @@ tags: e-commerce
           <span><strong>$115.00</strong></span>
         </span>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
-        <span>
-          <a href="#">View Product</a> |  <a href="#">Buy Again</a>
+        <div class="wa-split">
+          <span>
+          <wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
         </span>
-        <br/>
-        <span>Out for delivery</span>
+        <wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
+        </div>
       </div>
     </div>
-    <div class="wa-flank">
+    <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
       <img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="max-width: 215px">
       <div>
         <span class="wa-split">
@@ -67,11 +69,12 @@ tags: e-commerce
           <span><strong>$260.00</strong></span>
         </span>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
-        <span>
-          <a href="#">View Product</a> |  <a href="#">Buy Again</a>
+        <div class="wa-split">
+          <span>
+          <wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
         </span>
-        <br/>
-        <span>Preparing to ship</span>
+         <wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/docs/patterns/ecommerce-product-features.md b/docs/docs/patterns/ecommerce-product-features.md
deleted file mode 100644
index 7ebd6cd45..000000000
--- a/docs/docs/patterns/ecommerce-product-features.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Product Features
-description: 'Create focus landing pages for your store with detailed descriptions'
-parent: ecommerce
-tags: e-commerce
----
-
-### With Carousel
-
-```html {.example}
-<div class="wa-stack wa-gap-3xl">
-  <wa-carousel pagination navigation loop style="--aspect-ratio: 3 / 2;">
-    <wa-carousel-item>
-      <img
-        alt="Knit sweater in sand color sleeve detail, showing the seamless design"
-        src="/assets/examples/carousel/pullover-1.jpg"
-      />
-    </wa-carousel-item>
-    <wa-carousel-item>
-      <img
-        alt="Knit sweater in sand color sleeve detail, showing loose fit around the arms"
-        src="/assets/examples/carousel/pullover-2.jpg"
-      />
-    </wa-carousel-item>
-    <wa-carousel-item>
-      <img
-        alt="Knit sweater in sand color shoulder detail, showing relaxed fit on broader shoulders"
-        src="/assets/examples/carousel/pullover-3.jpg"
-      />
-    </wa-carousel-item>
-    <wa-carousel-item>
-      <img
-        alt="Knit sweater in sand color full view, showing waffle knit pattern, relaxed fit, and crew neckline"
-        src="/assets/examples/carousel/pullover-4.jpg"
-      />
-    </wa-carousel-item>
-    <wa-carousel-item>
-      <img
-        alt="Knit sweater in sand color sleeve detail, showing rolled sleeves and ribbed cuffs"
-        src="/assets/examples/carousel/pullover-5.jpg"
-      />
-    </wa-carousel-item>
-  </wa-carousel>
-  <div class="wa-grid wa-gap-3xl" style="--min-column-size: 30ch;">
-    <div class="wa-stack">
-      <h3>Pullover Sweater</h3>
-      <span class="wa-heading-l">$140</span>
-      <wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
-      <p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.</p>
-      <wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
-        <wa-radio-button value="sand">
-          <wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
-          Sand
-        </wa-radio-button>
-        <wa-radio-button value="slate">
-          <wa-icon slot="prefix" name="circle" style="color: dimgray;"></wa-icon>
-          Slate
-        </wa-radio-button>
-        <wa-radio-button value="shale">
-          <wa-icon slot="prefix" name="circle" style="color: silver;"></wa-icon>
-          Shale
-        </wa-radio-button>
-      </wa-radio-group>
-      <wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
-        <wa-radio-button value="xs">XS</wa-radio-button>
-        <wa-radio-button value="s">S</wa-radio-button>
-        <wa-radio-button value="m">M</wa-radio-button>
-        <wa-radio-button value="l">L</wa-radio-button>
-        <wa-radio-button value="xl">XL</wa-radio-button>
-      </wa-radio-group>
-      <wa-button variant="brand">Add to cart</wa-button>
-    </div>
-    <div class="wa-stack">
-      <wa-details summary="Size and Fit" open>
-        <ul class="wa-caption-m">
-          <li>True to size with a relaxed fit</li>
-          <li>Fits all shoulder shapes, broad to narrow</li>
-          <li>No pinching in the arms or irritating seams</li>
-          <li>Ribbed cuffs and hem</li>
-        </ul>
-      </wa-details>
-      <wa-details summary="Materials and Care">
-        <ul class="wa-caption-m">
-          <li>Durable Merino and Yak wool blend</li>
-          <li>Machine wash cold on delicate cycle</li>
-          <li>Lay flat to dry</li>
-          <li>Made with <wa-icon name="heart" label="love"></wa-icon> in Bentonville, USA</li>
-        </ul>
-      </wa-details>
-      <wa-details summary="Shipping">
-        <ul class="wa-caption-m">
-          <li>Flat $9 shipping free for orders under $200.</li>
-          <li>Free shipping on orders over $200, anywhere in the world.</li>
-        </ul>
-      </wa-details>
-    </div>
-  </div>
-</div>
-```
-
-
-
diff --git a/docs/docs/patterns/ecommerce-product-overview.md b/docs/docs/patterns/ecommerce-product-overview.md
index 34d5aceef..39a30d406 100644
--- a/docs/docs/patterns/ecommerce-product-overview.md
+++ b/docs/docs/patterns/ecommerce-product-overview.md
@@ -1,6 +1,6 @@
 ---
-title: Product Overviews
-description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
+title: Product Overview
+description: 'Create focus landing pages for your store with detailed descriptions'
 parent: ecommerce
 tags: e-commerce
 ---
@@ -118,151 +118,97 @@ tags: e-commerce
   </wa-button>
 </div>
 ```
-## With Image Carousel & Expandable Details
+### With Carousel
 
 ```html {.example}
-<div style="max-width: 960px;margin: 0 auto;">
-<wa-carousel class="carousel-thumbnails" navigation loop>
-  <wa-carousel-item>
-    <img
-      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/pullover-1.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/pullover-2.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/pullover-3.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/pullover-4.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/pullover-5.jpg"
-    />
-  </wa-carousel-item>
-</wa-carousel>
-
-<div class="thumbnails wa-split" style="margin-bottom: 1rem; justify-content: center">
-  <div class="thumbnails__scroller">
-    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
-    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
-    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
-    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
-    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
+<div class="wa-stack wa-gap-3xl">
+  <wa-carousel pagination navigation loop style="--aspect-ratio: 3 / 2;">
+    <wa-carousel-item>
+      <img
+        alt="Knit sweater in sand color sleeve detail, showing the seamless design"
+        src="/assets/examples/carousel/pullover-1.jpg"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        alt="Knit sweater in sand color sleeve detail, showing loose fit around the arms"
+        src="/assets/examples/carousel/pullover-2.jpg"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        alt="Knit sweater in sand color shoulder detail, showing relaxed fit on broader shoulders"
+        src="/assets/examples/carousel/pullover-3.jpg"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        alt="Knit sweater in sand color full view, showing waffle knit pattern, relaxed fit, and crew neckline"
+        src="/assets/examples/carousel/pullover-4.jpg"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        alt="Knit sweater in sand color sleeve detail, showing rolled sleeves and ribbed cuffs"
+        src="/assets/examples/carousel/pullover-5.jpg"
+      />
+    </wa-carousel-item>
+  </wa-carousel>
+  <div class="wa-grid wa-gap-3xl" style="--min-column-size: 30ch;">
+    <div class="wa-stack">
+      <h3>Pullover Sweater</h3>
+      <span class="wa-heading-l">$140</span>
+      <wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
+      <p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.</p>
+      <wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
+        <wa-radio-button value="sand">
+          <wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
+          Sand
+        </wa-radio-button>
+        <wa-radio-button value="slate">
+          <wa-icon slot="prefix" name="circle" style="color: dimgray;"></wa-icon>
+          Slate
+        </wa-radio-button>
+        <wa-radio-button value="shale">
+          <wa-icon slot="prefix" name="circle" style="color: silver;"></wa-icon>
+          Shale
+        </wa-radio-button>
+      </wa-radio-group>
+      <wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
+        <wa-radio-button value="xs">XS</wa-radio-button>
+        <wa-radio-button value="s">S</wa-radio-button>
+        <wa-radio-button value="m">M</wa-radio-button>
+        <wa-radio-button value="l">L</wa-radio-button>
+        <wa-radio-button value="xl">XL</wa-radio-button>
+      </wa-radio-group>
+      <wa-button variant="brand">Add to cart</wa-button>
+    </div>
+    <div class="wa-stack">
+      <wa-details summary="Size and Fit" open>
+        <ul class="wa-caption-m">
+          <li>True to size with a relaxed fit</li>
+          <li>Fits all shoulder shapes, broad to narrow</li>
+          <li>No pinching in the arms or irritating seams</li>
+          <li>Ribbed cuffs and hem</li>
+        </ul>
+      </wa-details>
+      <wa-details summary="Materials and Care">
+        <ul class="wa-caption-m">
+          <li>Durable Merino and Yak wool blend</li>
+          <li>Machine wash cold on delicate cycle</li>
+          <li>Lay flat to dry</li>
+          <li>Made with <wa-icon name="heart" label="love"></wa-icon> in Bentonville, USA</li>
+        </ul>
+      </wa-details>
+      <wa-details summary="Shipping">
+        <ul class="wa-caption-m">
+          <li>Flat $9 shipping free for orders under $200.</li>
+          <li>Free shipping on orders over $200, anywhere in the world.</li>
+        </ul>
+      </wa-details>
+    </div>
   </div>
 </div>
-<div>
-  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
-  <span style="display: block;font-size: 32px;">$40</span>
-  <wa-rating style="margin-bottom: 1rem;" label="Rating" precision="0.5" value="2.5"></wa-rating>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem. In efficitur nisl nec tincidunt mollis. Nulla eu velit porta, tincidunt erat a, scelerisque neque. Quisque tincidunt, erat sit amet cursus posuere, nisi mi aliquam ligula, non pulvinar augue eros eget ligula. Nullam sed molestie magna. Suspendisse porta blandit massa in suscipit. Nulla ultricies purus convallis, tincidunt orci ut, auctor sem. Suspendisse ornare orci lectus. Fusce eu orci et sem sollicitudin pharetra et eu purus. Quisque interdum, ante nec euismod consequat, ante leo maximus dui, ut commodo massa urna et nisi. Proin placerat augue in consequat fringilla.</p>
-  <wa-radio-group orientation="horizontal" label="Select Color" name="color" value="beige" style="margin-bottom: var(--wa-size);">
-    <wa-radio-button value="beige">Beige</wa-radio-button>
-    <wa-radio-button value="gray">Gray</wa-radio-button>
-    <wa-radio-button value="brown">Brown</wa-radio-button>
-  </wa-radio-group>
-<div>
-</div>
-<div class="details-group-example">
-  <wa-details summary="Locally Sourced" open>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Hand Inspected">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-</div>
-</div>
-  <wa-button variant="brand" size="large" style="margin-top: var(--wa-size);">
-      <wa-icon slot="suffix" name="cart-plus" variant="solid"></wa-icon>
-      Add to Cart
-  </wa-button>
-</div>
-<style>
-  .carousel-thumbnails {
-    --slide-aspect-ratio: 3 / 2;
-  }
-  .thumbnails__scroller {
-    display: flex;
-    gap: var(--wa-space-s);
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    scroll-padding: var(--wa-space-s);
-  }
-  .thumbnails__scroller::-webkit-scrollbar {
-    display: none;
-  }
-  .thumbnails__image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-    opacity: 0.3;
-    will-change: opacity;
-    transition: 250ms opacity;
-    cursor: pointer;
-  }
-  .thumbnails__image.active {
-    opacity: 1;
-  }
-  .details-group-example wa-details:not(:last-of-type) {
-    margin-bottom: var(--wa-space-2xs);
-  }
-</style>
-
-<script>
-  {
-    const carousel = document.querySelector('.carousel-thumbnails');
-    const scroller = document.querySelector('.thumbnails__scroller');
-    const thumbnails = document.querySelectorAll('.thumbnails__image');
-
-    scroller.addEventListener('click', e => {
-      const target = e.target;
-
-      if (target.matches('.thumbnails__image')) {
-        const index = [...thumbnails].indexOf(target);
-        carousel.goToSlide(index);
-      }
-    });
-
-    carousel.addEventListener('wa-slide-change', e => {
-      const slideIndex = e.detail.index;
-
-      [...thumbnails].forEach((thumb, i) => {
-        thumb.classList.toggle('active', i === slideIndex);
-        if (i === slideIndex) {
-          thumb.scrollIntoView({
-            block: 'nearest'
-          });
-        }
-      });
-    });
-  }
-
-    const container = document.querySelector('.details-group-example');
-
-  // Close all other details when one is shown
-  container.addEventListener('wa-show', event => {
-    if (event.target.localName === 'wa-details') {
-      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
-    }
-  });
-</script>
 ```
 
 <!-- ## Split with Image
diff --git a/docs/docs/patterns/ecommerce-review.md b/docs/docs/patterns/ecommerce-review.md
index 7602a3656..8c657c5ce 100644
--- a/docs/docs/patterns/ecommerce-review.md
+++ b/docs/docs/patterns/ecommerce-review.md
@@ -52,4 +52,47 @@ tags: e-commerce
     --border-color: var(--wa-color-surface-border);
   }
 </style>
+```
+
+### Two Column
+
+```html{.example}
+<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
+  <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
+    <div class="wa-stack wa-align-items-center">
+      <wa-avatar label="User avatar"></wa-avatar>
+      <p>Mr. Morale</p>
+      <wa-rating label="Rating" precision="0.5" value="5"></wa-rating>
+      <div>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
+    </div>
+    </div>
+    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nascetur cubilia platea proin; elit consectetur porta? Inceptos nunc consectetur aptent ut ridiculus faucibus per eu egestas. Feugiat feugiat sem consequat magnis primis enim mattis. Scelerisque diam pretium felis primis auctor placerat tempus cras. Non morbi himenaeos vitae hendrerit fringilla. Mauris donec cursus netus pulvinar cras congue dictum quisque. Himenaeos eleifend per gravida dapibus primis ac. Egestas lectus penatibus ullamcorper, aliquam volutpat ullamcorper natoque arcu.</p>
+  </div>
+  <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
+    <div class="wa-stack wa-align-items-center">
+      <wa-avatar label="User avatar"></wa-avatar>
+      <p>Metal Face DOOM</p>
+      <wa-rating label="Rating" precision="0.5" value="5"></wa-rating>
+      <div>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
+    </div>
+    </div>
+    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nascetur cubilia platea proin; elit consectetur porta? Inceptos nunc consectetur aptent ut ridiculus faucibus per eu egestas. Feugiat feugiat sem consequat magnis primis enim mattis. Scelerisque diam pretium felis primis auctor placerat tempus cras. Non morbi himenaeos vitae hendrerit fringilla. Mauris donec cursus netus pulvinar cras congue dictum quisque. Himenaeos eleifend per gravida dapibus primis ac. Egestas lectus penatibus ullamcorper, aliquam volutpat ullamcorper natoque arcu.</p>
+  </div>
+  <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
+    <div class="wa-stack wa-align-items-center">
+      <wa-avatar label="User avatar"></wa-avatar>
+      <p>Tyler Baudelaire</p>
+      <wa-rating label="Rating" precision="0.5" value="5"></wa-rating>
+      <div>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
+    </div>
+    </div>
+    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nascetur cubilia platea proin; elit consectetur porta? Inceptos nunc consectetur aptent ut ridiculus faucibus per eu egestas. Feugiat feugiat sem consequat magnis primis enim mattis. Scelerisque diam pretium felis primis auctor placerat tempus cras. Non morbi himenaeos vitae hendrerit fringilla. Mauris donec cursus netus pulvinar cras congue dictum quisque. Himenaeos eleifend per gravida dapibus primis ac. Egestas lectus penatibus ullamcorper, aliquam volutpat ullamcorper natoque arcu.</p>
+  </div>
+</div>
 ```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce-shopping-cart.md b/docs/docs/patterns/ecommerce-shopping-cart.md
index f4d94b1ed..1bdd2a60a 100644
--- a/docs/docs/patterns/ecommerce-shopping-cart.md
+++ b/docs/docs/patterns/ecommerce-shopping-cart.md
@@ -70,13 +70,13 @@ tags: e-commerce
 ## Two Columns
 
 ```html {.example}
-<div>
+<div style="max-width: 960px; margin: 0 auto;">
   <h1>Shopping Cart</h1>
   <div class="wa-grid">
     <div class="wa-stack">
       <section class="wa-grid" style="border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
         <img class="cart-item-image" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
-        <div class="wa-split">
+        <div class="wa-flank">
           <div>
             <div>
               <h3 style="margin-bottom: 0">Classic Tee</h3>
@@ -89,7 +89,7 @@ tags: e-commerce
       </section>
      <section class="wa-grid" style="border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
         <img class="cart-item-image" src="https://images.unsplash.com/photo-1564859227552-81fde4a1df0b?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" >
-        <div class="wa-split">
+        <div class="wa-flank">
           <div>
             <div>
               <h3 style="margin-bottom: 0">RVCA Graphic</h3>
@@ -102,7 +102,7 @@ tags: e-commerce
       </section>
       <section class="wa-grid">
         <img class="cart-item-image" src="https://images.unsplash.com/photo-1503341733017-1901578f9f1e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" >
-        <div class="wa-split">
+        <div class="wa-flank">
           <div>
             <div>
               <h3 style="margin-bottom: 0">Made Wild Graphic</h3>
diff --git a/docs/docs/patterns/ecommerce-store-navigation.md b/docs/docs/patterns/ecommerce-store-navigation.md
index bb952885d..66d7c6765 100644
--- a/docs/docs/patterns/ecommerce-store-navigation.md
+++ b/docs/docs/patterns/ecommerce-store-navigation.md
@@ -3,6 +3,7 @@ title: Store Navigation
 description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
 parent: ecommerce
 tags: e-commerce
+unlisted: true
 ---
 
 ## Popup Menu
diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md
deleted file mode 100644
index 56c15af48..000000000
--- a/docs/docs/patterns/ecommerce.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: E-commerce
-description: 'something clever'
-layout: page
----
-
-
-
-
-
diff --git a/docs/docs/patterns/ecommerce.njk b/docs/docs/patterns/ecommerce.njk
new file mode 100644
index 000000000..2919456cf
--- /dev/null
+++ b/docs/docs/patterns/ecommerce.njk
@@ -0,0 +1,26 @@
+---
+title: E-commerce
+description: 'something clever'
+layout: page
+---
+
+{% set ecommercePages = collections['e-commerce'] %}
+
+<section class="index-grid">
+    {%- for page in ecommercePages -%}
+
+    <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
+        <wa-card with-header>
+            <div slot="header">
+                {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+            </div>
+            <span class="page-name">{{ page.data.title }}</span>
+            {% if pageSubtitle -%}
+            <div class="wa-caption-s">{{ pageSubtitle }}</div>
+            {%- endif %}
+        </wa-card>
+    </a>
+
+    {%- endfor -%}
+
+</section>