Home Cards

Card Components

A rich collection of reusable card layouts — from profile cards to product, blog, notification, and social media cards. Hover to interact, click to copy.

9 Components Pure CSS Hover Effects
ST
saiteja Engineer · UIverse
120+

Cards

9

Styles

100%

Free

Profile Card Popular
LN

Likhitha Nagraj

Embedded Systems Engineer

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;
}
Student Card Essential
AP

Ankit Pardeshi

AI & Data Science Student

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;
}
Simple Card Essential

Card Title

This is a simple card component with a clean, minimal design.

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);
}
Product Card Trending
New
🎧

Premium Headphones

$49.99

High-quality audio with noise cancellation.

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; }
Pricing Card Popular
Most Popular

Pro Plan

$19/mo
  • Unlimited components
  • Priority support
  • Custom themes

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); }
Image Card Essential
Nature

Scenic View

Beautiful scenic card design for nature and travel content.

Read More

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;
}
.basic-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.1); }
.basic-badge {
  display: inline-block;
  background: #e6f4ea;
  color: #2d7a3a;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.basic-icon { font-size: 32px; margin-bottom: 8px; }
.basic-card h4 { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 6px; }
.basic-price { font-size: 28px; font-weight: 800; color: #2d7a3a; margin: 0 0 6px; }
.basic-price span { font-size: 14px; font-weight: 400; color: #999; }
.basic-card p { font-size: 13px; color: #888; margin: 0 0 14px; }
.basic-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  text-align: left;
}
.basic-features li { font-size: 13px; color: #555; padding: 4px 0; }
.feat-check { color: #2d7a3a; font-weight: 700; margin-right: 6px; }
.feat-cross { color: #ccc; font-weight: 700; margin-right: 6px; }
.basic-btn {
  width: 100%;
  padding: 10px 0;
  background: #e6f4ea;
  color: #2d7a3a;
  border: 1.5px solid #a8d5b0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.basic-btn:hover { background: #c8eacf; transform: translateY(-2px); }
Trial Plan Trial
14-Day Trial
⏱️

Trial Plan

Free for 14 days

then $9/mo

Full access. No credit card required.

  • ✓ 20 projects
  • ✓ 10 GB storage
  • ✓ Email support
  • ✓ Custom domain
  • ✗ Advanced analytics

A trial plan card with countdown feel, free period highlight, and post-trial pricing shown clearly.

<div class="trial-card">
  <div class="trial-badge">14-Day Trial</div>
  <div class="trial-icon">⏱️</div>
  <h4>Trial Plan</h4>
  <p class="trial-price-label">Free for 14 days</p>
  <p class="trial-then">then $9<span>/mo</span></p>
  <p>Full access. No credit card required.</p>
  <ul class="trial-features">
    <li><span class="feat-check">✓</span> 20 projects</li>
    <li><span class="feat-check">✓</span> 10 GB storage</li>
    <li><span class="feat-check">✓</span> Email support</li>
    <li><span class="feat-check">✓</span> Custom domain</li>
    <li><span class="feat-cross">✗</span> Advanced analytics</li>
  </ul>
  <button class="trial-btn">Start Free Trial</button>
</div>

.trial-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;
}
.trial-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.1); }
.trial-badge {
  display: inline-block;
  background: #fff4e0;
  color: #b35a00;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trial-icon { font-size: 32px; margin-bottom: 8px; }
.trial-card h4 { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 6px; }
.trial-price-label { font-size: 18px; font-weight: 800; color: #eb6835; margin: 0 0 4px; }
.trial-then { font-size: 14px; color: #999; margin: 0 0 6px; }
.trial-then span { font-size: 12px; }
.trial-card p { font-size: 13px; color: #888; margin: 0 0 14px; }
.trial-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  text-align: left;
}
.trial-features li { font-size: 13px; color: #555; padding: 4px 0; }
.trial-btn {
  width: 100%;
  padding: 10px 0;
  background: #fff4e0;
  color: #b35a00;
  border: 1.5px solid #f5c97a;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.trial-btn:hover { background: #ffe5b0; transform: translateY(-2px); }
Glass Profile Card Modern
DP

Dipanita Mondal

Frontend Developer

24K Followers
182 Projects

A futuristic glassmorphism profile card with blur effects and gradients.

Neumorphism Card Soft UI

Design System

Build reusable interfaces using clean and scalable UI patterns.

A soft neumorphic card with elegant shadows and tactile interactions.

Cyberpunk Card Futuristic
LIVE

Cyber Dashboard

Futuristic neon dashboard card with glowing effects and dark aesthetics.

A glowing cyberpunk-inspired UI card with neon borders and hover animations.

Premium Plan Popular
Most Popular
⭐

Premium Plan

$19/mo

Best for growing teams and businesses.

  • Unlimited projects
  • 100 GB storage
  • Priority support
  • Custom domain
  • Analytics dashboard

A premium dark-themed pricing card with star badge, feature list, and a glowing CTA button.

<div class="premium-card">
  <div class="premium-badge">Most Popular</div>
  <div class="premium-icon">⭐</div>
  <h4>Premium Plan</h4>
  <p class="premium-price">$<span>19</span><span>/mo</span></p>
  <p>Best for growing teams and businesses.</p>
  <ul class="premium-features">
    <li>✓ Unlimited projects</li>
    <li>✓ 100 GB storage</li>
    <li>✓ Priority support</li>
    <li>✓ Custom domain</li>
    <li>✓ Analytics dashboard</li>
  </ul>
  <button class="premium-btn">Choose Premium</button>
</div>

.premium-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;
}
.premium-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(108,92,231,0.3); }
.premium-badge {
  display: inline-block;
  background: rgba(108,92,231,0.25);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(108,92,231,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.premium-icon { font-size: 32px; margin-bottom: 8px; }
.premium-card h4 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.premium-price { font-size: 14px; color: #c4b5fd; margin: 0 0 6px; }
.premium-amount { font-size: 36px; font-weight: 800; color: #fff; }
.premium-period { font-size: 14px; color: #8b7fd4; }
.premium-card p { font-size: 13px; color: #a0a0c0; margin: 0 0 14px; }
.premium-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  text-align: left;
}
.premium-features li {
  font-size: 13px;
  color: #d0d0f0;
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.premium-features li i { color: #7c6fcd; font-size: 12px; }
.premium-btn {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, #6c5ce7, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 20px rgba(108,92,231,0.5);
}
.premium-btn:hover { opacity: 0.9; transform: translateY(-2px); }
Advanced Plan Advanced
Enterprise

Advanced Plan

$49/mo

For power users, agencies & enterprises.

  • Unlimited everything
  • 1 TB storage
  • Dedicated support
  • White-label option
  • Advanced analytics

A dark enterprise-tier pricing card with gold accents, feature list, and a premium CTA button.

<div class="advanced-card">
  <div class="advanced-badge">Enterprise</div>
  <div class="advanced-icon"></div>
  <h4>Advanced Plan</h4>
  <p class="advanced-price">$<span>49</span><span>/mo</span></p>
  <p>For power users, agencies and enterprises.</p>
  <ul class="advanced-features">
    <li>✓ Unlimited everything</li>
    <li>✓ 1 TB storage</li>
    <li>✓ Dedicated support</li>
    <li>✓ White-label option</li>
    <li>✓ Advanced analytics</li>
  </ul>
  <button class="advanced-btn">Go Advanced</button>
</div>

.advanced-card {
  background: linear-gradient(135deg, #0f0f1a, #1a1200);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 20px;
  padding: 28px 24px;
  color: #fff;
  text-align: center;
  max-width: 240px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.advanced-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(212,175,55,0.2); }
.advanced-badge {
  display: inline-block;
  background: rgba(212,175,55,0.15);
  color: #f0c040;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(212,175,55,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.advanced-icon { font-size: 32px; margin-bottom: 8px; }
.advanced-card h4 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.advanced-price { font-size: 14px; color: #f0c040; margin: 0 0 6px; }
.advanced-amount { font-size: 36px; font-weight: 800; color: #fff; }
.advanced-period { font-size: 14px; color: #a08030; }
.advanced-card p { font-size: 13px; color: #a0a090; margin: 0 0 14px; }
.advanced-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  text-align: left;
}
.advanced-features li {
  font-size: 13px;
  color: #d0d0b0;
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.advanced-features li i { color: #d4af37; font-size: 12px; }
.advanced-btn {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, #b8860b, #d4af37);
  color: #0f0f1a;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 20px rgba(212,175,55,0.4);
}
.advanced-btn:hover { opacity: 0.9; transform: translateY(-2px); }
Image Card Essential
Nature

Scenic View

Beautiful scenic card design for nature and travel content.

Read More

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

<div class="image-card">
  <img src="https://picsum.photos/500/300?random=20" 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); }
Blog Card Trending
Design
May 2026 5 min read

Getting Started with UI Design

Learn the fundamentals of modern UI/UX design with practical tips.

AD
Alex Dev
Read

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); }
Notification Card Popular

New Message

You have received a new message from Alex.

2 min ago

Upload Complete

Your file has been successfully uploaded.

Just now

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); }
Social Card Trending