---
title: "Avatar_Hover_Card — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Vrny Studios · Buttons. Smooth expanding avatar profile card"
canonical: "https://framer.elliotli.dev/component/avatar-hover-card"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Avatar\_Hover\_Card

# Avatar\_Hover\_Card

Smooth expanding avatar profile card

[View on Framer](https://framer.com/marketplace/components/avatar-hover-card/?via=elliot-li)

![Avatar\_Hover\_Card preview image 1](https://framer.elliotli.dev/og/component/avatar-hover-card/a8248fb782e04301/1600x1200.jpg)

## Summary

Smooth expanding avatar profile card

## Description

The **Avatar Hover Card** is a sophisticated UI component designed to save screen real estate while providing rich user information on interaction. Initially appearing as a standard circular avatar, it smoothly expands into a full profile card when hovered, revealing text content and calls to action.

**Key Features:**

-   **Smart Hover Interaction:** Built with **Framer Motion**, the card uses physics-based spring transitions to expand and collapse naturally, ensuring a high-quality feel.
    
-   **Flexible Text Layers:** Instead of rigid "Name" and "Job" fields, this component uses a **Text Layer Array**. You can add as many lines of text as needed, reorder them, and style each line individually (Font, Color, Spacing) directly from the Framer sidebar.
    
-   **Dynamic Button System:** Add multiple action buttons (e.g., "Follow", "Message", "Portfolio"). Each button is fully customizable with its own link, background color, text color, and typography settings.
    
-   **Visual Variants:** Includes three built-in visual styles to match any brand:
    
    -   **Default:** Clean, white card with subtle shadows.
        
    -   **Glass:** A modern frosted glass effect with blur and transparency.
        
    -   **Bordered:** A flat, outlined style for minimalist designs.
        
-   **Responsive Sizing:** Comes with four preset sizes (SM, MD, LG, XL) that scale the avatar and the expanded card dimensions proportionally.
    

**How to Use:**

1.  Drag the component onto your canvas.
    
2.  **Image:** Upload a profile picture or use the default placeholder.
    
3.  **Text:** Use the "Text Content" array to add the user's name, handle, and bio. Customize the font weight and color for hierarchy.
    
4.  **Buttons:** Use the "Buttons" array to add links. You can style the primary action with a solid color and secondary actions with a lighter background.
    
5.  **Style:** Choose your Size and Variant to fit your layout.
    

Would you like me to create a "Grid" wrapper component so you can easily drop these into a team page layout?

## Rank history [How rankings work →](/terms#rankings)

-   All · #10323

## Details

- **Author**: Vrny Studios
- **Price**: $10.00
- **Published**: 2026-01-29
- **Updated**: 2026-01-29
- **Added**: 2026-01-17
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything