Testimonials

What is a testimonial section?

A testimonial section displays quotes from customers, clients or users to build trust. Each testimonial usually includes the quote, the person's name, their role or company and often a photo or star rating. Layouts range from a single large quote to card grids, masonry walls, sliders and logo-plus-quote combinations. They are a core form of social proof on landing pages, pricing pages and product pages.

When to use testimonials

Place them close to the point where visitors hesitate: near pricing, below a feature list or next to a signup form. Short, specific quotes that mention a concrete result are more convincing than generic praise.

Best practices

• Use <figure> with <blockquote> for the quote and <figcaption> for the author, which gives the content clear semantics.
• Add meaningful alt text to author photos, or empty alt="" if the name already sits next to the image.
• If you use a slider, provide visible previous and next buttons with aria-labels, keyboard support and no fast auto-rotation; let users pause any automatic movement.
• Show star ratings as text too (for example "5 out of 5") so screen readers can read them.
• Keep quotes short and avoid truncating text on small screens; let cards grow in height instead.
• Lazy-load avatars and keep image sizes small.

Bootstrap, Tailwind CSS and pure CSS versions

The testimonial examples come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use cards, the grid and, for sliders, the carousel component; Bootstrap 6 examples load its JavaScript as an ES module and use the theme-* colour roles. Tailwind CSS versions are built with utilities, and pure CSS versions often use CSS Grid or scroll snapping instead of a script. Use the framework filter, compare layouts in the live preview, then copy the code from the tabs or download the files. Replace the quotes, names and photos with real customer feedback and the responsive testimonial section is ready to use.