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 NameProp TypeRequiredDefault classNamestring 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 NameProp TypeRequiredDefault classNamestring 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: