mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Clean up utilities and formatting, replace placeholder text in order history
This commit is contained in:
lindsaym-fa
@@ -6,80 +6,94 @@ tags: e-commerce
|
||||
---
|
||||
|
||||
## List
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-stack wa-gap-2xl">
|
||||
<h2>Order History</h2>
|
||||
<p>Check the status of recent orders, manage returns, and download invoices.</p>
|
||||
<div class="wa-split">
|
||||
<p class="wa-caption-m">Check the status of recent orders, manage returns, and download invoices.</p>
|
||||
<dl class="wa-split">
|
||||
<span class="wa-stack wa-gap-0">
|
||||
<strong>Order number</strong>
|
||||
<span>WU88191111</span>
|
||||
<dt>Order number</dt>
|
||||
<dd>WU88191111</dd>
|
||||
</span>
|
||||
<span class="wa-stack wa-gap-0">
|
||||
<strong>Date placed</strong>
|
||||
<span>January 22, 2021</span>
|
||||
<dt>Date placed</dt>
|
||||
<dd>January 22, 2021</dd>
|
||||
</span>
|
||||
<span class="wa-stack wa-gap-0">
|
||||
<strong>Total amount</strong>
|
||||
<span>$590.00</span>
|
||||
<dt>Total amount</dt>
|
||||
<dd>$590.00</dd>
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</dl>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
|
||||
<img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="max-width: 215px">
|
||||
<div>
|
||||
<span class="wa-split">
|
||||
<span><strong>Dome Light Fixtures</strong></span>
|
||||
<span><strong>$215.00</strong></span>
|
||||
</span>
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="wa-flank" style="--flank-size: 12rem">
|
||||
<div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
|
||||
<img
|
||||
src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
|
||||
<img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="max-width: 215px">
|
||||
<div>
|
||||
<span class="wa-split">
|
||||
<span><strong>Reading Chair</strong></span>
|
||||
<span><strong>$115.00</strong></span>
|
||||
</span>
|
||||
<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>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span><strong>Dome Light Fixtures</strong></span>
|
||||
<span><strong>$215.00</strong></span>
|
||||
</div>
|
||||
<p class="wa-caption-m">Illuminate your space with elegance and style with stunning Dome Light Fixtures. The shape of these lights complements both modern and traditional interiors.</p>
|
||||
<div class="wa-split">
|
||||
<wa-badge appearance="filled" variant="success">Delivered</wa-badge>
|
||||
<div class="wa-cluster">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank" style="--flank-size: 12rem">
|
||||
<div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
|
||||
<img
|
||||
src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span><strong>Reading Chair</strong></span>
|
||||
<span><strong>$115.00</strong></span>
|
||||
</div>
|
||||
<p class="wa-caption-m">Add a pop of color and a touch of elegance to any room with our Reading Chair featuring vibrant yellow fabric upholstery.</p>
|
||||
<div class="wa-split">
|
||||
<wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
|
||||
<div class="wa-cluster">
|
||||
<wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
|
||||
<wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
|
||||
<img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="max-width: 215px">
|
||||
<div>
|
||||
<span class="wa-split">
|
||||
<span><strong>Custom Sofa</strong></span>
|
||||
<span><strong>$260.00</strong></span>
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank" style="--flank-size: 12rem">
|
||||
<div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
|
||||
<img
|
||||
src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span><strong>Custom Sofa</strong></span>
|
||||
<span><strong>$260.00</strong></span>
|
||||
</div>
|
||||
<p class="wa-caption-m">Experience luxury and comfort like never before with our Custom Sofa, designed to elevate any living space. This sofa features exquisite velvet upholstery for an air of sophistication.</p>
|
||||
<div class="wa-split">
|
||||
<wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
|
||||
<div class="wa-cluster">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,85 +102,89 @@ tags: e-commerce
|
||||
```
|
||||
|
||||
## Invoice Table
|
||||
```html{.example}
|
||||
<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-split wa-callout wa-outlined wa-neutral">
|
||||
<dl class="wa-grid" style="grid-template-columns: repeat(3, 1fr); --wa-space-xl: 0;">
|
||||
<div>
|
||||
<dt>Date Placed</dt>
|
||||
<dd style="--wa-space-m: 0;">
|
||||
<time datetime="2021-01-22">January 22, 2021</time>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Order Number</dt>
|
||||
<dd style="--wa-space-m: 0;">
|
||||
WU88191111
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Total Amount</dt>
|
||||
<dd style="--wa-space-m: 0;">
|
||||
$590.00
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<wa-button>View Invoice</wa-button>
|
||||
</div>
|
||||
<table class="wa-brand">
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-gap-2xl">
|
||||
<wa-callout appearance="filled" variant="neutral">
|
||||
<div class="wa-flank:end wa-align-items-center">
|
||||
<dl class="wa-grid">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<dt>Date Placed</dt>
|
||||
<dd>
|
||||
<wa-format-date date="2021-01-22" month="long" day="numeric" year="numeric"></wa-format-date>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<dt>Order Number</dt>
|
||||
<dd>WU88191111</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<dt>Total Amount</dt>
|
||||
<dd>$590.00</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<wa-button>View Invoice</wa-button>
|
||||
</div>
|
||||
</wa-callout>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Price</th>
|
||||
<th>Status</th>
|
||||
<th>info</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="width: calc(1rem * 8);" />
|
||||
<div>
|
||||
<div>Dome Light Fixtures</div>
|
||||
<div class="wa-cluster wa-align-items-start">
|
||||
<div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
|
||||
<img
|
||||
src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span>Dome Light Fixtures</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>$215.00</td>
|
||||
<td>Delivered Jan 25, 2021</td>
|
||||
<td><a href="#">View</a></td>
|
||||
<td><a href="">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="width: calc(1rem * 8);" />
|
||||
<div>
|
||||
<div>Reading Chair</div>
|
||||
<div class="wa-cluster wa-align-items-start">
|
||||
<div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
|
||||
<img
|
||||
src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span>Reading Chair</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>$115.00</td>
|
||||
<td>Delivered Jan 25, 2021</td>
|
||||
<td><a href="#">View</a></td>
|
||||
<td><a href="">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="width: calc(1rem * 8);" />
|
||||
<div>
|
||||
<div>Custom Sofa</div>
|
||||
<div class="wa-cluster wa-align-items-start">
|
||||
<div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
|
||||
<img
|
||||
src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span>Custom Sofa</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>$260.00</td>
|
||||
<td>Delivered Jan 25, 2021</td>
|
||||
<td><a href="#">View</a></td>
|
||||
<td><a href="">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- ## List with Quick Actions
|
||||
```html{.example}
|
||||
``` -->
|
||||
|
||||
Reference in New Issue
Block a user