# Split image 03

> Rotating rated quotes with each person, beside one photo.

URL: https://apogee.avaui.dev/docs/testimonials-sections/split-image-03
Last updated: 2026-10-20

Rotating rated quotes with each person, beside one photo.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/testimonials/split-image-03

```astro
---
/**
 * Split image 03: Rotating rated quotes with each person, beside one photo.
 *
 * @block testimonials
 * @order 25
 */
import Section from '@/components/apogee/Section/Section.astro'
import Avatar from '@/components/apogee/Avatar/Avatar.astro'
import Rating from '@/components/apogee/Rating/Rating.astro'
import Carousel from '@/components/apogee/Carousel/Carousel.astro'
import Image from '@/components/apogee/Image/Image.astro'
import type { Media } from '@/components/apogee/sections/_shared/spine.ts'
import type { TestimonialsContent } from '@/components/apogee/sections/_shared/testimonials.ts'

/** @composable */
interface Props extends TestimonialsContent {
  /** The photo beside the quotes. @category content */
  media?: Media | null
}

const {
  label = 'Testimonials',
  items = [
    { quote: 'We shipped our redesign in three weeks instead of three months. The team still talks about it.', name: 'Amara Nwosu', role: 'Head of Operations, Lumen', 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: 'Engineering Lead, Quanta', 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: 'Product Designer, Fieldwork', avatar: 'https://picsum.photos/id/832/192/192', rating: 5 },
  ],
  media = { src: 'https://picsum.photos/id/375/960/1440', alt: '', width: 960, height: 1440 },
} = Astro.props
---

<Section spacing="large">
  <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
    <div class="min-w-0">
      <Carousel label={label} visibleItems={{ base: 1 }} controlsPosition="below">
      {items.map((t) => (
      <div class="grid items-center gap-12 ">
        <figure class="flex flex-col gap-8">
          {t.rating != null && <Rating value={t.rating} readonly size="small" color="warning" aria-label={`Rated ${t.rating} out of 5`} />}
          <blockquote class="text-2xl font-medium tracking-tight text-balance md:text-4xl line-clamp-5"><p>“{t.quote}”</p></blockquote>
          <figcaption class="flex items-center gap-3"><Avatar src={t.avatar} name={t.name} alt="" size="xlarge" border /><span class="flex flex-col"><span class="flex items-center gap-1 font-semibold">{t.name}</span>{t.role && <span class="text-sm text-neutral-faded">{t.role}</span>}</span></figcaption>
        </figure>
      </div>
      ))}
      </Carousel>
    </div>
    {media && <Image src={media.src} alt={media.alt} width={media.width} height={media.height} fit="cover" class="h-96 w-full lg:h-180" />}
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add testimonials/split-image-03
```

This copies the block to `src/components/apogee/blocks/testimonials/` with everything it uses: Avatar, Carousel, Image, Rating, Section. 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 stars are read as one rating (“Rated 5 out of 5”).
-   The carousel is a named region; its arrows are buttons and it scrolls by swipe or keyboard too.
-   Photos that only decorate have an empty `alt`; give yours one when it carries meaning.

## 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)