Editorial Team Grid

Editorial Team Grid is a refined team showcase designed to present people through bold duotone portraits and subtle interactive effects. Each team member appears in a responsive editorial grid with a custom two-tone image treatment that transitions into a focused bloom or lens effect on hover. Tags, roles, profile links, and social icons add useful context without taking away from the visual presentation.

Use Cases

Ideal for agency team pages, creative studios, design teams, SaaS companies, startup websites, leadership pages, consulting firms, corporate websites, portfolios, about pages, and recruiting sections.

Features

• Editorial grid layout with configurable columns

• Responsive desktop, tablet, and mobile layouts

• Duotone portrait treatment with customizable shadow and highlight colors

• Interactive Bloom or Lens reveal effects

• Adjustable lens size and edge softness

• Hover zoom with configurable intensity

• Focused portrait interaction with optional dimming of other members

• Team tags displayed as animated chips

• Member name and role typography controls

• Profile links with animated arrow interactions

• Up to four social links per team member

• Instagram, LinkedIn, X, GitHub, Dribbble, Email, and Website icons

• Custom image focus positioning

• Adjustable image ratio, card radius, horizontal gap, and vertical gap

• Scroll reveal animation with customizable duration and stagger

• Reduced-motion support for accessibility

• Keyboard and focus interactions

• Responsive image loading and optimized rendering

• Static renderer support for reliable Framer exports

• Framer Property Controls for easy customization

• No code required

Why You’ll Love It

Editorial Team Grid combines an editorial visual style with a distinctive duotone interaction that makes team sections feel more dynamic without becoming distracting. Customize the colors, layout, typography, reveal behavior, imagery, tags, and social links directly in Framer to create a team section that fits your brand.