Team Section
- Updated on
The Team Section component provides a beautiful and customizable way to showcase your team members on a landing page. It supports both array-based and component-based approaches, giving you flexibility in how you structure your code.
Meet Our Team
Our team is a tight-knit family of developers and visionaries, all bound by the same passion and enthusiasm.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
Usage
import { LandingTeamSection } from '@/components/landing/team/LandingTeamSection';
<LandingTeamSection
title="Meet Our Team"
description="Our team is a tight-knit family of developers and visionaries, all bound by the same passion and enthusiasm."
members={[
{ name: "Lee Rob", role: "CEO & Founder", imageSrc: "/static/images/people/11.webp" },
{ name: "David Chen", role: "CTO", imageSrc: "/static/images/people/2.webp" },
{ name: "Alex Rivera", role: "Lead Designer", imageSrc: "/static/images/people/12.webp" }
]}
/>
Examples
Centered Text Layout
Our Amazing Team
Meet the talented individuals behind our success.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
Secondary Variant
Development Team
The talented engineers that build our product.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
Custom Team Member Styling
Our Team
Meet the people who make it all happen.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
With Background
Meet Our Experts
The talented professionals who make everything possible.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
With Background Glow
Meet Our Experts
The talented professionals who make everything possible.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
Component-based Usage
Alternatively, you can use individual LandingTeamMember components as children:
Leadership Team
Meet the people driving our vision forward.
Lee Rob
CEO & Founder
David Chen
CTO
Alex Rivera
Lead Designer
API Reference
LandingTeamSection
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| className | string | No | - |
| innerClassName | string | No | - |
| title | string | No | 'Our Members' |
| titleComponent | React.ReactNode | No | - |
| description | string | React.ReactNode | No | 'Our team is a tight-knit family of developers and visionaries, all bound by the same passion and enthusiasm.' |
| descriptionComponent | React.ReactNode | No | - |
| members | TeamMember[] | No | [] |
| textPosition | 'center' | 'left' | No | 'left' |
| withBackground | boolean | No | false |
| withBackgroundGlow | boolean | No | false |
| variant | 'primary' | 'secondary' | No | 'primary' |
| backgroundGlowVariant | 'primary' | 'secondary' | No | 'primary' |
| children | React.ReactNode | No | - |
LandingTeamMember
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| className | string | No | - |
| member | TeamMember | Yes | - |
| imageClassName | string | No | - |
TeamMember Interface
export interface TeamMember {
name: string;
role: string;
imageSrc: string;
}
More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.
Also see: