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.

–––––––––––––––––––––––––––

Use Cases

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.

–––––––––––––––––––––––––––

Customization

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.

–––––––––––––––––––––––––––

Responsive behavior

• 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.

–––––––––––––––––––––––––––

Visual & layout

• 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.

–––––––––––––––––––––––––––

Interaction

• 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.

–––––––––––––––––––––––––––

Preview / Functionality

https://teammembercarousel.framer.website/