Employee Card

HR employee profile cards with avatar, status indicator, department badge, contact info, and action buttons.

Basic Employee Card

Preview

Ana Martinez

Senior Developer Engineering

<div class="employee-card" style="max-width: 260px;">
  <div class="employee-card-avatar employee-card-avatar-primary">
    <span class="employee-card-status employee-card-status-available employee-card-status-pulse"></span>
    AM
  </div>
  <div class="employee-card-info">
    <h3 class="employee-card-name">Ana Martinez</h3>
    <span class="employee-card-title">Senior Developer</span>
    <span class="employee-card-department employee-card-department-engineering">Engineering</span>
  </div>
  <div class="employee-card-contact">
    <a href="mailto:ana@erplora.com" class="employee-card-contact-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
      <span class="employee-card-contact-text">ana@erplora.com</span>
    </a>
    <a href="tel:+34600111222" class="employee-card-contact-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
      <span class="employee-card-contact-text">+34 600 111 222</span>
    </a>
  </div>
  <div class="employee-card-actions">
    <button class="employee-card-action employee-card-action-call">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
    </button>
    <button class="employee-card-action employee-card-action-email">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
    </button>
    <button class="employee-card-action employee-card-action-chat">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center text-center gap-2 p-4 bg-base-100 border border-base-300 rounded-box max-w-65 hover:shadow-md transition">
  <div class="relative w-16 h-16 rounded-full bg-primary text-primary-content flex items-center justify-center font-semibold text-xl uppercase shrink-0">
    AM
    <span class="absolute bottom-0.5 right-0.5 w-3.5 h-3.5 rounded-full bg-success border-2 border-base-100 animate-pulse"></span>
  </div>
  <div class="flex flex-col min-w-0 w-full gap-0.5">
    <h3 class="font-semibold text-base truncate m-0">Ana Martinez</h3>
    <span class="text-sm text-base-content/60 truncate">Senior Developer</span>
    <span class="inline-flex items-center justify-center text-xs font-medium px-2 py-0.5 rounded-full mt-1 bg-info/10 text-info self-center">Engineering</span>
  </div>
  <div class="flex flex-col w-full gap-1 mt-1 pt-2 border-t border-base-300">
    <a href="#" class="flex items-center gap-1 text-sm text-base-content/60 no-underline hover:text-primary">
      <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
      <span class="truncate">ana@erplora.com</span>
    </a>
  </div>
  <div class="flex justify-center gap-1 mt-2">
    <button class="w-9 h-9 rounded-full border border-base-300 bg-base-100 text-base-content/60 flex items-center justify-center hover:bg-success hover:border-success hover:text-white transition">Ph</button>
    <button class="w-9 h-9 rounded-full border border-base-300 bg-base-100 text-base-content/60 flex items-center justify-center hover:bg-primary hover:border-primary hover:text-white transition">Em</button>
    <button class="w-9 h-9 rounded-full border border-base-300 bg-base-100 text-base-content/60 flex items-center justify-center hover:bg-accent hover:border-accent hover:text-white transition">Ch</button>
  </div>
</div>

Requires: tw.min.css

// Toggle card selection
document.querySelectorAll('.employee-card-clickable').forEach(card => {
  card.addEventListener('click', () => {
    card.classList.toggle('employee-card-selected');
  });
});

Horizontal Variant

Preview

Carlos Ruiz

Product Designer Design

carlos@erplora.com +34 600 333 444

