Card Components

A centered profile card with avatar, name, role, and a follow button. Lifts on hover.

<div class="profile-card">
  <div class="profile-avatar">LN</div>
  <h3>Likhitha Nagraj</h3>
  <p>Embedded Systems Engineer</p>
  <button>Follow</button>
</div>

.profile-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  max-width: 240px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.profile-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(108,92,231,0.18);
}
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}

A variant of the profile card with a warm gradient and a connect CTA — perfect for student or developer portfolios.

<div class="profile-card student-card">
  <div class="profile-avatar">AP</div>
  <h3>Ankit Pardeshi</h3>
  <p>AI & Data Science Student</p>
  <button>Connect</button>
</div>

/* Same .profile-card base styles as above */
.student-card .profile-avatar {
  background: linear-gradient(135deg, #eb6835, #fdcb6e);
}
.connect-btn {
  background: linear-gradient(90deg, #eb6835, #fdcb6e);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

A minimal content card — the building block for most UI layouts.

<div class="simple-card">
  <h4>Card Title</h4>
  <p>Card description goes here.</p>
  <button>Learn More</button>
</div>

.simple-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 14px;
  padding: 24px;
  max-width: 280px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.simple-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.09);
}

An e-commerce product card with badge, price highlight, and a cart CTA button.

<div class="product-card">
  <div class="product-badge">New</div>
  <div class="product-icon">🎧</div>
  <h4>Premium Headphones</h4>
  <p class="price">$49.99</p>
  <p>High-quality audio with noise cancellation.</p>
  <button>Add to Cart</button>
</div>

.product-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  max-width: 240px;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.1); }
.price { font-size: 22px; font-weight: 800; color: #eb6835; }

A premium pricing card with feature list, price, and a highlighted CTA button.

<div class="pricing-card">
  <div class="pricing-badge">Most Popular</div>
  <h4>Pro Plan</h4>
  <div class="price">$19<span>/mo</span></div>
  <ul>
    <li>✓ Unlimited components</li>
    <li>✓ Priority support</li>
    <li>✓ Custom themes</li>
  </ul>
  <button>Choose Plan</button>
</div>

.pricing-card {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(108,92,231,0.4);
  border-radius: 20px;
  padding: 28px 24px;
  color: #fff;
  text-align: center;
  max-width: 240px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.pricing-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(108,92,231,0.3); }

A media card with a thumbnail area, category tag, title, and a read more link.

<div class="image-card">
  <img src="your-image.jpg" alt="...">
  <div class="image-card-body">
    <span class="tag">Nature</span>
    <h4>Scenic View</h4>
    <p>Beautiful scenic card design.</p>
    <a href="#">Read More →</a>
  </div>
</div>

.image-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  max-width: 280px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.image-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); }

A full-featured blog article card with category, date, author, and read time.

<div class="blog-card">
  <div class="blog-thumb">
    <img src="..." alt="...">
    <span class="blog-cat">Design</span>
  </div>
  <div class="blog-body">
    <div class="meta">May 2026 · 5 min read</div>
    <h4>Getting Started with UI Design</h4>
    <p>Learn UI fundamentals easily.</p>
    <div class="blog-footer">
      <span>Alex Dev</span>
      <a href="#">Read →</a>
    </div>
  </div>
</div>

.blog-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  max-width: 290px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }

Compact notification cards with icon, message, timestamp, and dismiss button.

<div class="notif-card">
  <div class="notif-icon">🔔</div>
  <div class="notif-body">
    <h4>New Message</h4>
    <p>You have received a new message.</p>
    <span>2 min ago</span>
  </div>
  <button class="notif-close">✕</button>
</div>

.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-left: 4px solid #6c5ce7;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.25s;
}
.notif-card:hover { transform: translateX(4px); }

A Twitter/X-style social card with avatar, actions bar, and hover interactions.

<div class="social-card">
  <div class="social-header">
    <div class="social-avatar">JD</div>
    <div>
      <strong>John Doe</strong>
      <span>@johndoe · 2h</span>
    </div>
  </div>
  <p>Just launched my new UI library! 🚀</p>
  <div class="social-actions">
    <button>♥ 42</button>
    <button>💬 12</button>
    <button>🔄 5</button>
  </div>
</div>

.social-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  padding: 20px;
  max-width: 320px;
  transition: box-shadow 0.3s;
}
.social-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); }