Blossom Bento
12-column bento grid with soft pastel cards, spring-bounce hover animations, and a stat panel. Use case: wellness, beauty, or lifestyle brand. Fraunces serif for the featured pull-quote, Instrument Sans for everything else, six color-coded star palettes per card slot.
Blossom Bento the 3rd of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-ben" aria-label="Customer testimonials">
<article class="tm-ben-card tm-ben-ca">
<span class="tm-ben-blob" aria-hidden="true"></span>
<div class="tm-ben-inner">
<div>
<span class="tm-ben-tag"><span class="tm-ben-tdot" aria-hidden="true"></span> Top Review</span>
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qlg"><span class="tm-ben-qmark" aria-hidden="true">“</span>This completely changed how I approach my morning routine. I feel more present, more intentional — honestly more like myself than I have in years.</blockquote>
</div>
<figcaption class="tm-ben-ar">
<span class="tm-ben-av" aria-hidden="true">SB</span>
<span><cite class="tm-ben-an">Sasha Bloom</cite><span class="tm-ben-aro">Yoga instructor · 6 months subscriber</span></span>
</figcaption>
</div>
</article>
<article class="tm-ben-card tm-ben-cb">
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qsm">"Gentle on the system, remarkable on the results. I've recommended it to my entire wellness circle."</blockquote>
<figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">OM</span><span><cite class="tm-ben-an">Olivia Marsh</cite><span class="tm-ben-aro">Nutritionist</span></span></figcaption>
</article>
<article class="tm-ben-card tm-ben-cc">
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qsm">"Smells like a greenhouse in the best way. My skin has never been softer or more even-toned."</blockquote>
<figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">PE</span><span><cite class="tm-ben-an">Priya Easton</cite><span class="tm-ben-aro">Skincare obsessive</span></span></figcaption>
</article>
<article class="tm-ben-card tm-ben-cd">
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qsm">"Fell asleep faster than I have since I was a child. The lavender formula is genuinely magical."</blockquote>
<figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">RC</span><span><cite class="tm-ben-an">Rafael Cruz</cite><span class="tm-ben-aro">Sleep coach</span></span></figcaption>
</article>
<article class="tm-ben-card tm-ben-ce">
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qsm">"Finally a brand that doesn't lie about ingredients. Transparent, effective, beautiful packaging."</blockquote>
<figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">ZN</span><span><cite class="tm-ben-an">Zoë Nakamura</cite><span class="tm-ben-aro">Clean beauty editor</span></span></figcaption>
</article>
<article class="tm-ben-card tm-ben-cf">
<span class="tm-ben-ico" aria-hidden="true">🌿</span>
<div class="tm-ben-content">
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qsm">"The ritual of it — the scent, the texture — has become the most grounding part of my day."</blockquote>
<figcaption class="tm-ben-ar"><span class="tm-ben-av tm-ben-av-sm" aria-hidden="true">LW</span><span><cite class="tm-ben-an">Lena Ward · Therapist</cite></span></figcaption>
</div>
</article>
<article class="tm-ben-card tm-ben-cg">
<div class="tm-ben-content">
<div class="tm-ben-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-ben-qsm">"Tried seventeen wellness products this year. This is the one I actually still use. Not even close."</blockquote>
<figcaption class="tm-ben-ar"><span class="tm-ben-av tm-ben-av-sm" aria-hidden="true">MK</span><span><cite class="tm-ben-an">Maya Kim · Wellness blogger</cite></span></figcaption>
</div>
<div class="tm-ben-right">
<div class="tm-ben-snum">4.9</div>
<div class="tm-ben-slbl">avg. rating<br>12,400+ reviews</div>
</div>
</article>
</section> /* Blossom Bento — pastel 12-column bento grid. Self-contained. Cards
spring-bounce in on load (staggered delays) and lift on hover with
a soft shadow. Each card has its own accent color baked into the
stars + avatar. The blob in card .ca is a subtle radial glow,
contained inside the card via overflow:hidden. */
.tm-ben {
--tm-ben-bg: #f7f3ee;
--tm-ben-c1: #f9e8e0;
--tm-ben-c2: #e8eef5;
--tm-ben-c3: #e8f0e9;
--tm-ben-c4: #f3eaf7;
--tm-ben-c5: #fdf0d8;
--tm-ben-c6: #e5f0f0;
--tm-ben-text: #2a2420;
--tm-ben-muted: #8a7e76;
--tm-ben-a1: #d4614a;
--tm-ben-a2: #4a6fa5;
--tm-ben-a3: #4a8a56;
--tm-ben-a4: #8a4ab5;
--tm-ben-a5: #c87c1e;
--tm-ben-a6: #2a8a8a;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 138px;
gap: 11px;
padding: clamp(20px, 3vw, 40px);
background: var(--tm-ben-bg);
font-family: 'Instrument Sans', system-ui, sans-serif;
color: var(--tm-ben-text);
min-height: 500px;
}
.tm-ben-card {
border-radius: 22px;
padding: 22px 24px;
position: relative;
overflow: hidden;
transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
box-shadow 0.4s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
animation: tm-ben-fi 0.7s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-ben-card:hover {
transform: translateY(-4px) scale(1.012);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.tm-ben-card:nth-child(1) { animation-delay: 0.05s; }
.tm-ben-card:nth-child(2) { animation-delay: 0.12s; }
.tm-ben-card:nth-child(3) { animation-delay: 0.18s; }
.tm-ben-card:nth-child(4) { animation-delay: 0.22s; }
.tm-ben-card:nth-child(5) { animation-delay: 0.28s; }
.tm-ben-card:nth-child(6) { animation-delay: 0.34s; }
.tm-ben-card:nth-child(7) { animation-delay: 0.40s; }
@keyframes tm-ben-fi {
from { opacity: 0; transform: translateY(16px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tm-ben-ca { grid-column: 1 / 6; grid-row: 1 / 3; background: var(--tm-ben-c1); }
.tm-ben-cb { grid-column: 6 / 9; grid-row: 1 / 2; background: var(--tm-ben-c2); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cc { grid-column: 9 / 13; grid-row: 1 / 2; background: var(--tm-ben-c5); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cd { grid-column: 6 / 10; grid-row: 2 / 3; background: var(--tm-ben-c3); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-ce { grid-column: 10 / 13; grid-row: 2 / 3; background: var(--tm-ben-c4); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cf { grid-column: 1 / 5; grid-row: 3 / 4; background: var(--tm-ben-c6); display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
.tm-ben-cg { grid-column: 5 / 13; grid-row: 3 / 4; background: var(--tm-ben-c4); display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
.tm-ben-blob {
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, var(--tm-ben-a1) 0%, transparent 70%);
opacity: 0.12;
bottom: -40px;
right: -40px;
pointer-events: none;
}
.tm-ben-stars {
display: flex;
gap: 3px;
margin-bottom: 10px;
font-size: 12px;
letter-spacing: 1px;
}
.tm-ben-ca .tm-ben-stars { color: var(--tm-ben-a1); }
.tm-ben-cb .tm-ben-stars { color: var(--tm-ben-a2); }
.tm-ben-cc .tm-ben-stars { color: var(--tm-ben-a5); }
.tm-ben-cd .tm-ben-stars { color: var(--tm-ben-a3); }
.tm-ben-ce .tm-ben-stars { color: var(--tm-ben-a4); }
.tm-ben-cf .tm-ben-stars { color: var(--tm-ben-a6); }
.tm-ben-cg .tm-ben-stars { color: var(--tm-ben-a4); }
.tm-ben-ca .tm-ben-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tm-ben-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tm-ben-a1);
background: rgba(212, 97, 74, 0.1);
padding: 3px 9px;
border-radius: 20px;
margin-bottom: 12px;
width: fit-content;
}
.tm-ben-tdot {
width: 5px;
height: 5px;
background: var(--tm-ben-a1);
border-radius: 50%;
}
.tm-ben-qlg {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: 1.3rem;
line-height: 1.45;
color: var(--tm-ben-text);
margin: 0;
flex: 1;
display: flex;
align-items: center;
}
.tm-ben-qmark {
font-family: 'Newsreader', Georgia, serif;
font-size: 2.6rem;
line-height: 0;
color: var(--tm-ben-a1);
opacity: 0.3;
vertical-align: -0.4em;
margin-right: 4px;
}
.tm-ben-ar {
display: flex;
align-items: center;
gap: 9px;
margin-top: 14px;
}
.tm-ben-av {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.tm-ben-av-sm { width: 28px; height: 28px; font-size: 10px; }
.tm-ben-ca .tm-ben-av { background: rgba(212, 97, 74, 0.15); color: var(--tm-ben-a1); }
.tm-ben-cb .tm-ben-av { background: rgba(74, 111, 165, 0.15); color: var(--tm-ben-a2); }
.tm-ben-cc .tm-ben-av { background: rgba(200, 124, 30, 0.15); color: var(--tm-ben-a5); }
.tm-ben-cd .tm-ben-av { background: rgba(74, 138, 86, 0.15); color: var(--tm-ben-a3); }
.tm-ben-ce .tm-ben-av { background: rgba(138, 74, 181, 0.15); color: var(--tm-ben-a4); }
.tm-ben-cf .tm-ben-av { background: rgba(42, 138, 138, 0.15); color: var(--tm-ben-a6); }
.tm-ben-cg .tm-ben-av { background: rgba(138, 74, 181, 0.15); color: var(--tm-ben-a4); }
.tm-ben-an {
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--tm-ben-text);
line-height: 1.3;
display: block;
}
.tm-ben-aro {
font-size: 10px;
color: var(--tm-ben-muted);
line-height: 1.4;
}
.tm-ben-qsm {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: 0.86rem;
line-height: 1.5;
color: var(--tm-ben-text);
margin: 7px 0;
flex: 1;
}
.tm-ben-cf .tm-ben-content,
.tm-ben-cg .tm-ben-content { flex: 1; }
.tm-ben-cf .tm-ben-ico {
width: 44px;
height: 44px;
background: rgba(42, 138, 138, 0.1);
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.tm-ben-cg .tm-ben-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.tm-ben-snum {
font-family: 'Fraunces', Georgia, serif;
font-size: 2.4rem;
font-weight: 300;
line-height: 1;
color: var(--tm-ben-a4);
}
.tm-ben-slbl {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tm-ben-muted);
text-align: right;
}
@media (max-width: 820px) {
.tm-ben { grid-auto-rows: auto; }
.tm-ben-ca, .tm-ben-cb, .tm-ben-cc, .tm-ben-cd,
.tm-ben-ce, .tm-ben-cf, .tm-ben-cg {
grid-column: 1 / -1; grid-row: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.tm-ben-card { animation: none; transition: none; }
.tm-ben-card:hover { transform: none; }
}