Skip to content

Team Sections

Introduce team members with photos and roles.

3 component(s)

Team Cards with Hover Info – Bootstrap 5 team sections preview

Team Cards with Hover Info

Bootstrap 5 team section with portrait cards that reveal a bio and social links on hover or keyboard focus. Pure CSS, no JavaScript.

Bootstrap 5 Team Sections
Team Grid – Tailwind CSS team sections preview

Team Grid

Dark Tailwind CSS team section with portrait photos, roles, short bios, accessible social links and a hiring card.

Tailwind CSS Team Sections

What is a team section?

A team section introduces the people behind a company, project or organisation. Each member is usually shown with a photo, name and role, often with a short bio and links to social profiles. Typical layouts are photo grids, cards with hover overlays, compact lists and featured leadership rows. Team sections are used on about pages, agency sites, startup landing pages and event pages for speakers.

When to use a team section

Add one when the people are part of the value: agencies, consultancies, clinics, law firms and small businesses benefit most. For large organisations, show leadership or department heads and link to a full team page.

Best practices

  • Use consistent photo crops and aspect ratios; object-fit: cover keeps portraits aligned.
  • Write alt text with the person's name, or leave it empty when the name is shown directly below.
  • Use a heading element for each name and a paragraph for the role so the structure is clear.
  • Do not hide important information only behind hover effects; touch users cannot hover. Make overlays also appear on focus.
  • Give social icon links an accessible name such as aria-label="Anna on LinkedIn".
  • Reduce columns on small screens, from four to two to one, and keep tap targets large.
  • Serve appropriately sized images and lazy-load photos further down the page.

Bootstrap, Tailwind CSS and pure CSS versions

The team section examples are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the grid, cards and image utilities, and Bootstrap 6 variants adopt the theme-* colour roles for accents and overlays. Tailwind CSS versions use only utility classes, and pure CSS versions rely on CSS Grid with custom properties for spacing and colour. Filter by framework, review each layout in the live preview, and copy the HTML and CSS from the code tabs or download the snippet. Replace the placeholder photos, names and roles and you have a responsive team grid for your about page.