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

updtated content

Browse Source
This commit is contained in:
Kelsey Jackson
2025-02-21 09:45:19 -06:00
parent 0f9ea14033
commit db592194fd
4 changed files with 146 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
docs/docs/patterns/ecommerce-category-preview.md
View File

@@ -6,29 +6,48 @@ tags: e-commerce
icon: preview
---
<style>
[class*='wa-'] div:empty {
--aspect-ratio: 1/1;
background-color: var(--wa-color-indigo-60);
border-radius: var(--wa-border-radius-m);
min-block-size: 4rem;
min-inline-size: 4rem;
aspect-ratio: var(--aspect-ratio);
}
</style>
## Grid Tiles
```html{.example}
<div class="three-column wa-stack">
<div class="wa-split" sty>
<div class="wa-stack">
<div class="wa-split">
<h1>Shop by Category</h1>
<a href="#">Browse all Categories</a>
<a href="#" class="wa-cluster">Browse all Categories <wa-icon name="arrow-right"></wa-icon></a>
</div>
<div class="category-grid wa-grid">
<div></div>
<div></div>
<div></div>
<div class="wa-grid">
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
<p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
</wa-card>
</a>
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/home.jpg"
alt="Cozy up on the couch and relax"
/>
<span class="wa-heading-m">Home</span>
<p class="wa-caption-l"><em>Cozy up on the couch and relax</em></p>
</wa-card>
</a>
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
alt="Get fit in style with our breathable poly blends"
/>
<span class="wa-heading-m">Active</span>
<p class="wa-caption-l"><em>Get fit in style with our breathable poly blends</em></p>
</wa-card>
</a>
</div>
</div>
```
@@ -36,18 +55,50 @@ icon: preview
## Mosaic Tiles
```html{.example}
<div class="mosaic wa-stack">
<div class="wa-split" sty>
<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
<div class="wa-split">
<h1>Shop by Category</h1>
<a href="#">Browse all Categories</a>
<a href="#" class="wa-cluster">Browse all Categories <wa-icon name="arrow-right"></wa-icon></a>
</div>
<div class="wa-stack">
<div style="--aspect-ratio: 1/.25"></div>
<wa-card with-image class="card-image">
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
<p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
</wa-card>
<div class="wa-grid">
<div></div>
<div></div>
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/home.jpg"
alt="Cozy up on the couch and relax"
/>
<span class="wa-heading-m">Home</span>
<p class="wa-caption-l"><em>Cozy up on the couch and relax</em></p>
</wa-card>
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
alt="Get fit in style with our breathable poly blends"
/>
<span class="wa-heading-m">Active</span>
<p class="wa-caption-l"><em>Get fit in style with our breathable poly blends</em></p>
</wa-card>
</div>
<div style="--aspect-ratio: 1/.25"></div>
<wa-card with-image class="card-image">
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
<p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
</wa-card>
</div>
</div>
```

6
docs/docs/patterns/ecommerce-incentives.md
View File

@@ -2,13 +2,13 @@
title: Incentives
description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
parent: ecommerce
unlisted: true
tags: e-commerce
---
## Promotion Dialog
```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" />
<div>
@@ -22,7 +22,7 @@ unlisted: true
<p style="font-size: xx-small;font-style: italic;">*The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</div>
</div>
</wa-dialog>
<style>
.coupon {

19
docs/docs/patterns/ecommerce-order-history.md
View File

@@ -23,7 +23,7 @@ tags: e-commerce
<strong>Total amount</strong>
<span>$590.00</span>
</span>
<span style="display: grid;grid-template-columns: 1fr 1fr;column-gap: 1rem;">
<span class="wa-cluster">
<wa-button variant="neutral" appearance="outlined">View Order</wa-button>
<wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
</span>
@@ -36,10 +36,11 @@ tags: e-commerce
<span><strong>Dome Light Fixtures</strong></span>
<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>
<p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
<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>
<wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
<wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
</span>
<wa-badge appearance="filled" variant="success">Delivered</wa-badge>
</div>
@@ -52,10 +53,11 @@ tags: e-commerce
<span><strong>Reading Chair</strong></span>
<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>
<p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
<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>
<wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
<wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
</span>
<wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
</div>
@@ -68,10 +70,11 @@ tags: e-commerce
<span><strong>Custom Sofa</strong></span>
<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>
<p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
<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>
<wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
<wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
</span>
<wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
</div>
@@ -89,7 +92,7 @@ tags: e-commerce
## Invoice Table
```html{.example}
<div style="max-width: 960px; margin: 0 auto;">
<div class="invoice-totals wa-split" style="background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); padding-inline: 1rem; padding-block: 1rem;">
<div class="wa-split" style="background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); padding-inline: 1rem; padding-block: 1rem;">
<dl class="wa-grid" style="grid-template-columns: repeat(3, 1fr); --wa-space-xl: 0;">
<div>
<dt>Date Placed</dt>

83
docs/docs/patterns/ecommerce-product-list.md
View File

@@ -8,74 +8,103 @@ tags: e-commerce
## With Product Grid
```html{.example}
<div class="wa-grid wa-gap-0" style="--min-column-size: 50ch;border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);">
<div class="wa-grid wa-gap-0" style="max-width: 960px; margin: 0 auto;">
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
<div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
<a class="wa-caption-l" href="#">38 Reviews</a>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
<div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
<div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
<div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
<div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
<img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
<strong style="margin-top: 1rem;">Shirt</strong>
<wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
<a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
<strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
</div>
</div>
```
## Card with Details
```html{.example}
<div class="wa-grid card-with-details" style="--min-column-size: 50ch">
<div class="wa-grid card-with-details" style="--min-column-size: 32ch; max-width: 960px; margin: 0 auto;">
<wa-card with-image with-footer>
<img slot="image" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" alt="">
<div slot="footer" class="wa-stack">
<span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
<p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
<p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
<span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
<strong style="font-size: var(--wa-font-size-xl);">$256</strong>
</div>
</wa-card>
<wa-card with-image with-footer>
<img slot="image" src="https://img.fortawesome.com/cfa83f3c/creative.jpg" />
<div slot="footer" class="wa-stack">
<span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
<p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
<p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
<span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
<strong style="font-size: var(--wa-font-size-xl);">$256</strong>
</div>
</wa-card>
<wa-card with-image with-footer>
<img slot="image" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
<div slot="footer" class="wa-stack">
<span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
<p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
<p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
<span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
<strong style="font-size: var(--wa-font-size-xl);">$256</strong>
</div>
</wa-card>
<wa-card with-image with-footer>
<img slot="image" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
<div slot="footer" class="wa-stack">
<span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
<p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
<p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
<span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
<span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
<strong style="font-size: var(--wa-font-size-xl);">$256</strong>
</div>
</wa-card>
</div>