# Social cards 02brand

> Six rated quote cards with each person and their handle on the brand colour.

URL: https://apogee.avaui.dev/docs/testimonials-sections/social-cards-02-brand
Last updated: 2026-10-20

Six rated quote cards with each person and their handle on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/testimonials/social-cards-02-brand

```astro
---
/**
 * Social cards 02brand: Six rated quote cards with each person and their handle on the brand colour.
 *
 * @block testimonials
 * @order 14
 */
import { BadgeCheck } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Avatar from '@/components/apogee/Avatar/Avatar.astro'
import Rating from '@/components/apogee/Rating/Rating.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { TestimonialsContent } from '@/components/apogee/sections/_shared/testimonials.ts'

/** @composable */
interface Props extends TestimonialsContent {}

const {
  eyebrow,
  heading = 'What our customers say',
  description = 'Hear from the teams building with us every day.',
  items = [
    { quote: 'We shipped our redesign in three weeks instead of three months. The team still talks about it.', name: 'Amara Nwosu', role: '@amaran', avatar: 'https://picsum.photos/id/1027/192/192', rating: 5 },
    { quote: 'Every page we build now looks like it belongs together. Our designers finally trust what ships.', name: 'Daniel Reyes', role: '@danielr', avatar: 'https://picsum.photos/id/91/192/192', rating: 5 },
    { quote: 'Support answered in minutes, and the fix was live the same afternoon.', name: 'Sofia Marchetti', role: '@sofiam', avatar: 'https://picsum.photos/id/832/192/192', rating: 5 },
    { quote: 'Every page we build now looks like it belongs together. Our designers finally trust what ships.', name: 'Kenji Watanabe', role: '@kenjiw', avatar: 'https://picsum.photos/id/856/192/192', rating: 5 },
    { quote: 'Support answered in minutes, and the fix was live the same afternoon.', name: 'Leah Goldberg', role: '@leahg', avatar: 'https://picsum.photos/id/823/192/192', rating: 5 },
    { quote: 'It replaced four tools and a spreadsheet nobody wanted to open.', name: 'Omar Haddad', role: '@omarh', avatar: 'https://picsum.photos/id/375/192/192', rating: 5 },
  ],
} = Astro.props
---

<Section spacing="large" background="primary">
  <div class="flex flex-col gap-12 md:gap-16">
    <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} size="large" align="center" background="primary" />
    <div class="grid gap-6 lg:grid-cols-3">
    {items.map((t) => (
    <figure class="flex flex-col gap-6 rounded-xl p-6 lg:p-8 bg-page/10">
      {t.rating != null && <Rating value={t.rating} readonly size="small" color="warning" aria-label={`Rated ${t.rating} out of 5`} />}
      <blockquote class="flex-1 font-medium"><p>“{t.quote}”</p></blockquote>
      <figcaption class="flex items-center gap-3"><Avatar src={t.avatar} name={t.name} alt="" size="large" border /><span class="flex flex-col"><span class="flex items-center gap-1 font-semibold">{t.name}<BadgeCheck class="size-4 text-inherit" aria-label="Verified" /></span>{t.role && <span class="text-sm opacity-85">{t.role}</span>}</span></figcaption>
    </figure>
    ))}
    </div>
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add testimonials/social-cards-02-brand
```

This copies the block to `src/components/apogee/blocks/testimonials/` with everything it uses: Avatar, Rating, Section, SectionHeader. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/testimonials-sections#copy-is-props).

## Accessibility

-   The heading is an `h2` by default, so the block slots into a page under its `h1`; item titles are one level down.
-   The stars are read as one rating (“Rated 5 out of 5”).

## Related

[

TestimonialsOne featured quote, or a grid of quote cards.

](https://apogee.avaui.dev/docs/sections/testimonials)[

CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.

](https://apogee.avaui.dev/docs/carousel)[

RatingA star rating on native radios — pick a value on a scale, or display one read-only.

](https://apogee.avaui.dev/docs/rating)