Card Components
The building blocks of modern UI - versatile, reusable, and beautiful
Basic Card Patterns
Essential card designs that form the foundation of any modern interface.
Simple Card
Card Title
This is a simple card with basic styling. Perfect for displaying content in a clean, organised way.
Learn more →/* Basic card */
.card {
background: var(--colour-surface);
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
margin: 0 0 0.5rem 0;
font-size: 1.25rem;
font-weight: 600;
}
.card-text {
color: var(--colour-text-secondary);
line-height: 1.6;
}Image Card
Beautiful Landscape
Cards with images draw attention and provide visual context for your content.
/* Image card */
.card-image {
overflow: hidden;
}
.card-image-top {
height: 200px;
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
margin: -1.5rem -1.5rem 1.5rem;
}
.card-body {
padding: 0 1.5rem 1.5rem;
}
.card-meta {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: var(--colour-text-secondary);
}Profile Card
Jane Smith
Senior Designer
Passionate about creating beautiful, user-friendly interfaces that delight users.
/* Profile card */
.card-profile {
text-align: center;
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
margin: 0 auto 1rem;
}
.profile-stats {
display: flex;
justify-content: space-around;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--colour-border);
}
.stat-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--colour-primary);
}Advanced Card Designs
More complex card patterns with rich interactions and visual effects.
Product Card
Premium Headphones
Wireless noise-cancelling headphones with premium sound quality.
/* Product card */
.card-product {
position: relative;
transition: transform 0.3s ease;
}
.card-product:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.product-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--colour-error);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 600;
}
.product-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0;
}
.stars {
color: #f59e0b;
}Feature Card
Lightning Fast
Optimised for speed with lazy loading and efficient caching strategies.
- Sub-second load times
- CDN integration
- Smart caching
/* Feature card */
.card-feature {
border: 2px solid transparent;
background: linear-gradient(var(--colour-surface), var(--colour-surface)) padding-box,
linear-gradient(135deg, #667eea, #764ba2) border-box;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.feature-list li::before {
content: "✓";
color: var(--colour-success);
font-weight: bold;
margin-right: 0.5rem;
}Testimonial Card
This CSS showcase has been an invaluable resource for our team. The examples are practical and the code is clean and well-documented.
/* Testimonial card */
.card-testimonial {
position: relative;
background: var(--colour-surface-variant);
}
.quote-icon {
font-size: 4rem;
line-height: 1;
color: var(--colour-primary);
opacity: 0.2;
}
.testimonial-text {
font-style: italic;
line-height: 1.8;
margin: 1rem 0 1.5rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #f06, #48f);
}Card Layouts
Different ways to arrange and display cards for various use cases.
Grid Layout
/* Responsive grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}Masonry Layout
/* Masonry with columns */
.cards-masonry {
columns: 3;
column-gap: 1.5rem;
}
.card-masonry {
break-inside: avoid;
margin-bottom: 1.5rem;
}Horizontal Scroll
/* Horizontal scroll */
.cards-scroll {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.card-scroll {
flex: 0 0 300px;
scroll-snap-align: start;
}Interactive Cards
Cards with engaging hover effects, animations, and interactive elements.
Flip Card
Front Side
Hover to see the back
Back Side
Hidden information revealed!
/* 3D flip card */
.card-flip-container {
perspective: 1000px;
}
.card-flip {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card-flip-container:hover .card-flip {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}Expanding Card
/* Expanding card */
.card-expand {
cursor: pointer;
}
.expand-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.card-expand.expanded .expand-content {
max-height: 200px;
}
.expand-toggle {
background: none;
border: none;
color: var(--colour-primary);
cursor: pointer;
font-weight: 600;
}Hover Reveal
/* Hover reveal overlay */
.card-hover-reveal {
position: relative;
overflow: hidden;
}
.reveal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.card-hover-reveal:hover .reveal-overlay {
opacity: 1;
}Card Design Best Practices
Consistent Spacing
Use a spacing system to maintain consistent padding and margins across all cards.
Accessible Actions
Ensure interactive elements have proper focus states and are keyboard navigable.
Responsive Design
Cards should stack vertically on mobile and adapt to different screen sizes.
Visual Hierarchy
Use typography, colour, and spacing to guide users through card content.