You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewTeam Member Card Grid — Free HTML CSS Responsive About Page Snippet
Team Member Card Grid · Cards · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Team Member Card Grid — HTML & CSS About Page Snippet
Every "About" or "Team" page needs a way to show who's behind the company, but real headshot photography isn't always available at build time — especially for placeholders, prototypes, or early-stage products. A colored circular avatar with the person's initials is a clean, widely-used substitute that requires zero image assets.
This snippet builds a fully responsive team grid in plain HTML and CSS, with no JavaScript needed for the static version.
How the initials avatar works
Each .avatar div is just a fixed-size circle (border-radius: 50%) with flexbox centering its text content — the person's two initials, set directly in the HTML. The background color is set inline per card via style="background: #6366f1" (or any hex value), giving each team member a distinct, recognizable color without needing a photo. Swapping in a real <img> later is a drop-in replacement: just replace the avatar div's content and background with an image tag sized to the same 64px circle.
How the responsive grid works
The grid container uses grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)). auto-fit tells the grid to fit as many 180px-or-wider columns as will comfortably fit in the available width, and 1fr lets those columns stretch to fill any remaining space evenly. This single line handles every screen size — four columns on a wide desktop, two on a tablet, one on a narrow phone — with no media queries needed at all.
The hover lift effect
Each card lifts slightly (translateY(-4px)) and gains a deeper shadow on :hover, a small bit of tactile feedback that also subtly implies the card is interactive (useful if you later make the card link to a full bio page).
The social icon row
Each card ends with a row of small circular icon links using inline SVG logos (LinkedIn, Twitter, GitHub, Dribbble) — no icon font or external request. Hovering an icon fills its circle with the brand accent color, and every link carries an aria-label describing which platform it goes to, since the icon alone isn't machine-readable text.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Give this snippet's HTML and CSS to an AI coding assistant like Claude and ask it to explain exactly how repeat(auto-fit, minmax(180px, 1fr)) decides how many columns to render at a given viewport width, and how that differs from the similar-looking auto-fill keyword, since the choice between the two matters once you have fewer team members than would fill a row. It's also worth asking the assistant to help you template this card structure from your actual data source — describe your CMS schema or API response shape for team members and ask it to generate the JavaScript template function that maps your real data onto this exact markup, including a sensible way to pick each avatar's background color deterministically from the person's name.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a responsive grid of team member cards in plain HTML and CSS — no JavaScript required for the static version, no external avatar image service.
Requirements:
- A CSS grid container using repeat(auto-fit, minmax(<min-width>, 1fr)) for grid-template-columns so the layout reflows from multiple columns on desktop down to a single column on mobile with no media queries at all.
- Each card contains a circular colored avatar showing the person's initials as text (no image file), a name, a role/title, and a row of small circular social icon links using inline SVG logos (at least two different platforms across the set of cards).
- Each avatar's background color must be set independently per card so the grid has visual variety even though every card shares the same layout structure.
- Every icon-only social link must have a descriptive aria-label since the SVG icon alone conveys no accessible text.
- Add a hover state on each card that lifts it slightly and deepens its shadow, to suggest the card could be interactive (e.g. link to a full bio).
- The markup structure for one card must be simple and repeatable enough that it could be trivially generated from a CMS collection or API response by a small template function.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Load the snippetClick "Team Member Card Grid" in the sidebar Library tab to see four team cards laid out in a responsive grid.
- 2Resize the previewSwitch between Desktop, Tablet, and Mobile device previews to see the grid reflow from four columns down to one with no extra CSS.
- 3Add a team memberIn the HTML panel, copy an existing .member-card block, update the initials, name, role, and background color, and add or remove social links.
- 4Swap in real photosReplace an .avatar div's text content and background with an <img> tag sized to fill the same 64px circle for a real headshot.
- 5Adjust the grid densityIn the CSS panel, change the minmax(180px, 1fr) value to control the minimum card width before the grid wraps to fewer columns.
- 6Export in your formatClick "HTML" for a standalone file, "JSX" for React, or "Tailwind" for React + Tailwind CSS.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Each avatar is a plain div styled as a circle with flexbox centering, displaying the person's initials as text, with a background color set per card. No image file, canvas, or generation library is involved.
The grid-template-columns value is repeat(auto-fit, minmax(180px, 1fr)) — this tells the browser to fit as many columns of at least 180px as the available width allows, stretching them evenly to fill any leftover space, automatically producing fewer columns on narrower screens.
Replace the avatar div's text content and remove its background color, then add an img tag inside it sized to fill the same width and height (64px by default) with object-fit: cover and the same border-radius: 50% to keep it circular.
Yes. Add another anchor tag inside the .socials div with its own inline SVG icon and a descriptive aria-label — the flex layout accommodates any number of icons per card.
Adjust the minmax(180px, 1fr) minimum width value — a larger minimum (e.g. 220px) results in fewer, wider columns fitting per row; a smaller minimum allows more columns to fit.
The structure uses semantic headings for names and paragraph text for roles, and every icon-only social link has an aria-label describing its destination platform, so screen readers announce meaningful information rather than just "link."
Yes. Wrap the card's content in an anchor tag (keeping the nested social links as separate, stoppable click targets using event.stopPropagation() in JavaScript if needed) or make the name itself a link to the bio page.
Write a small template function that takes a member object (name, role, initials, color, social links) and returns the same card markup structure, then map it over your CMS collection or API response to render the full grid dynamically.