Copy-paste testimonial section HTML and CSS

Three layouts, no framework, no build step and no JavaScript. Each one is self-contained: paste the markup, paste the CSS, change the colours.

Masonry, with CSS columns

The Wall of Love layout. CSS columns handle uneven text lengths without any measuring code — the trick is break-inside: avoid on the card.

<div class="tw">
  <figure class="tc">
    <blockquote>Cut our close time from nine days to three.</blockquote>
    <figcaption><b>Sam Rivera</b><span>Finance lead, Northwind</span></figcaption>
  </figure>
  <!-- repeat .tc -->
</div>

<style>
.tw{columns:3;column-gap:16px}
.tc{break-inside:avoid;margin:0 0 16px;padding:18px;border:1px solid #e5e7eb;
    border-radius:12px;background:#fff}
.tc blockquote{margin:0 0 12px;font:400 .95rem/1.55 system-ui,sans-serif}
.tc figcaption{display:flex;flex-direction:column;font:400 .8rem/1.4 system-ui,sans-serif}
.tc figcaption b{font-size:.9rem}
.tc figcaption span{color:#6b7280}
@media (max-width:720px){.tw{columns:1}}
</style>

Equal-height grid

<style>
.tw-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.tw-grid .tc{margin:0;display:flex;flex-direction:column}
.tw-grid .tc blockquote{flex:1}
@media (max-width:900px){.tw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tw-grid{grid-template-columns:1fr}}
</style>

Carousel with no JavaScript

Scroll-snap gives you a real swipeable carousel with no script at all. It is keyboard and screen-reader friendly by default, which hand-rolled JavaScript carousels usually are not.

<style>
.tw-car{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;padding-bottom:8px}
.tw-car .tc{flex:0 0 min(340px,85%);scroll-snap-align:start;margin:0}
.tw-car::-webkit-scrollbar{height:6px}
.tw-car::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
</style>

Dark mode, for free

<style>
@media (prefers-color-scheme:dark){
  .tc{background:#111827;border-color:#374151;color:#f9fafb}
  .tc figcaption span{color:#9ca3af}
}
</style>
If you would rather not maintain the markup by hand, a wall on this site outputs exactly this kind of self-contained HTML — you can copy the generated markup straight into your page and never call our servers at all.

Common questions

CSS columns do the same job for this layout with no script, no measuring pass and no reflow after load. Reach for a library only if you need the cards ordered left-to-right rather than down each column.

Put explicit width and height attributes on every image. The browser then reserves the space before the file arrives.

Collect these for real, free

Unlimited text testimonials, unlimited walls, no card. Video is the only metered part.

Related