# Simple 01

> A centred heading over eight people with round photos, names and roles.

URL: https://apogee.avaui.dev/docs/team-sections/simple-01
Last updated: 2026-10-20

A centred heading over eight people with round photos, names and roles.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/team/simple-01

```astro
---
/**
 * Simple 01: A centred heading over eight people with round photos, names and roles.
 *
 * @block team
 * @order 1
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import Image from '@/components/apogee/Image/Image.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { TeamContent } from '@/components/apogee/sections/_shared/team.ts'

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

const {
  eyebrow = "We're hiring!",
  heading = 'Meet our team',
  description = 'We hire diverse, passionate people and build a culture that lets everyone do their best work.',
  items = [
    { name: 'Maya Okafor', role: 'Founder and CEO', avatar: 'https://picsum.photos/id/1027/192/192' },
    { name: 'Tomas Lindqvist', role: 'Engineering Manager', avatar: 'https://picsum.photos/id/856/192/192' },
    { name: 'Priya Raman', role: 'Product Manager', avatar: 'https://picsum.photos/id/832/192/192' },
    { name: 'Jonah Weiss', role: 'Frontend Developer', avatar: 'https://picsum.photos/id/91/192/192' },
    { name: 'Lucía Ortega', role: 'Backend Developer', avatar: 'https://picsum.photos/id/64/192/192' },
    { name: 'Samir Haddad', role: 'Product Designer', avatar: 'https://picsum.photos/id/375/192/192' },
    { name: 'Hana Kobayashi', role: 'UX Researcher', avatar: 'https://picsum.photos/id/823/192/192' },
    { name: 'Eli Brennan', role: 'Customer Success', avatar: 'https://picsum.photos/id/836/192/192' },
  ],
} = Astro.props
---

<Section spacing="large">
  <div class="flex flex-col gap-12 md:gap-16">
    <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} size="large" align="center" />
    <ul class="grid list-none p-0 gap-x-8 gap-y-12 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      {items.map((p) => (
        <li><div class="flex flex-col items-center gap-4">{p.avatar && <Image src={p.avatar} alt="" width={192} height={192} fit="cover" radius="full" outline class="size-20 md:size-24" />}<div class="flex flex-col items-center text-center"><Heading as="h3" size="h6">{p.name}</Heading><p class="text-primary">{p.role}</p></div></div></li>
      ))}
    </ul>
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add team/simple-01
```

This copies the block to `src/components/apogee/blocks/team/` with everything it uses: Heading, Image, 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/team-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.
-   Photos that only decorate have an empty `alt`; give yours one when it carries meaning.

## Related

[

TeamPeople as a grid of cards or a list with bios.

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

ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.

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

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)