Founding partnerArchitecture · Lisbon
CMS Team Kit · Documentation · Version 1.0
Your team page, straight from the CMS.
How to connect your Team collection, the four layouts, filters, search and the profile panel, every setting in the panel, and five looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Team Kit on a page. It arrives with a demo team of twelve so you can see it work.
Feed it your team. Set Source to CMS, add a Collection List of your Team collection on the same page and put a Team Member inside its item. The next sections show the steps.
Pick a layout. Grid, Cards, List or Carousel.
Choose what visitors can do. Department filters, search, A–Z and the profile panel. Then preview and click a name.
02
How it works.
The kit shows your whole team: portraits, names, roles, departments and contact links. Each Team Member hands one Collection List item to the kit.
Visitors filter by department, search by name, role or city, and open anyone’s profile in a panel that slides in.
The Collection List decides who reaches the kit and in what order: its own filters, sort and limit apply first.
Add a person in the CMS and they appear in the right department, with their links. Nothing to rebuild.
No API keys, no backend, no tracking. The component makes no network requests of its own. Only your photos load.
Live component with a demo team. With Source on CMS it reads the Team Members in your Collection List.
03
Connect your team, step by step.
Use a collection with a name per person. A photo, a role, a department (an Option field or plain text), a location, a bio, an email, a phone, social links and a page per person are all optional.
Add a Collection List anywhere on the same page, connected to it.
Put a Team Member inside its item and connect its fields: Photo, Name, Role, Department, Location, Bio, Email, Phone, LinkedIn, X or Instagram, Website and Page (the person’s own CMS page). For an Option field, keep Department and pick Display option when you connect it, so the button shows the option’s name.
Select the kit and set Source to CMS.
Use the same Kit name on the kit and on the Team Member. “team” is the default on both. With two kits on one page, give each its own name and its Team Member the matching one.
Preview. Everyone shows up once, in the list’s order.
On the published site, Team Members show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Team Member shows a small dashed label like “Team Member · Inès Laurent · Architecture”, so you can check it reads the right fields.
Good to know:
Leave the Collection List’s limit high enough to include everyone. The kit’s Load more works on what the list hands over.
Social links work with or without https://. “linkedin.com/in/name” is enough. LinkedIn, X and Instagram get their own icon; anything else gets a globe.
A phone number keeps the way you write it on screen, and the link dials the digits.
The Hover photo field is optional: a second portrait that fades in when the visitor points at the person.
With Source on Manual, add people in the panel instead. Use it for a page without a CMS.
04
Layouts
Portraits in Columns, with the name, role, department and location below, and small contact icons.
Each person on a card with the first lines of their bio and the contact icons at the bottom.
A directory, one row per person, with a round portrait and columns for department and location. On phones the row folds into two lines.
One row that scrolls sideways, with arrows that stop at both ends. Card width sets how wide each person is.
Group by department. A heading with the department’s name and its count, and its own block, for every department. It applies while no filter or search is on, so a result always reads as one list.
Different layout per breakpoint. Each breakpoint keeps its own settings. A common setup: 4 columns on Desktop, 3 on Tablet, 2 on Phone.
05
Photos
Portrait: 1:1, 4:5, 3:4 or 2:3. The face stays in frame: the photo is anchored near the top, or at the focal point you set in Framer.
Photos: Colour, Black and white, or B&W, colour on hover. Black and white makes portraits from different shoots look like one set. With colour on hover, the person under the pointer (or the keyboard focus) turns to colour. The profile panel shows them in colour unless Photos is Black and white.
Hover photo: people with a second photo show it when the visitor points at them.
Hover zoom: a slow, slight zoom on the portrait.
People without a photo show their initials on the Photo fill colour.
06
Filters, search and sort.
Filters: a button for each department, in the order they first appear, after an All button, with Counts like “Interiors 3”. Pressing the active button again goes back to All.
Filter in address: the address follows the department, like #team=interiors, so a filtered view can be shared. Opening that address applies it, and Back and Forward undo and redo it. With two kits on one page, give each its own Link name.
Search looks through name, role, department and location. Case and accents don’t matter: “lucia” finds “Lucía”. Every word must match.
Sort offers the list’s own order and A–Z by name. Start with sets the first choice, and also applies when the Sort menu is off.
Show first limits how many people show at once and adds a Load more button. It’s off while grouped by department.
On narrow screens the buttons stay on one row that scrolls sideways. When nothing matches, a message and a Clear filters button show.
07
Profile panel.
Click a name or a portrait and the person’s profile slides in from the side. On phones it fills the screen.
A large portrait, the name, role, department and location, the full bio and every contact link with its label.
View full profile goes to the person’s Page, when they have one.
The arrows move to the previous and next person within the current filter, with a counter like 2 / 3. The arrow keys do the same.
Escape, the close button or a click outside closes it. Focus stays inside while it’s open and goes back to the name you clicked. The page behind it doesn’t scroll.
Click: Open page skips the panel and goes straight to each person’s Page. Nothing makes the names plain text.
08
Customize the look.
Text
Name font, Name colour, Detail font and Detail colour for the role, department and location. Bio font and Bio colour for Cards and the panel. Group font for the department headings. Turn Role, Department, Location, Short bio and Contact links on or off.
Cards, lines and icons
Card fill for Cards. Lines colours the card borders, the list rows, the rings around the icons and the panel’s dividers. Icons colours the contact icons.
Buttons and fields
Button font, Button fill, Button text, Active fill, Active text and Button radius style the department buttons, Load more and Clear filters. Field border outlines the search, the sort menu and the carousel arrows. Pick your site’s colour styles so the kit follows your palette.
Panel
Panel fill, Panel text and Backdrop.
Recipes
Layout Grid · Columns 4 · Portrait 4:5 · Radius 12 · Photos B&W, colour on hover · Group off
Layout List · Filters on · Sort Start with A–Z · Show first 12 · Contact links on
Layout Cards · Columns 3 · Portrait 1:1 · Short bio on · Click Open page
Layout Carousel · Card width 280 · Portrait 3:4 · Filters off · Search off
Layout Grid · Columns 6 · Portrait 3:4 · Group by department on · Photos Black and white
09
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
CMS (Team Members with the same Kit name) or Manual.
CMS: the name shared with the Team Members.
Manual: Photo, Hover photo, Name, Role, Department, Location, Bio, Email, Phone, LinkedIn, X or Instagram, Website, Page and Alt text. Up to 60.
Layout
Layout — Grid, Cards, List or Carousel.
Columns — 1 to 6, for Grid and Cards.
Card width — Carousel.
Portrait — 1:1, 4:5, 3:4 or 2:3.
Radius, Gap.
Group by dept. — a heading and block per department.
Photos
Photos — Colour, Black and white, or B&W, colour on hover.
Hover photo, Hover zoom, Photo fill.
Text
Role, Department, Location, Short bio, Contact links — show them.
Name font, Name, Detail font, Detail, Bio font, Bio, Group font.
Card fill, Lines, Icons.
Filters
Filters — a button for each department.
Counts, Align.
Button font, Button fill, Button text, Active fill, Active text, Button radius.
Search and sort
Search — a search field.
Sort — the sort menu. Start with — its first choice.
Field border.
Results
0 shows everyone; any other number adds Load more.
The address follows the department. Link name — the word in #team=interiors.
Click and panel
Click — Profile panel, Open page or Nothing.
Panel fill, Panel text, Backdrop.
Focus ring — the keyboard focus colour.
Labels
Team label — what screen readers call the section, like Our team.
Filter label, All label, Search label, Sort label, List order label, A–Z label, Load more label.
Result label — screen readers hear it after every change. {count} is the number of people.
Empty text, Clear label, Open label, Close label, Previous label, Next label, Page label, Email label, Phone label, Website label.
All of them are translated by Framer Localization.
Team Member
Kit name, Photo, Hover photo, Name, Role, Department, Location, Bio, Email, Phone, LinkedIn, X or Instagram, Website, Page, Alt text.
10
Performance
No network requests of its own, no scripts from other sites, no tracking.
Every portrait uses Framer’s srcSet with a sizes value worked out from the real width of each column, so the browser downloads the right file.
The first row loads right away. Every other portrait is lazy loaded.
Filtering, search and sort run in the browser on what the page already has. Nothing is fetched again.
On the canvas and in Framer’s static previews, it renders still: no animation.
11
Accessibility
Each person is an article with a real button or link on their name. The whole card is clickable, and the contact links inside it stay separate.
Every contact icon has a label with the person’s name, like “Email: ines@studio.com, Inès Laurent”.
The department buttons are real toggle buttons in a labelled group, and screen readers hear which one is pressed.
After every change, screen readers hear how many people are left, like “3 people”.
The panel is a dialog named after the person. It traps focus, closes with Escape and gives focus back.
Visitors who prefer reduced motion get no entrance animation and no zoom.
On touch screens the search field uses 16 px text, so iPhone doesn’t zoom in when you tap it.
12
Troubleshooting
Source is Manual. Set it to CMS.
No Team Member uses the kit’s Kit name, or the Team Members have no name or photo connected.
The Collection List’s own filter or limit leaves them out. Raise the limit.
The Option field was connected without Display option. Connect Department again and pick it.
Fewer than two departments. Connect Department, or turn Filters off.
The email has no @, the phone has fewer than five digits, or the link isn’t a web address. Other kinds of link are ignored for safety.
Set its gap and padding to 0.
Leave an empty line between paragraphs in the CMS field.
13
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
1.0 · October 2026 — First release: Grid, Cards, List and Carousel, Team Members for any CMS collection, department filters with counts and the address, search, A–Z, Load more, group by department, black and white with colour on hover, a hover photo, a profile panel with contact links and a link to each person’s page, and full documentation.
14
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one website or project, the same Single-Use licence as Framer’s Marketplace. For several sites, buy one licence per site. Reselling or redistributing the component isn’t allowed.
The demo team is made up and the portraits are samples. Replace them with your own team before you publish.