Notification Card
Create a Notification Card with a gradient bell icon, unread indicator, message text, timestamp, flexible sizing, and smooth CSS hover effects without JavaScript.
Stats Card
Create a Stats Card with monthly revenue, growth percentage, supporting text, a gradient progress bar, responsive sizing, and smooth CSS hover feedback.
Feature Card
Create a Feature Card with a gradient icon, supporting text, animated arrow, flexible sizing, and smooth CSS hover effects without using JavaScript.
Blog Article Card
Build a dark Blog Article Card with publication metadata, author information, a gradient visual header, and CSS hover effects for the card and Read More arrow.
Testimonial Card
Create a dark Testimonial Card with a five-star rating, customer quote, gradient avatar, author details, and a lightweight CSS hover effect without JavaScript.
Product Card
Build a dark Product Card with a rating, current and previous pricing, product badge, description, and Add to Cart button with lightweight CSS hover effects.
Pricing Card
Build a dark Pricing Card with a featured plan badge, monthly price, custom check-mark feature list, and gradient Get Started button using HTML and CSS.
Glassmorphism Card
Create a Glassmorphism Card with a translucent background, 18px backdrop blur, workspace metadata, gradient icon, and lightweight CSS hover and arrow effects.
Hover Lift Card
Create a Hover Lift Card with an 8px upward hover movement, cyan border and glow, featured badge, and animated Learn More arrow using only HTML and CSS.
Profile Card
Create a dark Profile Card with a gradient avatar, user role, biography, three-column statistics, and Follow and Message buttons using only HTML and CSS.