From 96ef30294ca54caeadb5a592d18bf37a6e241181 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Wed, 4 Jun 2025 14:50:52 -0500
Subject: [PATCH] added content to drawer

---
 .../layout-patterns/product-single.html       | 73 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html b/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html
index d8f128af4..7aee2c5c9 100644
--- a/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html
+++ b/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html
@@ -80,8 +80,77 @@
               <wa-radio-button value="xl">XL</wa-radio-button>
             </wa-radio-group>
             <wa-drawer label="Drawer" id="drawer-overview">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
+              <div class="wa-stack">
+                <article class="wa-flank" style="--flank-size: 6rem">
+                  <div class="wa-frame wa-border-radius-m">
+                    <img
+                      src="https://images.unsplash.com/photo-1704677982224-89cd6d039fa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDEwOTJ8&ixlib=rb-4.0.3&q=80&w=1080"
+                      alt="" />
+                  </div>
+                  <div class="wa-stack wa-gap-2xs">
+                    <div class="wa-split wa-gap-2xs">
+                      <strong>AJ1 Low</strong>
+                      <strong>$170.00</strong>
+                    </div>
+                    <span class="wa-caption-m">Multi-color</span>
+                    <div class="wa-split wa-gap-2xs">
+                      <span class="wa-body-s">Qty: 1</span>
+                      <wa-button appearance="plain" size="small">Remove</wa-button>
+                    </div>
+                  </div>
+                </article>
+                <wa-divider></wa-divider>
+                <article class="wa-flank" style="--flank-size: 6rem">
+                  <div class="wa-frame wa-border-radius-m">
+                    <img
+                      src="https://images.unsplash.com/photo-1672908615254-71a0b373eaba?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                      alt="(Photograph by Hamed darzi)" />
+                  </div>
+                  <div class="wa-stack wa-gap-2xs">
+                    <div class="wa-split wa-gap-2xs">
+                      <strong>The Trails</strong>
+                      <strong>$35.00</strong>
+                    </div>
+                    <span class="wa-caption-m">Twilight Blue</span>
+                    <div class="wa-split wa-gap-2xs">
+                      <span class="wa-body-s">Qty: 1</span>
+                      <wa-button appearance="plain" size="small">Remove</wa-button>
+                    </div>
+                  </div>
+                </article>
+                <wa-divider></wa-divider>
+                <article class="wa-flank" style="--flank-size: 6rem">
+                  <div class="wa-frame wa-border-radius-m">
+                    <img
+                      src="https://images.unsplash.com/photo-1693443687750-611ad77f3aba?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                      alt="(Photograph by tian dayong)" />
+                  </div>
+                  <div class="wa-stack wa-gap-2xs">
+                    <div class="wa-split wa-gap-2xs">
+                      <strong>Outcast 2-pack</strong>
+                      <strong>$27.00</strong>
+                    </div>
+                    <span class="wa-caption-m">Black / White</span>
+                    <div class="wa-split wa-gap-2xs">
+                      <span class="wa-body-s">Qty: 1</span>
+                      <wa-button appearance="plain" size="small">Remove</wa-button>
+                    </div>
+                  </div>
+                </article>
+              </div>
+              <div slot="footer" class="wa-stack" style="width: 100%">
+                <div class="wa-split">
+                  <strong>Subtotal</strong>
+                  <strong>$232.00</strong>
+                </div>
+                <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
+                <wa-button variant="brand">Checkout</wa-button>
+                <wa-button appearance="plain" size="small" variant="brand">
+                  Continue Shopping
+                  <wa-icon name="arrow-right"></wa-icon>
+                </wa-button>
+              </div>
+
             </wa-drawer>
 
             <wa-button variant="brand">Add to Cart</wa-button>