Team Cards Widget
Introduce the people behind your practice, salon or agency: a grid, list or compact layout of staff cards with photo, job title, a two-line bio and an Email, LinkedIn or Profile button, optionally split into departments such as Clinical team and Front desk.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/team-cards" title="Team Cards by A2Z Tools" width="100%" height="826" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="team-cards" data-height="826"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Each person is one line with five columns separated by a vertical bar: name, role, short bio, photo address and an optional link. A line starting with ## opens a department, so a dental practice can show Dentists, Hygienists and Reception as separate groups with their own headings. Photos must be https images; when a photo is missing, refused or fails to load, a round monogram takes its place, built from the first and last word of the name with honorifics such as Dr., Mrs or Prof skipped, so Dr. Maya Okafor becomes MO. The monogram tint is picked from six soft colours by a small hash of the name, so it stays the same on every visit. The link column decides the button: a plain address such as [email protected] or a mailto: link gives Email Maya, a linkedin.com URL gives LinkedIn, and any other https page gives Profile. Bios are capped at 280 characters and at most 120 people are shown. Grid lays cards in two columns from about 420 px, list puts the photo beside the text, and compact drops the bio for a dense directory.
Method
- Line: name | role | bio (max 280 chars) | https photo | link ; "## Department" starts a group
- Initials = first letter of the first and last word, honorifics (Dr, Mr, Mrs, Ms, Mx, Miss, Prof, Sir, Dame, Rev) skipped; '?' when nothing is left
- Avatar tint = (31-based rolling hash of the name mod 9973) mod 6 - decoration only, the name is always written
- Link: bare email or mailto: -> Email button; host linkedin.com -> LinkedIn; other https/http -> Profile; anything else dropped
- Layouts: grid = auto-fill columns of at least 190 px; list = 2-column row; compact = name and role only
Worked examples
Monogram for a titled name
Inputs: Dr. Maya Okafor | Lead Physiotherapist | ... | (no photo) | [email protected]
Result: Avatar MO; button Email Maya -> mailto:[email protected]
The title Dr. is skipped, so the initials come from Maya and Okafor.
LinkedIn profile
Inputs: Tom Lindqvist | Physiotherapist | ... | | https://www.linkedin.com/in/example
Result: Button LinkedIn, opens https://www.linkedin.com/in/example in a new tab
The host linkedin.com picks the LinkedIn label and icon.
Unsafe photo and link
Inputs: Ana | Nurse | | http://insecure.example/a.jpg | javascript:alert(1)
Result: Monogram A, no button; preview note: 1 line changed or skipped
Only https photos and https/mailto links are accepted.
Limitations
- Photos are loaded from wherever you host them; A2Z does not resize or cache them, so very large files slow the page.
- One link per person; a second contact method needs to go in the bio as plain text.
- No sorting or search - people appear in the order you type them, which suits teams of up to a few dozen.
Where publishers use it
- A physiotherapy or dental clinic's Our team page where patients want to see who will treat them
- An estate agency or law firm listing partners and associates with LinkedIn buttons
- A hair salon or barber shop showing each stylist with a booking email link
- A small school, nursery or charity introducing staff and trustees by department
- A startup About page on Webflow, Wix or Squarespace that needs a tidy people grid without a plugin
Questions
What size should staff photos be?
Square images of at least 192 x 192 pixels look sharp on high-density screens - the grid avatar is 84 px across, the list one 64 px and the compact one 44 px. Crop faces to the centre: the photo fills a circle with object-fit: cover, so the corners are cut off. The address must start with https://; an http or data: address is ignored and the monogram is shown instead.
How do I split the team into departments?
Put a heading line starting with two hashes and a space before each group, for example "## Clinical team" and later "## Front desk". Every person after a heading belongs to that group until the next heading. People listed before any heading form an unnamed first group.
Which link types become buttons?
Three kinds. An email address ([email protected] or mailto:[email protected]) becomes Email followed by the first name, opening the visitor's mail app. A linkedin.com address becomes LinkedIn. Any other https page, such as a bio page on your own site, becomes Profile. LinkedIn and Profile open in a new tab with rel=noopener; anything else - javascript:, a phone number, plain text - is dropped and listed in the builder preview.
Should I publish staff email addresses?
Only role or work addresses your staff have agreed to share. Under UK and EU data-protection law a work email of a named person is still personal data, so many practices use one shared address such as reception@ or link to a contact page instead. Leaving the link column empty simply shows no button.
Does the widget add Person schema for search engines?
No. Structured data inside an iframe is credited to the frame, not your page, so it would not help. If you want Person or Physician markup, add JSON-LD to your own team page template and keep the names identical to the cards.
How many people can it show, and how tall is it?
Up to 120. With the four-person sample the grid is about 826 px tall at 480 px wide; each extra row of two cards adds roughly 290 px, a list row about 160 px and a compact row about 70 px. Add the optional loader script so the frame height follows the content automatically.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Team Cards https://a2z.tools/embed/team-cards
<a href="https://a2z.tools/embed/team-cards">A2Z Tools Team Cards</a>
[A2Z Tools Team Cards](https://a2z.tools/embed/team-cards)
Team Cards by A2Z Tools - https://a2z.tools/embed/team-cards
Related widgets
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
Customer quotes as cards, a featured quote, a list or a manual slider, with stars and initials avatars.
-
A 'Trusted by' grid of client logos with text fallbacks, grayscale-to-colour and an optional pausable row.
-
Up to 12 social profile links recognised by host name, as icons, labels or buttons.
-
A giving card with suggested amounts, an optional monthly switch and a Donate link to your own page.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.