Testimonials Grid
A grid of customer testimonial cards with ratings and avatars.
Card
Avatar
Rating
Preview
What Our Customers Say
Trusted by thousands of teams worldwide to build better products faster.
“Transformed our workflow completely. The team productivity has increased by 40%.”
SC
Sarah Chen
CTO at TechFlow
“The best investment we've made this year. Simple to set up and powerful to use.”
MR
Marcus Rodriguez
Founder at LaunchPad
“Outstanding support team and a product that just works. Couldn't ask for more.”
EW
Emily Watson
VP Engineering at DataCore
“We switched from three different tools to just this one. Game changer.”
JP
James Park
Lead Developer at CloudNine
“The analytics alone are worth the price. We finally understand our users.”
PS
Priya Sharma
Product Manager at Nexus
“Scaled from 10 to 10,000 users without a single issue. Incredible reliability.”
TA
Tom Andersen
CEO at GrowthStack
Code
<div class="w-full max-w-6xl mx-auto space-y-12">
<div class="text-center space-y-4">
<h2 class="scroll-m-20 text-3xl sm:text-4xl font-semibold tracking-tight">
What Our Customers Say
</h2>
<BbTypographyLead class="mx-auto max-w-2xl text-muted-foreground">
Trusted by thousands of teams worldwide to build better products faster.
</BbTypographyLead>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<BbCard>
<BbCardContent class="pt-6 space-y-4">
<div class="flex gap-0.5">
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
</div>
<BbTypographyBlockquote class="border-l-0 pl-0">
“Your testimonial text here.”
</BbTypographyBlockquote>
</BbCardContent>
<BbCardFooter class="flex items-center gap-3">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>AB</BbAvatarFallback>
</BbAvatar>
<div>
<BbTypographySmall class="font-semibold">Full Name</BbTypographySmall>
<BbTypographyMuted>Role at Company</BbTypographyMuted>
</div>
</BbCardFooter>
</BbCard>
<BbCard>
<BbCardContent class="pt-6 space-y-4">
<div class="flex gap-0.5">
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
</div>
<BbTypographyBlockquote class="border-l-0 pl-0">
“Your testimonial text here.”
</BbTypographyBlockquote>
</BbCardContent>
<BbCardFooter class="flex items-center gap-3">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>CD</BbAvatarFallback>
</BbAvatar>
<div>
<BbTypographySmall class="font-semibold">Full Name</BbTypographySmall>
<BbTypographyMuted>Role at Company</BbTypographyMuted>
</div>
</BbCardFooter>
</BbCard>
<BbCard>
<BbCardContent class="pt-6 space-y-4">
<div class="flex gap-0.5">
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
</div>
<BbTypographyBlockquote class="border-l-0 pl-0">
“Your testimonial text here.”
</BbTypographyBlockquote>
</BbCardContent>
<BbCardFooter class="flex items-center gap-3">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>EF</BbAvatarFallback>
</BbAvatar>
<div>
<BbTypographySmall class="font-semibold">Full Name</BbTypographySmall>
<BbTypographyMuted>Role at Company</BbTypographyMuted>
</div>
</BbCardFooter>
</BbCard>
<BbCard>
<BbCardContent class="pt-6 space-y-4">
<div class="flex gap-0.5">
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
</div>
<BbTypographyBlockquote class="border-l-0 pl-0">
“Your testimonial text here.”
</BbTypographyBlockquote>
</BbCardContent>
<BbCardFooter class="flex items-center gap-3">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>GH</BbAvatarFallback>
</BbAvatar>
<div>
<BbTypographySmall class="font-semibold">Full Name</BbTypographySmall>
<BbTypographyMuted>Role at Company</BbTypographyMuted>
</div>
</BbCardFooter>
</BbCard>
<BbCard>
<BbCardContent class="pt-6 space-y-4">
<div class="flex gap-0.5">
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
</div>
<BbTypographyBlockquote class="border-l-0 pl-0">
“Your testimonial text here.”
</BbTypographyBlockquote>
</BbCardContent>
<BbCardFooter class="flex items-center gap-3">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>IJ</BbAvatarFallback>
</BbAvatar>
<div>
<BbTypographySmall class="font-semibold">Full Name</BbTypographySmall>
<BbTypographyMuted>Role at Company</BbTypographyMuted>
</div>
</BbCardFooter>
</BbCard>
<BbCard>
<BbCardContent class="pt-6 space-y-4">
<div class="flex gap-0.5">
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
<!-- star icon SVG -->
</div>
<BbTypographyBlockquote class="border-l-0 pl-0">
“Your testimonial text here.”
</BbTypographyBlockquote>
</BbCardContent>
<BbCardFooter class="flex items-center gap-3">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>KL</BbAvatarFallback>
</BbAvatar>
<div>
<BbTypographySmall class="font-semibold">Full Name</BbTypographySmall>
<BbTypographyMuted>Role at Company</BbTypographyMuted>
</div>
</BbCardFooter>
</BbCard>
</div>
</div>