Card Component
Card Component: Cards are versatile content containers that group related information together. UIKit provides a comprehensive card system with various styles, modifiers, and interactive features.
Live Examples
1. Basic Card Styles
Example Preview
Default Card
Basic card with default styling. Perfect for general content display.
Primary Card
Card with primary color scheme. Use for highlighted content.
Secondary Card
Card with secondary color scheme. Great for less prominent content.
2. Card with Header & Footer
Example Preview
Featured Product
Includes advanced features, priority support, and unlimited projects.
- 24/7 Support
- Unlimited Storage
- Advanced Analytics
Just finished working on the new dashboard design. Excited to share it with the team!
3. Card Modifiers & Variations
Example Preview
Hover Card
Card with hover effect. Try hovering over this card!
Small Card
Compact card with reduced padding.
Large Card
Card with increased padding for emphasis.
Full Width Card
Card that spans the full width of its container.
Centered Content
Content centered within the card.
4. Card with Media
Example Preview
Media Top Card
Card with media at the top. Perfect for blog posts or product cards.
Media Bottom Card
Card with media at the bottom. Great for showcasing content before media.
New
Card with Badge
Card featuring a badge in the top-right corner.
Video Card
Card containing a video player. Supports all HTML5 video formats.
5. Card Grid Layouts
Example Preview
Card 1
Card in a responsive grid layout.
Card 2
Automatically adjusts to screen size.
Card 3
Perfect for dashboards and galleries.
Users
Time
Tasks
Alerts
Card Classes Reference
Style Classes
| Class | Description | Usage |
|---|---|---|
.uk-card | Base card class | <div class="uk-card"> |
.uk-card-default | Default card style (white background) | <div class="uk-card uk-card-default"> |
.uk-card-primary | Primary card style (blue background) | <div class="uk-card uk-card-primary"> |
.uk-card-secondary | Secondary card style (dark background) | <div class="uk-card uk-card-secondary"> |
Structure Classes
| Class | Description | Usage |
|---|---|---|
.uk-card-body | Card body/content area | <div class="uk-card-body"> |
.uk-card-header | Card header area | <div class="uk-card-header"> |
.uk-card-footer | Card footer area | <div class="uk-card-footer"> |
.uk-card-title | Card title styling | <h3 class="uk-card-title"> |
Modifier Classes
| Class | Description | Usage |
|---|---|---|
.uk-card-hover | Adds hover effect to card | <div class="uk-card uk-card-hover"> |
.uk-card-small | Small card with reduced padding | <div class="uk-card uk-card-small"> |
.uk-card-large | Large card with increased padding | <div class="uk-card uk-card-large"> |
.uk-card-media-top | Media container at top of card | <div class="uk-card-media-top"> |
.uk-card-badge | Badge positioning in card | <div class="uk-card-badge"> |
Complete Real-World Examples
E-commerce Product Card
<!-- Product Card -->
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-media-top">
<img src="product-image.jpg" alt="Product Image">
<div class="uk-position-top-right uk-margin-small-top uk-margin-small-right">
<span class="uk-badge uk-badge-danger">Sale</span>
</div>
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-flex-middle">
<h3 class="uk-card-title uk-margin-remove-bottom">iPhone 15 Pro</h3>
<div class="uk-text-success">In Stock</div>
</div>
<p class="uk-text-meta">Latest model with advanced features</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-top">
<div>
<span class="uk-text-large uk-text-bold">$999</span>
<span class="uk-text-meta uk-text-line-through uk-margin-small-left">$1,199</span>
</div>
<div class="uk-text-small">
<span uk-icon="icon: star"></span>
<span uk-icon="icon: star"></span>
<span uk-icon="icon: star"></span>
<span uk-icon="icon: star"></span>
<span uk-icon="icon: star"></span>
<span class="uk-text-meta uk-margin-small-left">(128)</span>
</div>
</div>
<div class="uk-margin-top">
<button class="uk-button uk-button-primary uk-width-1-1">
<span uk-icon="icon: cart" class="uk-margin-small-right"></span>
Add to Cart
</button>
<div class="uk-grid-small uk-child-width-1-2 uk-margin-small-top" uk-grid>
<div>
<button class="uk-button uk-button-default uk-width-1-1">
<span uk-icon="icon: heart"></span>
</button>
</div>
<div>
<button class="uk-button uk-button-default uk-width-1-1">
<span uk-icon="icon: expand"></span>
</button>
</div>
</div>
</div>
</div>
</div>User Profile Card
<!-- User Profile Card -->
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="60" height="60" src="avatar.jpg" alt="User Avatar">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom">Alex Johnson</h3>
<p class="uk-text-meta uk-margin-remove-top">Senior Developer • San Francisco</p>
<div class="uk-text-small">
<span class="uk-label uk-label-success">Available</span>
<span class="uk-margin-small-left">Last active: 2 min ago</span>
</div>
</div>
</div>
</div>
<div class="uk-card-body">
<p>Full-stack developer with 8+ years of experience in web technologies. Passionate about UI/UX design and performance optimization.</p>
<div class="uk-margin">
<h5>Skills</h5>
<div class="uk-flex uk-flex-wrap">
<span class="uk-label uk-margin-small-right uk-margin-small-bottom">JavaScript</span>
<span class="uk-label uk-margin-small-right uk-margin-small-bottom">React</span>
<span class="uk-label uk-margin-small-right uk-margin-small-bottom">Node.js</span>
<span class="uk-label uk-margin-small-right uk-margin-small-bottom">UI/UX</span>
<span class="uk-label uk-margin-small-right uk-margin-small-bottom">AWS</span>
</div>
</div>
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
<div class="uk-text-center">
<div class="uk-text-large uk-text-bold">42</div>
<div class="uk-text-meta">Projects</div>
</div>
<div class="uk-text-center">
<div class="uk-text-large uk-text-bold">128</div>
<div class="uk-text-meta">Followers</div>
</div>
<div class="uk-text-center">
<div class="uk-text-large uk-text-bold">4.8</div>
<div class="uk-text-meta">Rating</div>
</div>
</div>
</div>
<div class="uk-card-footer">
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">
<span uk-icon="icon: mail" class="uk-margin-small-right"></span>
Send Message
</button>
<button class="uk-button uk-button-default uk-width-1-1">
<span uk-icon="icon: user-plus" class="uk-margin-small-right"></span>
Connect
</button>
</div>
</div>Dashboard Stats Card
<!-- Dashboard Stats Card -->
<div class="uk-card uk-card-primary uk-card-hover">
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<h3 class="uk-card-title uk-margin-remove-bottom">Revenue</h3>
<p class="uk-text-meta uk-margin-remove-top">This Month</p>
</div>
<div class="uk-text-right">
<span uk-icon="icon: trend-up-down; ratio: 1.5"></span>
</div>
</div>
<div class="uk-margin-top">
<div class="uk-text-large uk-text-bold">$24,580</div>
<div class="uk-flex uk-flex-middle uk-margin-small-top">
<span class="uk-label uk-label-success uk-margin-small-right">
<span uk-icon="icon: arrow-up"></span> 12.5%
</span>
<span class="uk-text-meta">vs last month</span>
</div>
</div>
<div class="uk-margin-top">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 75%;"></div>
</div>
<div class="uk-text-small uk-text-meta uk-margin-small-top">75% of target achieved</div>
</div>
</div>
<div class="uk-card-footer">
<a href="#" class="uk-button uk-button-text">
View Details
<span uk-icon="icon: chevron-right" class="uk-margin-small-left"></span>
</a>
</div>
</div>JavaScript API & Interactions
Card Interactions & Animations
// Card hover effects
document.addEventListener('DOMContentLoaded', function() {
// Add hover animation to all cards with hover class
const hoverCards = document.querySelectorAll('.uk-card-hover');
hoverCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.transition = 'transform 0.3s ease';
this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.1)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '';
});
});
// Card click actions
const clickableCards = document.querySelectorAll('.uk-card[data-action]');
clickableCards.forEach(card => {
card.style.cursor = 'pointer';
card.addEventListener('click', function() {
const action = this.getAttribute('data-action');
// Example actions
switch(action) {
case 'expand':
this.classList.toggle('uk-card-large');
break;
case 'toggle':
this.classList.toggle('uk-card-primary');
this.classList.toggle('uk-card-default');
break;
case 'flip':
this.classList.toggle('uk-card-flipped');
break;
}
// Dispatch custom event
const event = new CustomEvent('cardAction', {
detail: {
action: action,
card: this
}
});
this.dispatchEvent(event);
});
});
// Card carousel/slider
const cardSlider = {
container: document.getElementById('cardSlider'),
cards: [],
currentIndex: 0,
init: function() {
this.cards = Array.from(this.container.querySelectorAll('.uk-card'));
this.showCard(0);
},
showCard: function(index) {
// Hide all cards
this.cards.forEach(card => {
card.style.display = 'none';
});
// Show selected card
this.cards[index].style.display = 'block';
this.currentIndex = index;
},
next: function() {
let nextIndex = this.currentIndex + 1;
if (nextIndex >= this.cards.length) {
nextIndex = 0;
}
this.showCard(nextIndex);
},
prev: function() {
let prevIndex = this.currentIndex - 1;
if (prevIndex < 0) {
prevIndex = this.cards.length - 1;
}
this.showCard(prevIndex);
}
};
// Initialize slider if container exists
if (document.getElementById('cardSlider')) {
cardSlider.init();
}
});
// Card modal functionality
function openCardModal(cardId) {
const card = document.getElementById(cardId);
const modalContent = card.cloneNode(true);
// Create modal
const modal = document.createElement('div');
modal.className = 'uk-modal uk-open';
modal.innerHTML = `
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div id="modalContent"></div>
</div>
`;
document.body.appendChild(modal);
modal.querySelector('#modalContent').appendChild(modalContent);
// Add close functionality
modal.querySelector('.uk-modal-close-default').addEventListener('click', function() {
document.body.removeChild(modal);
});
// Close on backdrop click
modal.addEventListener('click', function(e) {
if (e.target === modal) {
document.body.removeChild(modal);
}
});
}Custom Card Styles
/* Custom Card Styles */
/* Glassmorphism Card */
.uk-card-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.uk-card-glass .uk-card-body {
color: white;
}
/* Gradient Card */
.uk-card-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
}
.uk-card-gradient .uk-card-title {
color: white;
}
/* Card with Shadow */
.uk-card-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.uk-card-shadow:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
/* Rounded Card */
.uk-card-rounded {
border-radius: 15px;
overflow: hidden;
}
/* Card with Border */
.uk-card-border {
border: 2px solid #e5e5e5;
background: transparent;
}
.uk-card-border-primary {
border: 2px solid #1e87f0;
background: transparent;
}
.uk-card-border-primary .uk-card-title {
color: #1e87f0;
}
/* Card with Icon Header */
.uk-card-icon-header {
position: relative;
padding-top: 60px;
}
.uk-card-icon-header .uk-card-icon {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: #1e87f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
/* Flipping Card */
.uk-card-flip {
perspective: 1000px;
}
.uk-card-flip-inner {
position: relative;
width: 100%;
height: 300px;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.uk-card-flip:hover .uk-card-flip-inner {
transform: rotateY(180deg);
}
.uk-card-front, .uk-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.uk-card-back {
transform: rotateY(180deg);
}
/* Usage in HTML */
<div class="uk-card uk-card-glass">
<div class="uk-card-body">
<h3 class="uk-card-title">Glass Card</h3>
<p>Modern glassmorphism effect</p>
</div>
</div>
<div class="uk-card uk-card-gradient">
<div class="uk-card-body">
<h3 class="uk-card-title">Gradient Card</h3>
<p>Beautiful gradient background</p>
</div>
</div>
<div class="uk-card uk-card-flip">
<div class="uk-card-flip-inner">
<div class="uk-card-front uk-card-default uk-card-body">
<h3>Front Side</h3>
<p>Hover to flip</p>
</div>
<div class="uk-card-back uk-card-primary uk-card-body">
<h3>Back Side</h3>
<p>This is the back!</p>
</div>
</div>
</div>Best Practices for Cards:
- Use cards to group related information and actions
- Maintain consistent card sizing and spacing in grids
- Include clear visual hierarchy with proper typography
- Add hover effects to indicate interactivity
- Use badges and labels to highlight important information
- Ensure cards are responsive and work well on mobile
- Limit the amount of content in each card
- Use appropriate card styles based on content importance
- Include clear call-to-action buttons in card footers
- Test card layouts across different screen sizes
- Consider accessibility with proper contrast ratios
- Use card modifiers appropriately (small, large, hover)
