Member Stats Card
A membership card with a badge icon and a three-column stats footer.
Requires Bootstrap 5. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><div class="card border-0 shadow-sm text-center" style="max-width:300px">
<div class="card-body">
<div class="rounded-circle mx-auto mb-2 d-grid text-white" style="width:70px;height:70px;place-items:center;font-size:28px;background:linear-gradient(135deg,#11998e,#38ef7d)">★</div>
<h5 class="mb-0">Pro Member</h5>
<p class="text-secondary small">Since 2021</p>
<div class="row text-center border-top pt-3">
<div class="col"><div class="fw-bold text-primary">4.9</div><div class="text-secondary" style="font-size:.72rem">Rating</div></div>
<div class="col border-start border-end"><div class="fw-bold text-primary">186</div><div class="text-secondary" style="font-size:.72rem">Reviews</div></div>
<div class="col"><div class="fw-bold text-primary">98%</div><div class="text-secondary" style="font-size:.72rem">Positive</div></div>
</div>
</div>
</div>Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.