→ Anonymous
→ Profile Information Card

Profile Information Card

This Example is contributed by Anonymous, on 20-Mar-2025. It is responsive. similar terms for this example are Profile Cards,User Profile,Profile,Author box,User information

Profile Card Social Media

Author Anonymous

Fork Fullscreen

<div class="card">
  <div class="card-header">
    <div class="avatar">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Image">
    </div>
    <div class="banner"></div>
  </div>
  <div class="card-body">
    <div class="user-info">
      <h2>Sophia Reynolds</h2>
      <h3>@sophia_designs</h3>
      <p class="bio">UI/UX Designer & Frontend Developer based in San Francisco. Creating beautiful digital experiences since 2018.</p>
    </div>
    <div class="stats">
      <div class="stat">
        <span class="stat-value">254</span>
        <span class="stat-label">Posts</span>
      </div>
      <div class="stat">
        <span class="stat-value">12.4k</span>
        <span class="stat-label">Followers</span>
      </div>
      <div class="stat">
        <span class="stat-value">846</span>
        <span class="stat-label">Following</span>
      </div>
    </div>
    <div class="user-details">
      <div class="detail">
        <i class="fas fa-envelope"></i>
        <span>sophia.reynolds@example.com</span>
      </div>
      <div class="detail">
        <i class="fas fa-map-marker-alt"></i>
        <span>San Francisco, CA</span>
      </div>
    </div>
    <div class="social-links">
      <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
      <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
      <a href="#" class="social-link"><i class="fab fa-dribbble"></i></a>
      <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
    </div>
    <button class="action-btn">Follow</button>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

Related Examples

Personal Profile Card with Social Media Links

Author:
Anonymous

1 month ago
User Profile Card

Author:
Anonymous

1 month ago
User Info Card

Author:
Emma Thompson

2 months ago
Profile Card with Social Media Links

Author:
Anonymous

1 month ago
Elegant Profile Hover Card with Animation Effects
A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

Author:
Maya Johnson

1 month ago
Modern Flexible User Profile Card
A clean and flexible user profile card with avatar, user information, and social stats designed with a modern aesthetic and responsive layout.

Author:
Anonymous

1 month ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

2 months ago
Modern User Profile Card with Animated Stats

Author:
Emma Thompson

2 months ago
Vibrant Neon Gradient Profile Card
Stunning neon gradient card with glowing edges and a sleek information section, perfect for showcasing user profiles or product details with a futuristic cyberpunk aesthetic.

Author:
Alexis Rivera

1 month ago
Profile Card
A beautifully designed profile card featuring smooth gradient animations and social media integration for modern web applications

Author:
Emma Thompson

2 months ago
User Profile Card
A sleek and modern profile card featuring glass morphism effects, subtle gradients, and smooth hover animations for enhanced user interaction.

Author:
Emma Thompson

2 months ago
Floating Social Media Profile Card
A beautifully designed profile card featuring smooth gradient backgrounds, hover animations, and social media integration

Author:
Emma Thompson

2 months ago

Didn't find component you were looking for?

Search from 500+ components