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

tweaked customer review

Browse Source
This commit is contained in:
Kelsey Jackson
2025-02-13 15:08:30 -06:00
parent 13b67db869
commit f3628ad2d8
1 changed files with 4 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/docs/patterns/ecommerce-review.md
View File

@@ -8,7 +8,7 @@ tags: e-commerce
### Product Review
```html {.example}
<div>
<div style="max-width: 960px; margin: 0 auto;">
<div>
<h2>Customer Reviews</h2>
<div>
@@ -23,21 +23,21 @@ tags: e-commerce
</div>
<div style="margin-top: 1rem;">
<div>
<div class="customer-list-item">
<div style="border-bottom: 1px solid var(--border-color);margin-bottom: 1rem;">
<span style="display: flex; align-items: center;">
<wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="man-wearing-henley" style="margin-right: 1rem;"></wa-avatar>
<span style="display: flex; flex-direction: column">Mark Henry <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
</span>
<p><em>I initially had my doubts, but once I got the widgets and played around with them, I became a believer.</em></p>
</div>
<div class="customer-list-item">
<div style="border-bottom: 1px solid var(--border-color);margin-bottom: 1rem;">
<span style="display: flex; align-items: center;">
<wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="lady-in-turtleneck" style="margin-right: 1rem;"></wa-avatar>
<span style="display: flex; flex-direction: column">Liz Michaels <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
</span>
<p><em>I'd definitely but these again.</em></p>
</div>
<div class="customer-list-item">
<div style="border-bottom: 1px solid var(--border-color);margin-bottom: 1rem;">
<span style="display: flex; align-items: center;">
<wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="man-with-hair" style="margin-right: 1rem;"></wa-avatar>
<span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
@@ -47,19 +47,9 @@ tags: e-commerce
</div>
</div>
</div>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
.customer-list-item {
border-bottom: 1px solid var(--border-color);
margin-bottom: 1rem;
}
.cart-item-image {
width: 100%;
}
</style>
```