webdevpuneet.com

Team Grid

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

Related Section Templates

4 sectionsView all →
Team

Team Grid

Responsive · Animated
Team

Interactive Team Accordion

Responsive · Animated
Team

Team Carousel

Responsive · Animated
Team

Team With Hiring CTA

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

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

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

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.

Getting the most from it

Use photos with the same framing and background so the grid looks uniform, and write each bio as one line about what the person does for the customer, not a job title alone. Keep the list to the people customers actually meet: a grid of four to eight is easy to scan. Link each person to a profile, LinkedIn page or contact page, and refresh the photos once a year. For a large team, show the leadership here and link to a full directory.

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.

In real websites

Website Templates That Use the Team Grid Section

The Team Grid section is part of 6 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Real Estate Agency Website, Gym & Fitness Website, Dental Clinic Website, Nonprofit & Charity Website, School Website, Church Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

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. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.