Team Carousel is a responsive Framer component for showcasing people with interactive profile cards, centered navigation, portrait images, role tags, descriptions, CTA buttons, drag support, arrows, and keyboard control.
–––––––––––––––––––––––––––
This component works especially well for:
team sections
agency websites
studio portfolios
startup landing pages
about pages
founder showcases
employee profiles
speaker lineups
creator teams
advisory boards
Perfect when you want to present people in a more visual, interactive, and premium way than a static team grid.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
team member portraits
member names
member descriptions
role / category tags
button label
card background
page background
text color
tag background
tag text color
button background
button text color
name font
description font
tag font
button font
border radius
card shadow
card gap
section padding
image margin
desktop card width
desktop card height
arrow size
arrow background
arrow icon color
Built to work as a polished team section out of the box, while still being flexible enough for different brands, portfolios, and visual styles.
–––––––––––––––––––––––––––
Desktop: Large profile cards with strong visual focus and centered active navigation.
Tablet: Card width and height scale down slightly for balanced medium-size layouts.
Mobile: Cards become smaller and more touch-friendly while keeping the same focused profile interaction.
The component automatically adapts its card size based on the available container width.
–––––––––––––––––––––––––––
Centered active card: One team member card stays focused in the center of the carousel.
Portrait-first design: Inactive cards show large portrait images for a strong visual overview.
Profile reveal state: The active card transforms into a profile card with name, description, tag, and button.
Smooth card emphasis: The active card subtly scales up and lifts forward while inactive cards stay slightly reduced.
Clean premium card style: Rounded corners, soft shadows, image spacing, and minimal content create a polished editorial look.
–––––––––––––––––––––––––––
Drag navigation: Users can drag or swipe through the team cards naturally.
Arrow controls: Previous and next buttons are included for direct navigation.
Keyboard support: The carousel supports left and right arrow key navigation.
Click-to-focus behavior: Clicking any card brings that member into the active center position.
Animated image transition: The portrait image smoothly resizes when a card becomes active.
CTA button: Each active card includes a customizable button label for profile or detail actions.
–––––––––––––––––––––––––––
moritz strobel
