Profile

A profile card introduces a person at a glance. Avatar, name, and handle come first, a short bio adds character, follower stats add social proof, and a follow button turns the card into an action. Member directories, hover cards, and community sidebars all present people this way.

<div class="card">
  <div class="card-content">
    <img
      src="https://images.unsplash.com/photo-1604573824303-d0177f69461f?rect=0,0,4000,4000&amp;w=640&amp;h=640&amp;fit=crop&amp;auto=format&amp;q=100"
      alt="Vivienne Kleinfeld"
      class="aspect-square w-full rounded-xl object-cover"
    />
  </div>
  <div class="card-header">
    <h3 class="card-title">Vivienne Kleinfeld</h3>
    <p class="card-description">
      Product Designer who focuses on simplicity &amp; usability. Currently
      designing at Acme Inc.
    </p>
  </div>
  <div class="card-footer gap-6">
    <div class="leading-tight">
      <p class="text-sm font-semibold tabular-nums">312</p>
      <p class="text-xs text-muted-foreground">Followers</p>
    </div>
    <div class="leading-tight">
      <p class="text-sm font-semibold tabular-nums">48</p>
      <p class="text-xs text-muted-foreground">Following</p>
    </div>
    <button class="btn btn-sm ml-auto">
      Follow<svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-plus icon-end"
        aria-hidden="true"
      >
        <path d="M5 12h14"></path>
        <path d="M12 5v14"></path>
      </svg>
    </button>
  </div>
</div>

Browse more card examples.