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

updated reviews

Browse Source
This commit is contained in:
Kelsey Jackson
2025-03-05 16:40:33 -06:00
parent dc30ed8503
commit 314801c368
1 changed files with 73 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,54 +4,92 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
parent: ecommerce
tags: e-commerce
---
## Multi column
```html{.example}
<div style="max-width: 960px; margin: 0 auto;">
<span>Recent Reviews</span>
<wa-divider></wa-divider>
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Viktor Vaughn</span>
<span class="wa-caption-m"><em>May 5th, 2023</em></span>
</div>
<div class="wa-flank">
<wa-rating label="Rating" readonly value="3"></wa-rating>
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Rating Title</span>
<p class="wa-caption-m">The product quality is amazing, it looks and feel even better than I had anticipated. Brilliant stuff! I would gladly recommend this store to my friends. And, now that I think of it... I actually have, many times!</p>
</div>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Viktor Vaughn</span>
<span class="wa-caption-m"><em>May 5th, 2023</em></span>
</div>
<div class="wa-flank">
<wa-rating label="Rating" readonly value="3"></wa-rating>
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Rating Title</span>
<p class="wa-caption-m">The product quality is amazing, it looks and feel even better than I had anticipated. Brilliant stuff! I would gladly recommend this store to my friends. And, now that I think of it... I actually have, many times!</p>
</div>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Viktor Vaughn</span>
<span class="wa-caption-m"><em>May 5th, 2023</em></span>
</div>
<div class="wa-flank">
<wa-rating label="Rating" readonly value="3"></wa-rating>
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Rating Title</span>
<p class="wa-caption-m">The product quality is amazing, it looks and feel even better than I had anticipated. Brilliant stuff! I would gladly recommend this store to my friends. And, now that I think of it... I actually have, many times!</p>
</div>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Viktor Vaughn</span>
<span class="wa-caption-m"><em>May 5th, 2023</em></span>
</div>
<div class="wa-flank">
<wa-rating label="Rating" readonly value="3"></wa-rating>
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-s">Rating Title</span>
<p class="wa-caption-m">The product quality is amazing, it looks and feel even better than I had anticipated. Brilliant stuff! I would gladly recommend this store to my friends. And, now that I think of it... I actually have, many times!</p>
</div>
</div>
</div>
</div>
```
## With Ratings Distribution
```html {.example}
<div style="max-width: 960px; margin: 0 auto;">
<div class="wa-stack">
<h2>Customer Reviews</h2>
<div class="wa-flank">
<div>
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating> Based on 1624 reviews
<span class="wa-heading-l">Customer Reviews</span>
<div><wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>Based on 1624 reviews</div>
</div>
<div class="wa-stack" style="margin-bottom: 2rem;">
<span><wa-progress-bar value="50"></wa-progress-bar></span>
<h3>Share your Thoughts</h3>
<p>If you’ve used this product, share your thoughts with other customers</p>
<wa-button size="medium">Write a Review</wa-button>
</div>
</div>
<div style="margin-top: 1rem;">
<div>
<div style="border-bottom: 1px solid var(--border-color);margin-bottom: 1rem;">
<span class="wa-flank">
<wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="customer-avatar"></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 style="border-bottom: 1px solid var(--border-color);margin-bottom: 1rem;">
<span class="wa-flank">
<wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="customer-avatar"></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>
<span class="wa-flank">
<wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="customer-avatar"></wa-avatar>
<span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
</span>
<p><em>It was everything I wanted and more, would totally recommend.</em></p>
<div class="wa-flank">
<wa-avatar></wa-avatar>
<div class="wa-stack">
<span>Emily Selman</span>
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
</div>
</div>
<p><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
</div>
</div>
</div>
</div>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
</style>
```
### Two Column