Embeddable review summary card
A compact ratings card with average score, star row, a distribution bar per level and a featured quote, ready to embed on any page.
Tailwind CSSCardsreviewswidgetratingsembed
Live preview
Code
<!-- Embeddable review summary card: self-contained, fixed width, no external assets -->
<aside class="mx-auto w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 font-sans shadow-sm"
aria-label="Customer reviews summary">
<div class="flex items-end gap-3">
<p class="text-4xl font-bold leading-none text-slate-900">4.8</p>
<div>
<p class="text-amber-400" role="img" aria-label="4.8 out of 5 stars">★★★★★</p>
<p class="text-xs text-slate-500">Based on 1,284 reviews</p>
</div>
</div>
<!-- Distribution bars: width is the share of reviews for each star level -->
<ul class="mt-4 space-y-1.5 text-xs text-slate-600">
<li class="flex items-center gap-2"><span class="w-3">5</span>
<span class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100"><span class="block h-full bg-amber-400" style="width:78%"></span></span>
<span class="w-8 text-right">78%</span></li>
<li class="flex items-center gap-2"><span class="w-3">4</span>
<span class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100"><span class="block h-full bg-amber-400" style="width:14%"></span></span>
<span class="w-8 text-right">14%</span></li>
<li class="flex items-center gap-2"><span class="w-3">3</span>
<span class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100"><span class="block h-full bg-amber-400" style="width:5%"></span></span>
<span class="w-8 text-right">5%</span></li>
<li class="flex items-center gap-2"><span class="w-3">2</span>
<span class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100"><span class="block h-full bg-amber-400" style="width:2%"></span></span>
<span class="w-8 text-right">2%</span></li>
<li class="flex items-center gap-2"><span class="w-3">1</span>
<span class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100"><span class="block h-full bg-amber-400" style="width:1%"></span></span>
<span class="w-8 text-right">1%</span></li>
</ul>
<blockquote class="mt-4 border-t border-slate-100 pt-3 text-sm text-slate-700">
"Clear, quick and friendly. Would buy again."
<footer class="mt-1 text-xs text-slate-500">Dana K., verified buyer</footer>
</blockquote>
<a href="https://example.com/reviews" class="mt-3 inline-block text-xs font-medium text-indigo-600 hover:underline">Read all reviews</a>
</aside>
How it works
What it solves
Third-party pages that embed your reviews need a small, predictable block that does not inherit odd styles from the host. This card summarises the whole picture at a glance: the average, how many people voted and how opinions split across star levels.
How it works
The block is an aside with a fixed max-w-xs, so it never grows past a sidebar slot. The top row pairs a large number with a star row; the stars use role="img" and a full-sentence aria-label, so assistive tools announce "4.8 out of 5 stars" instead of reading five glyphs. Each distribution row is a flex line of label, track and percentage; the filled bar is a block whose inline width is the only dynamic value, which makes it simple to render from the server. A single quote and a link close the card.
Adapting it
- Compute the percentages in your backend, round them, and make sure they sum to roughly 100.
- Replace the quote with the most helpful recent review.
- Wrap the card in an
iframeor a shadow root if you distribute it as an embed, so host CSS cannot leak in. - Add structured review markup separately if you want search engines to show stars.
Pitfalls
- Never hard-code the average; derive it from stored counts to avoid mismatches.
- Do not show a rating with only a handful of reviews without saying how many there are.
- Inline widths need to be integers or one decimal at most.
How to use it
- Render the card from a view that receives average, total and an array of five percentages.
- Replace the static numbers with your variables, keeping the inline width on each bar.
- Update the link target to your full reviews page.
- For embedding elsewhere, serve it inside an iframe sized to about 320 by 420 pixels.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.