→ Anonymous
→ Modern Flexible User Profile Card

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.

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

Profile Card Social Media User Interface Flexbox

Author Anonymous

Fork Fullscreen

<div class="profile-container">
  <div class="profile-card">
    <div class="profile-header">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture">
      </div>
      <div class="profile-info">
        <h2>Alex Morgan</h2>
        <span class="username">@alex_designpro</span>
        <p class="bio">UI/UX Designer & Front-end Developer passionate about creating intuitive, beautiful interfaces.</p>
      </div>
    </div>
    <div class="stats-container">
      <div class="stat-item">
        <span class="stat-value">125</span>
        <span class="stat-label">Posts</span>
      </div>
      <div class="stat-item">
        <span class="stat-value">15.3K</span>
        <span class="stat-label">Followers</span>
      </div>
      <div class="stat-item">
        <span class="stat-value">284</span>
        <span class="stat-label">Following</span>
      </div>
    </div>
    <div class="action-buttons">
      <button class="follow-btn">Follow</button>
      <button class="message-btn">Message</button>
    </div>
    <div class="additional-info">
      <div class="info-item">
        <span class="info-icon">📍</span>
        <span class="info-text">San Francisco, CA</span>
      </div>
      <div class="info-item">
        <span class="info-icon">🔗</span>
        <span class="info-text">alexdesign.co</span>
      </div>
      <div class="info-item">
        <span class="info-icon">🏢</span>
        <span class="info-text">Design Lead at CreativeStudio</span>
      </div>
    </div>
  </div>
</div>

Related Examples