Alex Morgan
★★★★★
Exactly what I needed
The utilities are predictable, and the components gave us a solid accessible starting point.
Review Cards
Review card examples composed from cards, avatars, badges, buttons and utility classes.
Default
Use an article for a self-contained review, a heading for the reviewer and a time element for the publication date. The visible stars expose one concise accessible rating.
Verified purchase
<article class="card shadow-sm border-primary">
<div class="card-body d-flex flex-column gap-3">
<header class="d-flex align-items-center flex-wrap gap-2">
<span class="avatar bg-primary" aria-hidden="true">AM</span>
<div>
<h3 class="h5 mb-0">Alex Morgan</h3>
<p class="text-muted text-sm mb-0">
<time datetime="2026-08-28">August 28, 2026</time>
</p>
</div>
<span class="badge bg-success ms-auto">Verified purchase</span>
</header>
<div class="bg-primary bg-opacity-10 rounded p-3">
<p class="text-warning mb-1">
<span role="img" aria-label="5 out of 5 stars">★★★★★</span>
</p>
<h4 class="h6 card-title">Exactly what I needed</h4>
<blockquote class="m-0">
<p class="mb-0">The utilities are predictable, and the components gave us a solid accessible starting point.</p>
</blockquote>
</div>
</div>
</article>With an action
Buttons work well for optional feedback. Keep the rating separate from the buttons so the review remains understandable without interaction.
Jamie Lee
Design engineer
★★★★☆
A flexible foundation
It was easy to match the card to our theme while retaining the established spacing and focus states.
<article class="card shadow-sm">
<div class="card-body d-flex flex-column gap-3">
<header class="d-flex align-items-center gap-2">
<span class="avatar bg-secondary" aria-hidden="true">JL</span>
<div>
<h3 class="h5 mb-0">Jamie Lee</h3>
<p class="text-muted text-sm mb-0">Design engineer</p>
</div>
</header>
<div>
<p class="text-warning mb-1">
<span role="img" aria-label="4 out of 5 stars">★★★★☆</span>
</p>
<h4 class="h6 card-title">A flexible foundation</h4>
<blockquote class="m-0">
<p class="mb-0">It was easy to match the card to our theme while retaining the established spacing and focus states.</p>
</blockquote>
</div>
<footer class="d-flex align-items-center flex-wrap gap-2 border-t pt-3">
<span class="text-muted text-sm">Was this review helpful?</span>
<button class="btn btn-outline btn-primary btn-sm" type="button">
<span>Yes</span> <span class="badge">12</span>
</button>
<button class="btn btn-text btn-primary btn-sm" type="button">No</button>
</footer>
</div>
</article>Responsive collection
Place the same composition in the responsive grid. Cards span the full width on small screens and share a row from the medium breakpoint.
Nora Silva
★★★★★
Clear naming and a great fit for small projects.
Robin Kim
★★★★☆
The utilities made our responsive layout pleasantly direct.
Taylor Patel
★★★★★
Useful defaults with enough tokens to make the result our own.
<div class="grid">
<article class="card shadow-sm col col-md-4">
<div class="card-body d-flex flex-column gap-2">
<div class="d-flex align-items-center gap-2">
<span class="avatar bg-primary" aria-hidden="true">NS</span>
<h3 class="h6 mb-0 card-title">Nora Silva</h3>
</div>
<p class="text-warning mb-0">
<span role="img" aria-label="5 out of 5 stars">★★★★★</span>
</p>
<blockquote class="m-0">
<p class="mb-0">Clear naming and a great fit for small projects.</p>
</blockquote>
</div>
</article>
<article class="card shadow-sm col col-md-4">
<div class="card-body d-flex flex-column gap-2">
<div class="d-flex align-items-center gap-2">
<span class="avatar bg-secondary" aria-hidden="true">RK</span>
<h3 class="h6 mb-0 card-title">Robin Kim</h3>
</div>
<p class="text-warning mb-0">
<span role="img" aria-label="4 out of 5 stars">★★★★☆</span>
</p>
<blockquote class="m-0">
<p class="mb-0">The utilities made our responsive layout pleasantly direct.</p>
</blockquote>
</div>
</article>
<article class="card shadow-sm col col-md-4">
<div class="card-body d-flex flex-column gap-2">
<div class="d-flex align-items-center gap-2">
<span class="avatar bg-success" aria-hidden="true">TP</span>
<h3 class="h6 mb-0 card-title">Taylor Patel</h3>
</div>
<p class="text-warning mb-0">
<span role="img" aria-label="5 out of 5 stars">★★★★★</span>
</p>
<blockquote class="m-0">
<p class="mb-0">Useful defaults with enough tokens to make the result our own.</p>
</blockquote>
</div>
</article>
</div>