<div class="employee-card employee-card-horizontal" style="max-width: 420px;">
  <div class="employee-card-avatar employee-card-avatar-accent">
    <span class="employee-card-status employee-card-status-busy"></span>
    CR
  </div>
  <div class="employee-card-info">
    <h3 class="employee-card-name">Carlos Ruiz</h3>
    <span class="employee-card-title">Product Designer</span>
    <span class="employee-card-department employee-card-department-design">Design</span>
    <div class="employee-card-contact">
      <a href="mailto:carlos@erplora.com" class="employee-card-contact-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        <span class="employee-card-contact-text">carlos@erplora.com</span>
      </a>
      <a href="tel:+34600333444" class="employee-card-contact-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
        <span class="employee-card-contact-text">+34 600 333 444</span>
      </a>
    </div>
  </div>
  <div class="employee-card-actions">
    <button class="employee-card-action employee-card-action-call">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
    </button>
    <button class="employee-card-action employee-card-action-email">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-row items-start gap-2 p-4 bg-base-100 border border-base-300 rounded-box max-w-md hover:shadow-md transition">
  <div class="relative w-16 h-16 rounded-full bg-accent text-accent-content flex items-center justify-center font-semibold text-xl uppercase shrink-0">
    CR
    <span class="absolute bottom-0.5 right-0.5 w-3.5 h-3.5 rounded-full bg-error border-2 border-base-100"></span>
  </div>
  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
    <h3 class="font-semibold text-base truncate m-0">Carlos Ruiz</h3>
    <span class="text-sm text-base-content/60 truncate">Product Designer</span>
    <span class="inline-flex items-center text-xs font-medium px-2 py-0.5 rounded-full mt-1 bg-purple-100 text-purple-700 self-start">Design</span>
    <div class="flex flex-row flex-wrap gap-1 mt-2">
      <a href="#" class="flex items-center gap-1 text-sm text-base-content/60 no-underline hover:text-primary">carlos@erplora.com</a>
    </div>
  </div>
  <div class="flex flex-col gap-1 ml-4">
    <button class="w-9 h-9 rounded-full border border-base-300 bg-base-100 text-base-content/60 flex items-center justify-center hover:bg-success hover:border-success hover:text-white transition">Ph</button>
    <button class="w-9 h-9 rounded-full border border-base-300 bg-base-100 text-base-content/60 flex items-center justify-center hover:bg-primary hover:border-primary hover:text-white transition">Em</button>
  </div>
</div>

Requires: tw.min.css

// No JS needed — horizontal is a CSS-only layout variant

Employee Grid

Preview

Ana Martinez

Senior Developer Engineering

Carlos Ruiz

Product Designer Design

Laura Garcia

Sales Manager Sales

Pedro Lopez

HR Specialist HR

Maria Fernandez

Financial Analyst Finance

Juan Sanchez

Marketing Lead Marketing

<div class="employee-grid employee-grid-3">
  <div class="employee-card employee-card-clickable">
    <div class="employee-card-avatar employee-card-avatar-primary">
      <span class="employee-card-status employee-card-status-available employee-card-status-pulse"></span>
      AM
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Ana Martinez</h3>
      <span class="employee-card-title">Senior Developer</span>
      <span class="employee-card-department employee-card-department-engineering">Engineering</span>
    </div>
  </div>

  <div class="employee-card employee-card-clickable">
    <div class="employee-card-avatar employee-card-avatar-accent">
      <span class="employee-card-status employee-card-status-busy"></span>
      CR
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Carlos Ruiz</h3>
      <span class="employee-card-title">Product Designer</span>
      <span class="employee-card-department employee-card-department-design">Design</span>
    </div>
  </div>

  <div class="employee-card employee-card-clickable employee-card-selected">
    <div class="employee-card-avatar employee-card-avatar-success">
      <span class="employee-card-status employee-card-status-away"></span>
      LG
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Laura Garcia</h3>
      <span class="employee-card-title">Sales Manager</span>
      <span class="employee-card-department employee-card-department-sales">Sales</span>
    </div>
  </div>

  <div class="employee-card employee-card-clickable">
    <div class="employee-card-avatar employee-card-avatar-warning">
      <span class="employee-card-status employee-card-status-offline"></span>
      PL
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Pedro Lopez</h3>
      <span class="employee-card-title">HR Specialist</span>
      <span class="employee-card-department employee-card-department-hr">HR</span>
    </div>
  </div>

  <div class="employee-card employee-card-clickable">
    <div class="employee-card-avatar employee-card-avatar-secondary">
      <span class="employee-card-status employee-card-status-available"></span>
      MF
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Maria Fernandez</h3>
      <span class="employee-card-title">Financial Analyst</span>
      <span class="employee-card-department employee-card-department-finance">Finance</span>
    </div>
  </div>

  <div class="employee-card employee-card-clickable">
    <div class="employee-card-avatar employee-card-avatar-error">
      <span class="employee-card-status employee-card-status-available employee-card-status-pulse"></span>
      JS
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Juan Sanchez</h3>
      <span class="employee-card-title">Marketing Lead</span>
      <span class="employee-card-department employee-card-department-marketing">Marketing</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-4">
  <!-- Repeat card structure for each employee -->
  <div class="flex flex-col items-center text-center gap-2 p-4 bg-base-100 border border-base-300 rounded-box cursor-pointer hover:shadow-md hover:border-primary transition">
    <div class="relative w-16 h-16 rounded-full bg-primary text-primary-content flex items-center justify-center font-semibold text-xl">AM</div>
    <h3 class="font-semibold text-base m-0">Ana Martinez</h3>
    <span class="text-sm text-base-content/60">Senior Developer</span>
    <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-info/10 text-info">Engineering</span>
  </div>
  <!-- ... more cards ... -->
