mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
Merge branch 'kj/e-commerce-patterns' into lm/ecommerce-patterns-revisions
This commit is contained in:
lindsaym-fa
@@ -6,6 +6,16 @@ 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>
|
||||
|
||||
## Three Column (WIP)
|
||||
```html{.example}
|
||||
<div class="three-column wa-stack">
|
||||
@@ -19,18 +29,6 @@ icon: preview
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.three-column {
|
||||
[class*='wa-grid'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
@@ -39,21 +37,12 @@ icon: preview
|
||||
<h1>Shop by Category</h1>
|
||||
<a href="#">Browse all Categories</a>
|
||||
</div>
|
||||
<div class="category-grid wa-grid" style="grid-template-rows: 1fr 1fr 1fr 1fr;">
|
||||
<div style="grid-row: 1/-1"></div>
|
||||
<div style="grid-row-start: span 2"></div>
|
||||
<div style="grid-column-start: 2; grid-row-start: span 2"></div>
|
||||
<div class="wa-stack">
|
||||
<div style="--aspect-ratio: 1/.25"></div>
|
||||
<div class="wa-grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.mosaic {
|
||||
[class*='wa-grid'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
min-block-size: 10rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -29,11 +29,11 @@ tags: e-commerce
|
||||
<wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="order-history-list-item wa-grid" style="align-items: center;">
|
||||
<img class="cart-item-image" src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<img src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" style="max-width: 215px">
|
||||
<div>
|
||||
<span style="display: flex;justify-content: space-between;">
|
||||
<span class="wa-split">
|
||||
<span><strong>Kitchen Stool</strong></span>
|
||||
<span><strong>$55.00</strong></span>
|
||||
</span>
|
||||
@@ -45,12 +45,12 @@ tags: e-commerce
|
||||
<span>Out for Delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-history-list-item wa-grid" style="margin-top: 1rem; align-items: center;">
|
||||
<img class="cart-item-image" src="https://plus.unsplash.com/premium_photo-1675705062445-0c14a42d4289?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMwODJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
|
||||
<div class="wa-flank">
|
||||
<img src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" style="max-width: 215px">
|
||||
<div>
|
||||
<span style="display: flex;justify-content: space-between;">
|
||||
<span><strong>Succulent</strong></span>
|
||||
<span><strong>$5.00</strong></span>
|
||||
<span class="wa-split">
|
||||
<span><strong>Kitchen Stool</strong></span>
|
||||
<span><strong>$55.00</strong></span>
|
||||
</span>
|
||||
<p>TODO: add a description</p>
|
||||
<span>
|
||||
@@ -60,12 +60,27 @@ tags: e-commerce
|
||||
<span>Out for Delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-history-list-item wa-grid" style="margin-top: 1rem; align-items: center;">
|
||||
<img class="cart-item-image" src="https://images.unsplash.com/photo-1613536844480-ac5d7b1b6ed1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMyMzh8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
|
||||
<div class="wa-flank">
|
||||
<img src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" style="max-width: 215px">
|
||||
<div>
|
||||
<span style="display: flex;justify-content: space-between;">
|
||||
<span><strong>French Roast</strong></span>
|
||||
<span><strong>$35.00</strong></span>
|
||||
<span class="wa-split">
|
||||
<span><strong>Kitchen Stool</strong></span>
|
||||
<span><strong>$55.00</strong></span>
|
||||
</span>
|
||||
<p>TODO: add a description</p>
|
||||
<span>
|
||||
<a href="#">View Product</a> | <a href="#">Buy Again</a>
|
||||
</span>
|
||||
<br/>
|
||||
<span>Out for Delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<img src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" style="max-width: 215px">
|
||||
<div>
|
||||
<span class="wa-split">
|
||||
<span><strong>Kitchen Stool</strong></span>
|
||||
<span><strong>$55.00</strong></span>
|
||||
</span>
|
||||
<p>TODO: add a description</p>
|
||||
<span>
|
||||
@@ -81,17 +96,6 @@ tags: e-commerce
|
||||
:root {
|
||||
--border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
.order-history-list-item {
|
||||
grid-template-columns: 18% 79%;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1030px) {
|
||||
.order-history-list-item {
|
||||
grid-template-columns: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
@@ -8,153 +8,81 @@ tags: e-commerce
|
||||
## With Product Grid
|
||||
|
||||
```html{.example}
|
||||
<div class="with-product-grid wa-grid wa-gap-0" style="--min-column-size: 50ch">
|
||||
<div class="grid-item">
|
||||
<img class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
|
||||
<div class="grid-item-name">Shirt</div>
|
||||
<wa-rating label="Rating" readonly value="3"></wa-rating>
|
||||
<a class="grid-item-reviews" href="#">38 Reviews</a>
|
||||
<div class="grid-item-price">$170</div>
|
||||
<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-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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<img class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
|
||||
<div class="grid-item-name">Shirt</div>
|
||||
<wa-rating label="Rating" readonly value="3"></wa-rating>
|
||||
<a class="grid-item-reviews" href="#">38 Reviews</a>
|
||||
<div class="grid-item-price">$170</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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<img class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
|
||||
<div class="grid-item-name">Shirt</div>
|
||||
<wa-rating label="Rating" readonly value="3"></wa-rating>
|
||||
<a class="grid-item-reviews" href="#">38 Reviews</a>
|
||||
<div class="grid-item-price">$170</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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<img class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
|
||||
<div class="grid-item-name">Shirt</div>
|
||||
<wa-rating label="Rating" readonly value="3"></wa-rating>
|
||||
<a class="grid-item-reviews" href="#">38 Reviews</a>
|
||||
<div class="grid-item-price">$170</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.with-product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
|
||||
|
||||
.grid-item {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-item:nth-of-type(odd) {
|
||||
|
||||
border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
.grid-item:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
.grid-item-image {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid-item-name {
|
||||
margin-top: 1rem;
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
.grid-item wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.grid-item-reviews {
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-color-text-link: var(--wa-color-gray-50);
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
.grid-item-price {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
## Card with full details
|
||||
```html{.example}
|
||||
<div class="wa-grid card-with-details" style="--min-column-size: 50ch">
|
||||
<wa-card with-image with-footer>
|
||||
<img slot="image" class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" alt="">
|
||||
<div slot="footer" class="card-footer details">
|
||||
<span class="detail-name">Basic Tee 8-pack</span>
|
||||
<p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
|
||||
<span class="detail-color">8 colors</span>
|
||||
<span class="detail-price">$256</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image with-footer>
|
||||
<img slot="image" class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/creative.jpg" />
|
||||
<div slot="footer" class="card-footer details">
|
||||
<span class="detail-name">Basic Tee 8-pack</span>
|
||||
<p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
|
||||
<span class="detail-color">8 colors</span>
|
||||
<span class="detail-price">$256</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image with-footer>
|
||||
<img slot="image" class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
|
||||
<div slot="footer" class="card-footer details">
|
||||
<span class="detail-name">Basic Tee 8-pack</span>
|
||||
<p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
|
||||
<span class="detail-color">8 colors</span>
|
||||
<span class="detail-price">$256</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image with-footer>
|
||||
<img slot="image" class="grid-item-image" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
|
||||
<div slot="footer" class="card-footer details">
|
||||
<span class="detail-name">Basic Tee 8-pack</span>
|
||||
<p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
|
||||
<span class="detail-color">8 colors</span>
|
||||
<span class="detail-price">$256</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
<style>
|
||||
.card-with-details {
|
||||
}
|
||||
.card-with-details wa-card::part(body) {
|
||||
padding: 0;
|
||||
}
|
||||
.card-with-details .card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details {
|
||||
.detail-description {
|
||||
color: var(--wa-color-gray-50);
|
||||
}
|
||||
.detail-name {
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
.detail-color {
|
||||
color: var(--wa-color-gray-50);
|
||||
font-style: italic;
|
||||
}
|
||||
.detail-price {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
## With color swatches (WIP)
|
||||
|
||||
@@ -7,8 +7,8 @@ tags: e-commerce
|
||||
|
||||
## With images grid
|
||||
```html{.example}
|
||||
<div class="with-image-grid">
|
||||
<wa-breadcrumb>
|
||||
<div class="with-image-grid" style="max-width: 960px;margin: 0 auto;">
|
||||
<wa-breadcrumb style="margin-bottom: 1rem; display: block;">
|
||||
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Men's</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Shirts & Tops</wa-breadcrumb-item>
|
||||
@@ -38,12 +38,12 @@ tags: e-commerce
|
||||
<a href="#">117 Reviews</a>
|
||||
</div>
|
||||
<div class="wa-split" style="margin-bottom: var(--wa-space-l);">
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-group orientation="horizontal" label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-group orientation="horizontal" label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -52,42 +52,13 @@ tags: e-commerce
|
||||
<wa-button size="large" style="width: 100%;">Add to Cart</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.with-image-grid {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
wa-breadcrumb::part(base) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.image-grid img:nth-of-type(1) {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.image-grid img:nth-of-type(2) {
|
||||
grid-column: 1/7;
|
||||
}
|
||||
.image-grid img:nth-of-type(3) {
|
||||
grid-column: 7/-1;
|
||||
}
|
||||
.image-grid img:nth-of-type(4) {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## With Tiered Images
|
||||
|
||||
```html{.example}
|
||||
<div class="with-tiered-images">
|
||||
<wa-breadcrumb>
|
||||
<div style="max-width: 960px;margin: 0 auto;">
|
||||
<wa-breadcrumb style="margin-bottom: 1rem; display: block;">
|
||||
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Men's</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Shirts & Tops</wa-breadcrumb-item>
|
||||
@@ -95,11 +66,11 @@ tags: e-commerce
|
||||
<div>
|
||||
<div class="wa-split" style="margin-bottom: var(--wa-space-l);">
|
||||
<h2>Basic Tee</h2>
|
||||
<span style="font-size: var(--wa-font-size-2xl)">$35</span>
|
||||
<span style="font-size: var(--wa-font-size-2xl); margin-right: 1rem;">$35</span>
|
||||
</div>
|
||||
<div class="wa-split" style="margin-bottom: var(--wa-space-l);">
|
||||
<div>
|
||||
<span>3.9</span>
|
||||
<span style="margin-right: 1rem;">3.9</span>
|
||||
<wa-rating label="Rating" precision="0.5" value="3.9"></wa-rating>
|
||||
</div>
|
||||
<a href="#">117 Reviews</a>
|
||||
@@ -113,18 +84,17 @@ tags: e-commerce
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-split" style="margin-bottom: var(--wa-space-l);">
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-group orientation="horizontal" label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-group orientation="horizontal" label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
|
||||
<wa-button size="large" style="width: 100%;">Add to Cart</wa-button>
|
||||
<h3>Description</h3>
|
||||
<p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
|
||||
@@ -144,31 +114,14 @@ tags: e-commerce
|
||||
<wa-icon family="solid" name="earth-americas"></wa-icon>
|
||||
<h3>International delivery</h3>
|
||||
<p>Get your order in 2 years</p>
|
||||
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.with-tiered-images {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
wa-breadcrumb::part(base) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
wa-rating {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
## with images and expandable details
|
||||
|
||||
```html {.example}
|
||||
<div class="with-expandable-details">
|
||||
<div style="max-width: 960px;margin: 0 auto;">
|
||||
<wa-carousel class="carousel-thumbnails" navigation loop>
|
||||
<wa-carousel-item>
|
||||
<img
|
||||
@@ -202,7 +155,7 @@ tags: e-commerce
|
||||
</wa-carousel-item>
|
||||
</wa-carousel>
|
||||
|
||||
<div class="thumbnails">
|
||||
<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" />
|
||||
@@ -213,13 +166,13 @@ tags: e-commerce
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
|
||||
<span class="price-big">$140</span>
|
||||
<wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
<span style="display: block;font-size: 32px;">$140</span>
|
||||
<wa-rating style="margin-bottom: 1rem;" label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
<p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
|
||||
<wa-radio-group label="Select Color" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1"></wa-radio-button>
|
||||
<wa-radio-button value="2"></wa-radio-button>
|
||||
<wa-radio-button value="3"></wa-radio-button>
|
||||
<wa-radio-group orientation="horizontal" label="Select Color" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">d</wa-radio-button>
|
||||
<wa-radio-button value="2">d</wa-radio-button>
|
||||
<wa-radio-button value="3">d</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<div>
|
||||
<wa-button>Add to cart</wa-button>
|
||||
@@ -244,40 +197,10 @@ tags: e-commerce
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.with-expandable-details {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.carousel-thumbnails {
|
||||
--slide-aspect-ratio: 3 / 2;
|
||||
}
|
||||
|
||||
wa-radio-button #shadow-root div .button--medium {
|
||||
padding: var(--wa-space-xs) var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.color-circle {
|
||||
--background: #000;
|
||||
background: var(--background);
|
||||
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sweater-rating {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.price-big {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.thumbnails__scroller {
|
||||
display: flex;
|
||||
gap: var(--wa-space-s);
|
||||
@@ -286,23 +209,18 @@ tags: e-commerce
|
||||
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;
|
||||
}
|
||||
@@ -354,54 +272,35 @@ tags: e-commerce
|
||||
## Split with image
|
||||
|
||||
```html {.example}
|
||||
<div class="split-with-image">
|
||||
<div class="div-1">
|
||||
<wa-breadcrumb>
|
||||
<div class="split-with-image" style="max-width: 960px;margin: 0 auto;">
|
||||
<div>
|
||||
<wa-breadcrumb style="margin-bottom: 1rem; display: block;">
|
||||
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Men's</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Shirts & Tops</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
<h2>Everyday Ruck Snack</h2>
|
||||
<span>
|
||||
<span>$220</span> |
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
<span>1624 reviews</span>
|
||||
<div style="margin-bottom: 1rem;" class="wa-split">
|
||||
<span>$220</span>
|
||||
<span>
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
<span>1624 reviews</span>
|
||||
</span>
|
||||
</span>
|
||||
<p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
|
||||
<span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
|
||||
|
||||
|
||||
<div style="margin-bottom: 1rem;"><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</div>
|
||||
</div>
|
||||
<div class="div-2">
|
||||
<div>
|
||||
<img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
|
||||
</div>
|
||||
<div class="div-3">
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<div>
|
||||
<wa-radio-group orientation="horizontal" label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.split-with-image {
|
||||
display: grid;
|
||||
/* grid-template-columns: repeat(2, 1fr); */
|
||||
/* height: 1000px; */
|
||||
/* gap: 1rem; */
|
||||
.div-1 {
|
||||
|
||||
}
|
||||
.div-2 {
|
||||
/* background-color: black;
|
||||
grid-column-start: 2;
|
||||
grid-row: span 2 / span 2; */
|
||||
}
|
||||
.div-3 {
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
## With tabs
|
||||
|
||||
@@ -409,7 +308,7 @@ tags: e-commerce
|
||||
<div>
|
||||
<wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
<h2>Application UI Icon Pack</h2>
|
||||
<img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
|
||||
<img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/plus-assets/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
|
||||
<p>The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.</p>
|
||||
<wa-button variant="brand">Brand</wa-button>
|
||||
|
||||
@@ -436,7 +335,6 @@ tags: e-commerce
|
||||
<wa-tab panel="custom">Custom</wa-tab>
|
||||
<wa-tab panel="advanced">Advanced</wa-tab>
|
||||
<wa-tab panel="disabled" disabled>Disabled</wa-tab>
|
||||
|
||||
<wa-tab-panel name="general">
|
||||
<div></div>
|
||||
<div>
|
||||
@@ -450,7 +348,5 @@ tags: e-commerce
|
||||
<wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
|
||||
<wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user