# Simple centered 02brand

> A company logo over a large quote and the person on the brand colour.

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

A company logo over a large quote and the person on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/testimonials/simple-centered-02-brand

```astro
---
/**
 * Simple centered 02brand: A company logo over a large quote and the person on the brand colour.
 *
 * @block testimonials
 * @order 8
 */
import { Sprout } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Avatar from '@/components/apogee/Avatar/Avatar.astro'
import type { TestimonialsContent } from '@/components/apogee/sections/_shared/testimonials.ts'

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

const {
  items = [{ quote: 'It replaced four tools and a spreadsheet nobody wanted to open.', name: 'Kenji Watanabe', role: 'Founder, Northpeak', avatar: 'https://picsum.photos/id/856/192/192', company: 'Fieldwork' }],
} = Astro.props
---

<Section spacing="large" background="primary">
  {items.slice(0, 1).map((t) => (
  <figure class="mx-auto flex max-w-4xl flex-col items-center gap-8 text-center md:gap-10">
    {t.company && <span class="flex items-center gap-2 text-lg font-semibold opacity-85"><Sprout class="size-7" aria-hidden="true" />{t.company}</span>}
    <blockquote class="text-2xl font-medium tracking-tight text-balance md:text-4xl"><p>“{t.quote}”</p></blockquote>
    <figcaption class="flex flex-col items-center gap-3 text-center"><Avatar src={t.avatar} name={t.name} alt="" size="large" border /><span class="flex flex-col items-center"><span class="flex items-center gap-1 font-semibold">{t.name}</span>{t.role && <span class="text-sm opacity-85">{t.role}</span>}</span></figcaption>
  </figure>
  ))}
</Section>
```

## Add

```sh
npx @ava-ui/apogee add testimonials/simple-centered-02-brand
```

This copies the block to `src/components/apogee/blocks/testimonials/` with everything it uses: Avatar, 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

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