Team Grid

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–6 of 44
Team Grid template preview
Team

Team Grid

Responsive · Animated
Team Carousel template preview
Team

Team Carousel

Responsive · Animated
Team With Hiring CTA template preview
Team

Team With Hiring CTA

Responsive · Animated
Icon Grid Features template preview
Features

Icon Grid Features

Responsive · Animated
Blog Post Cards template preview
Blog

Blog Post Cards

Responsive · Animated
Bento Grid Features template preview
Features

Bento Grid Features

Responsive · Animated

Team Grid — Free Website Section Template

Team · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryTeam
Tagsteamaboutpeoplegridcardssocial linkslight
Updated October 20, 2026

What's included

Features

Grid of member cards: photo, name, role and short bio
LinkedIn and X icons slide over the photo on hover
Icons always visible on touch screens
Up to 12 members: add, duplicate, reorder, remove
Upload photos or use illustrated placeholders
Four, three or two columns by width
SplitText heading and staggered card entrance
Export HTML, a ZIP, React or Vue

About this section

Team Grid — Free Meet the Team Section Template

Team Grid introduces the people behind your company: a centred heading and intro, then a grid of cards with each person's photo, name, role and a one-line bio. Hover a card and its photo zooms gently while LinkedIn and X icons slide up over it; on touch screens the icons are always visible.

People as a list

Add up to twelve team members, reorder them (founders first, or alphabetical) and duplicate a card to add the next person quickly. Leave a bio or social link empty and it disappears. Upload real photos, which are resized in your browser and kept on your device, or start with the illustrated placeholders.

Responsive grid

Four columns on desktop, three on small laptops and two on phones, using container queries so the grid fits wherever you place it. Photos are cropped to neat squares with your theme's corner radius.

Animated with GSAP

The heading reveals with a SplitText effect and the cards stagger in as the section scrolls into view, with reduced-motion support.

Export it

Download HTML, a ZIP with your photos, React or Vue, or fork into My Code. For a larger team, try the Team Carousel.

Team Grid: A “meet the team” grid: a centred heading, then cards with each person’s photo, name, role and a one-line bio. LinkedIn and X icons slide up over the photo on hover (and are always visible on touch screens). Add up to twelve people; the grid reflows from four columns to two.

Why use it

Why Use the Team Grid

🙂
Faces build trust
Seeing the real people behind a product makes a company feel approachable and credible.
🔗
Easy to connect
Social links on each card let partners and candidates reach the right person.
✦
Small delights
Photo zoom and sliding icons make browsing the team feel polished.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and team members in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏢
About page
Introduce founders and key team members with roles and a line about what each of them cares about.
🎨
Agency team page
Show the designers, developers and strategists clients will work with, with links to their profiles.
🚀
Startup homepage
Build trust with investors and early users by showing the small team behind the product.
🏫
School or course staff
Present instructors with their subjects and short bios so students know who will teach them.

Got questions?

Frequently Asked Questions

Up to twelve. The grid shows four per row on desktop and two on phones; for larger teams, the Team Carousel holds sixteen in one scrolling row.

The cards include LinkedIn and X. After exporting you can add more links in the same style, such as GitHub or Dribbble, using any SVG icon.

Square photos of at least 400×400 px. Uploads are resized in your browser and cropped to squares automatically.

Yes. On touch screens, where hover isn’t available, the icons are always visible on the photo.

It saves an editable copy of your Team Grid in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.