Meeting Card

rohit325
Feb 04, 2026 11
Live Preview

Live Editor

<div class="meeting-card">

  <!-- Left -->
  <div class="card-left">
    <div class="badge">
      <!-- Calendar SVG -->
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="3" y="4" width="18" height="17" rx="3" fill="#3b82f6"/>
        <rect x="3" y="8" width="18" height="2" fill="#ffffff"/>
        <rect x="7" y="2" width="2" height="4" rx="1" fill="#3b82f6"/>
        <rect x="15" y="2" width="2" height="4" rx="1" fill="#3b82f6"/>
      </svg>
      Marketing • Week 1
    </div>

    <div class="name">Stella<br/>Fernandez</div>

    <div class="meta">10:00 AM – 11:00 AM • Video Call</div>
  </div>

  <!-- Right -->
  <div class="card-right">

    <!-- SVG Avatars -->
    <div class="avatars">
      <!-- Avatar 1 -->
      <svg class="avatar" viewBox="0 0 100 100">
        <defs>
          <pattern id="p1" patternUnits="objectBoundingBox" width="1" height="1">
            <image href="https://i.pravatar.cc/100?img=11" width="100" height="100"/>
          </pattern>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#p1)"/>
      </svg>

      <!-- Avatar 2 -->
      <svg class="avatar" viewBox="0 0 100 100">
        <defs>
          <pattern id="p2" patternUnits="objectBoundingBox" width="1" height="1">
            <image href="https://i.pravatar.cc/100?img=32" width="100" height="100"/>
          </pattern>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#p2)"/>
      </svg>

      <!-- Avatar 3 -->
      <svg class="avatar" viewBox="0 0 100 100">
        <defs>
          <pattern id="p3" patternUnits="objectBoundingBox" width="1" height="1">
            <image href="https://i.pravatar.cc/100?img=45" width="100" height="100"/>
          </pattern>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#p3)"/>
      </svg>

      <!-- Avatar 4 -->
      <svg class="avatar" viewBox="0 0 100 100">
        <defs>
          <pattern id="p4" patternUnits="objectBoundingBox" width="1" height="1">
            <image href="https://i.pravatar.cc/100?img=56" width="100" height="100"/>
          </pattern>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#p4)"/>
      </svg>
    </div>

    <button class="join-btn">Join Now</button>
  </div>

</div>
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  font-family: system-ui, -apple-system, Segoe UI, Roboto;
}

/* Card */
.meeting-card {
  width: 340px;
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Left */
.card-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #eef6ff;
  color: #2563eb;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.badge svg {
  width: 16px;
  height: 16px;
}

.name {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.meta {
  font-size: 14px;
  color: #6b7280;
}

/* Right */
.card-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Avatar group */
.avatars {
  display: flex;
}

.avatar {
  width: 36px;
  height: 36px;
  margin-left: -10px;
  border-radius: 50%;
  border: 3px solid #fff;
  overflow: hidden;
}

/* Button */
.join-btn {
  background: linear-gradient(180deg,#3b82f6,#2563eb);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.join-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37,99,235,.45);
}
Categories

Meeting Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
