# Review summary · MIAN

An average rating with stars, the number of reviews and a distribution of 5 to 1 stars.

- Id: `review-summary` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/review-summary
- Use for: reviews summary, average rating, rating distribution, customer reviews.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Reviews

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/review-summary/source