Minimal UI
Design Systems
Build consistent interfaces with reusable components and clear guidelines.
Basic Card Structure
A card is a container that groups related content. Start with a simple structure including an image area, title, text, and optional action button.
Pro Plan
New
Weekly Digest
Curated insights delivered to your inbox.
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card__image { height: 140px; }
.card__content { padding: 1.25rem; }
.card__title { font-size: 1.125rem; font-weight: 600; }
.card__text { color: #6b7280; font-size: 0.875rem; }Hover Effects
Add interactive hover effects to make cards more engaging. Hover over each card to see the effect.
Elevate
Cloud Hosting
Deploy anywhere with zero downtime.
Spark
AI Analytics
Insights that drive real growth.
Zoom
Video Editing
Professional tools for creators.
Focus
Task Manager
Stay organized, ship faster.
Vista
Photo Gallery
Showcase your best work beautifully.
.card-lift {
transition: transform 0.3s, box-shadow 0.3s;
}
.card-lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card-glow:hover {
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3);
}
.card-scale:hover { transform: scale(1.03); }
.card-border { border: 2px solid transparent; }
.card-border:hover { border-color: #6366f1; }3D Flip Card
Create cards that flip to reveal content on the back using 3D transforms. Hover to see the flip animation.
UI/UX
Design Workshop
Hover to explore
What You'll Learn
Master color theory, typography, and layout principles in this hands-on course.
Enroll Now.flip-card { perspective: 1000px; height: 320px; }
.flip-card__inner {
width: 100%; height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card__inner { transform: rotateY(180deg); }
.flip-card__front, .flip-card__back {
position: absolute;
width: 100%; height: 100%;
backface-visibility: hidden;
}
.flip-card__back { transform: rotateY(180deg); }Glassmorphism Card
Create a frosted glass effect using backdrop-filter: blur() with semi-transparent backgrounds.
Weather Now
Clear skies ahead. Perfect day for a walk outside.
.glass-card {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
}Gradient Border Card
Create colorful gradient borders using pseudo-elements and CSS masks.
Premium
Creative Suite
All-in-one toolkit for designers.
Motion
Animation Lab
Bring your interfaces to life.
.gradient-border {
position: relative;
padding: 3px;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
padding: 3px;
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}Special Card Layouts
Common card patterns for specific use cases like pricing tables and user profiles.
SR
Sarah Rivera
Product Designer
Crafting intuitive experiences at the intersection of design and code.
Soft
Calm Interface
Subtle depth with soft shadows.
/* Neumorphism */
.neumorphic {
background: #e0e5ec;
box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
}
/* Profile Card */
.profile-card { text-align: center; padding: 2rem; }
.avatar {
width: 80px; height: 80px;
border-radius: 50%;
margin: 0 auto 1rem;
}