</div>

Requires: tw.min.css

// Toggle selection on clickable cards
document.querySelectorAll('.employee-card-clickable').forEach(card => {
  card.addEventListener('click', () => {
    card.classList.toggle('employee-card-selected');
  });
});

Glass Variant

Preview

Ana Martinez

Senior Developer Engineering

ana@erplora.com

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem;">
  <div class="employee-card glass" style="max-width: 260px; margin: 0 auto;">
    <div class="employee-card-avatar employee-card-avatar-primary">
      <span class="employee-card-status employee-card-status-available employee-card-status-pulse"></span>
      AM
    </div>
    <div class="employee-card-info">
      <h3 class="employee-card-name">Ana Martinez</h3>
      <span class="employee-card-title">Senior Developer</span>
      <span class="employee-card-department employee-card-department-engineering">Engineering</span>
    </div>
    <div class="employee-card-contact">
      <a href="mailto:ana@erplora.com" class="employee-card-contact-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        <span class="employee-card-contact-text">ana@erplora.com</span>
      </a>
    </div>
    <div class="employee-card-actions">
      <button class="employee-card-action employee-card-action-call">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
      </button>
      <button class="employee-card-action employee-card-action-email">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
      </button>
      <button class="employee-card-action employee-card-action-chat">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
      </button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem;">
  <div class="glass rounded-box flex flex-col items-center text-center gap-3 p-6" style="max-width: 260px; margin: 0 auto;">
    <div class="relative w-16 h-16 rounded-full bg-primary text-primary-content flex items-center justify-center font-semibold text-xl">
      <span class="absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full bg-success border-2 border-white animate-pulse"></span>
      AM
    </div>
    <div class="flex flex-col items-center gap-1">
      <h3 class="font-semibold text-base text-white m-0">Ana Martinez</h3>
      <span class="text-sm text-white/70">Senior Developer</span>
      <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-info/15 text-info">Engineering</span>
    </div>
    <div class="w-full pt-3 border-t" style="border-color: rgba(255,255,255,0.15);">
      <a href="#" class="flex items-center gap-2 text-sm text-white/80 no-underline hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        ana@erplora.com
      </a>
    </div>
    <div class="flex gap-2">
      <button class="w-9 h-9 rounded-full flex items-center justify-center text-white/80 hover:text-success hover:bg-white/10 transition"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg></button>
      <button class="w-9 h-9 rounded-full flex items-center justify-center text-white/80 hover:text-primary hover:bg-white/10 transition"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></button>
      <button class="w-9 h-9 rounded-full flex items-center justify-center text-white/80 hover:text-accent hover:bg-white/10 transition"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is a CSS-only variant

Classes Reference

Class	Description
`.employee-card`	Base card container (vertical, centered)
`.employee-card-horizontal`	Horizontal layout variant
`.employee-card-compact`	Compact row variant with smaller avatar
`.employee-card-clickable`	Adds hover border and pointer cursor
`.employee-card-selected`	Selected state with primary ring
`.employee-card.glass`	Glass morphism variant
`.employee-card-avatar`	Avatar circle with initials or image
`.employee-card-avatar-{color}`	Avatar color: primary, secondary, accent, success, warning, error
`.employee-card-status`	Status indicator dot (inside avatar)
`.employee-card-status-available`	Green available/online status
`.employee-card-status-busy`	Red busy/DND status
`.employee-card-status-away`	Yellow away/idle status
`.employee-card-status-offline`	Gray offline status
`.employee-card-status-pulse`	Pulsing animation on status dot
`.employee-card-info`	Container for name, title, department
`.employee-card-name`	Employee name text
`.employee-card-title`	Job title text
`.employee-card-department`	Department badge pill
`.employee-card-department-{dept}`	Department color: engineering, design, marketing, sales, hr, finance, operations, support
`.employee-card-contact`	Contact info section with top border
`.employee-card-contact-item`	Individual contact link (email, phone)
`.employee-card-actions`	Action buttons container
`.employee-card-action`	Circular action button
`.employee-card-action-call`	Call action (green hover)
`.employee-card-action-email`	Email action (primary hover)
`.employee-card-action-chat`	Chat action (accent hover)
`.employee-grid`	Auto-fill responsive grid container
`.employee-grid-{n}`	Fixed column grid: 2, 3, 4, 5
`.employee-grid-compact`	Reduced grid gap
`.employee-list`	Vertical list container for compact cards