js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

added content to drawer

Browse Source
This commit is contained in:
Kelsey Jackson
2025-06-04 14:50:52 -05:00
parent 24d0d6f004
commit 96ef30294c
1 changed files with 71 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/webawesome/docs/assets/examples/layout-patterns/product-single.html
View File

@@ -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>