Notifications

3 new
MS

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

EW

Emma Wilson commented on Homepage Redesign

45 minutes ago

JM

James Miller mentioned you in Sprint Planning

2 hours ago

SC

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

DK

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Avatars

Avatar component examples.

Sizing

JD
AS
MK
RJ
LP
TN
<div class="w-6 h-6 rounded-full flex items-center justify-center text-white text-[8px] font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">JD</div>
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-[10px] font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">AS</div>
<div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">MK</div>
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-sm font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">RJ</div>
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-base font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">LP</div>
<div class="w-20 h-20 rounded-full flex items-center justify-center text-white text-lg font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">TN</div>

Group

Overlapping

JD
AS
MK
RJ

With overflow

JD
AS
MK
+5
<!-- Overlapping -->
<div class="flex items-center">
  <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 border-2 border-white">JD</div>
  <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 -ml-3 border-2 border-white">AS</div>
  <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 -ml-3 border-2 border-white">MK</div>
  <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 -ml-3 border-2 border-white">RJ</div>
</div>

<!-- With overflow -->
<div class="flex items-center">
  <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-[10px] font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 border-2 border-white">JD</div>
  <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-[10px] font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 -ml-3 border-2 border-white">AS</div>
  <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-[10px] font-bold bg-gradient-to-br from-alpine-400 to-alpine-500 -ml-3 border-2 border-white">MK</div>
  <div class="bg-alpine-500 text-white text-xs w-8 h-8 rounded-full flex items-center justify-center -ml-3 border-2 border-white">+5</div>
</div>

Placeholders

JD
AS
MK
RJ
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold bg-alpine-500/20 text-alpine-600">JD</div>
<div class="w-10 h-10 rounded-full flex items-center justify-center text-xs font-bold bg-green-500/20 text-green-300">AS</div>
<div class="w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold bg-blue-500/20 text-blue-300">MK</div>
<div class="w-16 h-16 rounded-full flex items-center justify-center text-lg font-bold bg-purple-500/20 text-purple-300">RJ</div>

Status

JD
Online
AS
Away
MK
Busy
RJ
Offline 
<div class="relative">
  <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-sm font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">JD</div>
  <span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white"></span>
</div>

<div class="relative">
  <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-sm font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">AS</div>
  <span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-yellow-500 rounded-full border-2 border-white"></span>
</div>

<div class="relative">
  <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-sm font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">MK</div>
  <span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-red-500 rounded-full border-2 border-white"></span>
</div>

<div class="relative">
  <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-sm font-bold bg-gradient-to-br from-alpine-400 to-alpine-500">RJ</div>
  <span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-gray-400 rounded-full border-2 border-white"></span>
</div>