CMS Team Kit
FRAMER COMPONENT · CMS TEAM PAGES
Portraits, roles and contact links from a Collection List, with department filters, search and a profile panel that slides in. Grid, cards, a directory list or a carousel.
Live component. These 12 people are items of a Framer CMS collection, read through a Collection List. Filter, search, then click a name: the profile panel links to each person’s own page.
FROM YOUR CMS
Three steps, then it follows your collection.
Add a person in the CMS and they appear, in their department, with their links. No layer names to get right and no code.
01
Add a Collection List
Your Team collection, with its own order, filters and limit. A Department field feeds the filter buttons.
02
Put a Team Member inside
Connect the photo, name, role and department. Add a bio, email, phone, LinkedIn and the person’s page if you have them.
03
Pick a layout
Grid, cards, list or carousel, in your fonts and colours. Black and white, grouped by department, or both.
MAKE IT YOURS
Three looks from the same team.
Each one reads the same 12 people. Change the layout, the photos and what a click does.
Grouped by department, in black and white
A heading per department, five to a row, and a dark profile panel.
A directory for larger teams
Rows sorted A–Z, a search box and Load more after five.
Straight to the page
A click opens the person’s CMS page instead of the panel.
WHAT’S INSIDE
Built for real teams.
Responsive images with srcset and lazy loading, no network requests of its own, and every label ready for Localization.
Reads your Team collection
Department filters with counts
Search by name, role or city
A–Z
Filter in the address
Grid, cards, list and carousel
Group by department
Black and white, colour on hover
A second photo on hover
Profile panel
Email, phone, LinkedIn, X, Instagram
A link to each person’s page
Initials when there’s no photo
Screen reader friendly