Bio Overlay
A responsive biography overlay for profile or team cards that opens on click, adapts to all screen sizes, supports scrolling on mobile, and includes gradient backdrops.
Make it with Workshop
Build your own component with AI
A responsive biography overlay for profile or team cards that opens on click, adapts to all screen sizes, supports scrolling on mobile, and includes gradient backdrops.
Make it with Workshop
Build your own component with AI
Add interactive biography popups to any profile or team card — responsive, scrollable, and beautifully animated. Now with full control over typography, so you can match your project’s design perfectly.
Place the component on top of your team member’s card (set Size → Fill)
Clicking the image, name, or title automatically opens the biography overlay
The overlay adjusts dynamically — clean, centered, and adaptive to every screen size
Works seamlessly on desktop, tablet, and mobile
Name – Person’s full name
Title – Their role or position
Image – Optional profile photo
Biography – The main text shown in the overlay (scrollable and supports line breaks)
Backdrop style – Choose between None, Subtle, Dark, or Gradient
Typography – Select title and body fonts directly from Framer’s font library
Max width – Control how wide the overlay appears on desktop
Edge fade – Adjust the smooth gradient fade on the backdrop
Fully responsive layout that adapts to every screen size
Auto-adjusting height on mobile (no more full-screen white backgrounds)
Scrollable biography with natural paragraph spacing 📱
Customizable title and body fonts using Framer’s font selector ✍️
Soft gradient or dark backdrop options 🌫️
ESC and click-outside to close
Automatically locks background scrolling
Clean, one-component setup — no coding required
Team or “About Us” sections
Speaker lists and contributors
Personal portfolios or author profiles
Any project where you want to add interactive storytelling effortlessly
