Team Grid

Responsive grid layout for showcasing team members.

Our team

Meet the team

Get to know the people behind our work.

Michael Chen

CEO & Founder

Michael brings over 15 years of experience in product development and team leadership.

Sarah Johnson

Lead Developer

Sarah specializes in building scalable applications and mentoring engineering teams.

David Kim

Design Director

David creates beautiful, user-centered designs that solve real problems.

Emily Rodriguez

Product Manager

Emily ensures our products meet user needs while staying aligned with business goals.

Alex Thompson

Marketing Director

Alex drives brand strategy and connects our products with the right audiences.

Jordan Martinez

UX Researcher

Jordan uncovers user insights that shape our product decisions and improve experiences.

---
import TeamGrid from "@page-sections/people/team-grid/TeamGrid.astro";
---

<TeamGrid
eyebrow="Our team" heading="Meet the team" subtext="Get to know the people behind our work." teamMembers={
  [
    {
      "name": "Michael Chen",
      "role": "CEO & Founder",
      "bio": "Michael brings over 15 years of experience in product development and team leadership.",
      "imageSource": "/src/assets/images/component-library/profile.jpg",
      "imageAlt": "Michael Chen"
    },
    {
      "name": "Sarah Johnson",
      "role": "Lead Developer",
      "bio": "Sarah specializes in building scalable applications and mentoring engineering teams.",
      "imageSource": "/src/assets/images/component-library/profile1.jpg",
      "imageAlt": "Sarah Johnson"
    },
    {
      "name": "David Kim",
      "role": "Design Director",
      "bio": "David creates beautiful, user-centered designs that solve real problems.",
      "imageSource": "/src/assets/images/component-library/profile2.jpg",
      "imageAlt": "David Kim"
    },
    {
      "name": "Emily Rodriguez",
      "role": "Product Manager",
      "bio": "Emily ensures our products meet user needs while staying aligned with business goals.",
      "imageSource": "/src/assets/images/component-library/profile3.jpg",
      "imageAlt": "Emily Rodriguez"
    },
    {
      "name": "Alex Thompson",
      "role": "Marketing Director",
      "bio": "Alex drives brand strategy and connects our products with the right audiences.",
      "imageSource": "/src/assets/images/component-library/profile4.jpg",
      "imageAlt": "Alex Thompson"
    },
    {
      "name": "Jordan Martinez",
      "role": "UX Researcher",
      "bio": "Jordan uncovers user insights that shape our product decisions and improve experiences.",
      "imageSource": "/src/assets/images/component-library/profile5.jpg",
      "imageAlt": "Jordan Martinez"
    }
  ]
}
/>

---
blocks:
  _component: page-sections/people/team-grid
  eyebrow: Our team
  heading: Meet the team
  subtext: Get to know the people behind our work.
  teamMembers:
    - name: Michael Chen
      role: CEO & Founder
      bio: Michael brings over 15 years of experience in product development and team leadership.
      imageSource: /src/assets/images/component-library/profile.jpg
      imageAlt: Michael Chen
    - name: Sarah Johnson
      role: Lead Developer
      bio: Sarah specializes in building scalable applications and mentoring engineering teams.
      imageSource: /src/assets/images/component-library/profile1.jpg
      imageAlt: Sarah Johnson
    - name: David Kim
      role: Design Director
      bio: David creates beautiful, user-centered designs that solve real problems.
      imageSource: /src/assets/images/component-library/profile2.jpg
      imageAlt: David Kim
    - name: Emily Rodriguez
      role: Product Manager
      bio: Emily ensures our products meet user needs while staying aligned with business goals.
      imageSource: /src/assets/images/component-library/profile3.jpg
      imageAlt: Emily Rodriguez
    - name: Alex Thompson
      role: Marketing Director
      bio: Alex drives brand strategy and connects our products with the right audiences.
      imageSource: /src/assets/images/component-library/profile4.jpg
      imageAlt: Alex Thompson
    - name: Jordan Martinez
      role: UX Researcher
      bio: Jordan uncovers user insights that shape our product decisions and improve experiences.
      imageSource: /src/assets/images/component-library/profile5.jpg
      imageAlt: Jordan Martinez
---

Overview

Use Team Grid when you need to display multiple team members in a responsive grid layout. It automatically flows into columns based on screen size, keeping team member cards balanced and readable.

Properties

eyebrow string | default: Our team

Optional eyebrow text shown above the heading.

heading string | default: Meet the team

Main heading for the team grid.

subtext string | default: Get to know the people behind our work.

Supporting copy beneath the heading.

teamMembers array | default: array

Team member cards rendered in the grid.

Item Properties:

_component string | default: page-sections/people/team-grid/team-item

name string | default: Team member name

Full name of the team member.

role string | default: Job title

Job title or role of the team member.

bio string | default: Brief bio or description of the team member.

Brief biography or description of the team member.

imageSource string | default: /src/assets/images/component-library/profile.jpg

Photo of the team member.

imageAlt string | default: Team member photo

Alt text describing the team member photo.

colorScheme enum | default: inherit

Color scheme theme applied to the section wrapper.

Accepted values:

inherit
default
contrast

backgroundColor enum | default: base

Background color used behind the grid.

Accepted values:

none
base
surface
accent
highlight