Review summary
An average rating with stars, the number of reviews and a distribution of 5 to 1 stars.
Reviews
4.7212 reviews
<div class="mn-reviews" style="max-width:36rem">
<div class="mn-reviews-score"><strong>4.7</strong><span class="mn-stars" role="img" aria-label="4.7 out of 5 stars" style="--_v:94%"></span><small>212 reviews</small></div>
<ul class="mn-reviews-bars" aria-label="Rating distribution">
<li><span>5 ★</span><div class="mn-progress mn-progress-sm mn-warning" role="progressbar" aria-label="5 stars" aria-valuenow="79" style="--_v:79.2%"></div><span>168</span></li>
<li><span>4 ★</span><div class="mn-progress mn-progress-sm mn-warning" role="progressbar" aria-label="4 stars" aria-valuenow="14" style="--_v:14.2%"></div><span>30</span></li>
<li><span>3 ★</span><div class="mn-progress mn-progress-sm mn-warning" role="progressbar" aria-label="3 stars" aria-valuenow="4" style="--_v:3.8%"></div><span>8</span></li>
<li><span>2 ★</span><div class="mn-progress mn-progress-sm mn-warning" role="progressbar" aria-label="2 stars" aria-valuenow="2" style="--_v:1.9%"></div><span>4</span></li>
<li><span>1 ★</span><div class="mn-progress mn-progress-sm mn-warning" role="progressbar" aria-label="1 stars" aria-valuenow="1" style="--_v:0.9%"></div><span>2</span></li>
</ul>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/review-summary.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-stars | Stars filled to --_v (e.g. 94% for 4.7 of 5). Use anywhere, with role="img" and a label. |
| mn-reviews | The summary: mn-reviews-score and mn-reviews-bars. |
| mn-reviews-bars | Distribution rows: label, a small progress bar, count. |
Accessibility
- Stars are an image: give them role="img" and aria-label="4.7 out of 5 stars".
- Each distribution bar has a label and count in text.