Contact Card

jitesh208
Jan 28, 2026 2
Live Preview

Live Editor

<div class="card">

  <!-- Top -->
  <div class="top">
    <div class="avatar"></div>

    <div class="info">
      <div class="name">
        Henrie Ekemezie
        <span class="badge">✔</span>
      </div>
      <div class="role">Founder & Designer at Claeflo Haus</div>
      <div class="rating">⭐ 4 <span style="color:#9ca3af;">(23)</span></div>
    </div>

    <div class="heart">♡</div>
  </div>

  <!-- Actions -->
  <div class="actions">
    <div class="action primary">📹</div>
    <div class="action">📞</div>
    <div class="action">💬</div>
    <div class="action">🗨</div>
    <div class="action">💲</div>
  </div>

</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#efeded;
}

/* Card */
.card{
  width:420px;
  background:linear-gradient(180deg,#1a1a1a,#111);
  border-radius:26px;
  padding:18px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  color:#fff;
}

/* Top section */
.top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

/* Avatar */
.avatar{
  width:64px;
  height:64px;
  border-radius:18px;
  background:#f2e4c8;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.avatar::after{
  content:"";
  width:40px;
  height:40px;
  background:#000;
  border-radius:50%;
  box-shadow:0 12px 0 #000;
}

/* Info */
.info{
  flex:1;
}

.name{
  font-size:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}

.badge{
  font-size:12px;
  color:#38bdf8;
}

.role{
  font-size:13px;
  color:#9ca3af;
  margin-top:2px;
}

/* Rating */
.rating{
  margin-top:6px;
  font-size:13px;
  color:#facc15;
}

/* Heart */
.heart{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #333;
  display:grid;
  place-items:center;
  color:#aaa;
}

/* Actions */
.actions{
  display:flex;
  gap:14px;
}

.action{
  flex:1;
  height:48px;
  border-radius:14px;
  background:#1f1f1f;
  display:grid;
  place-items:center;
  color:#aaa;
  font-size:18px;
  box-shadow:inset 0 0 0 1px #2a2a2a;
  transition:.25s;
}

.action.primary{
  background:#38bdf8;
  color:#000;
  box-shadow:none;
}

.action:hover{
  transform:translateY(-2px);
}
Categories

Contact Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
