Back to site

Team Grid

Grid of team members; select which members to show and in what order.

Our team

Meet the team

Get to know the people behind our work. 

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

Optional label or category above the heading (e.g. OUR TEAM)

heading string

Section heading (e.g. Trusted leaders strengthening the U.S. industrial base)

subtext string

Optional intro paragraph

backgroundColor enum | default: white

Section background

Accepted values:
  • white
  • light
  • dark

showBoardRole boolean | default: false

Show board role beneath member name instead of primary role

members string | default: array

Select team members to display (order is preserved).