Components
Basic Card Components
Simple Basic Card
A clean and minimal card design that focuses on presenting content in the most straightforward way. Perfect for dashboards or any interface where simplicity is key.
Outlined Basic Card
A basic card with distinct border styling that helps it stand out from the page. Ideal for highlighting important information or creating visual separation between content sections.
Additional content can be placed here.
Shadowed Basic Card
A card with enhanced shadow effects that create depth and elevation. The shadow subtly increases on hover, providing interactive feedback. Perfect for clickable cards or important UI elements.
This card stands out with its prominent shadow.
Image Card Components
Top Image Card
A clean and modern card design featuring an image placeholder at the top. Perfect for product listings, blog posts, or any content where the visual element should be the first focus of attention.
Image Card with Overlay
An immersive card design with text overlaid on a gradient background. Ideal for featured content, hero sections, or anywhere you want to create visual impact while maintaining text legibility.
Side Image Card
A versatile card layout with a side-by-side image and content arrangement. Perfect for media-rich content where you want to maintain a balanced visual hierarchy between image and text.
Event Card Components
Standard Event Card
A clean and simple event card design featuring a date badge and attendee count. Perfect for displaying upcoming events in a straightforward manner.
Featured Event Card
A prominent event card with accent styling and multiple badges. Ideal for highlighting special events or important announcements in your calendar.
Compact Event Card
A space-efficient event card design that maintains readability while displaying all essential information. Perfect for event lists or calendar views where space is limited.
Workshop Series
Introduction to UI Design Principles
Social Card Components
Social Media Post Card
A classic social media post layout featuring user information, post content, and engagement metrics. Perfect for social feeds, community posts, or any content that requires user interaction.
Just shared my latest project! Check out the link in my bio for more details. #webdev #design
Image Social Card
An enhanced social card featuring a prominent image display along with user content. Ideal for photo-sharing platforms, portfolio showcases, or any image-centric social interactions.
Captured this amazing moment during my trip. What do you think?
Compact Social Card
A space-efficient social card design that maintains all essential elements while reducing vertical space. Perfect for dense feeds, notifications, or anywhere where space optimization is crucial.
Alex Johnson
1 hour ago
Quick update on the project: we are making great progress!
Feature Card Components
Gradient Feature Card
Eye-catching gradient background feature card with smooth color transitions. Perfect for highlighting premium features, special offers, or important announcements.
Icon Feature Card
A visually appealing feature card with a prominent icon and detailed feature list. Ideal for product features, service highlights, or key benefits sections.
- Real-time data processing
- Custom report builder
Dark Feature Card
A sophisticated dark-themed feature card with badge and icon elements. Perfect for dark mode interfaces, premium features, or modern tech-focused content presentation.
Protect your eyes and save battery with automatic dark mode detection.
Pricing Card Components
Basic Pricing Card
A clean and simple pricing card layout that clearly presents the essential plan information. Perfect for straightforward pricing tiers with basic features.
- Up to 5 team members
- 20GB storage
- Basic support
Premium Pricing Card
A premium pricing card with a gradient background and highlighted features. Ideal for showcasing your most valuable plan with exclusive features.
- Unlimited team members
- 500GB storage
- 24/7 priority support
- Advanced analytics
Comparison Pricing Card
A detailed pricing card that clearly shows included and excluded features. Perfect for helping users make informed decisions about different plan tiers.
Included features:
- Up to 20 team members
- 100GB storage
- Priority email support
Not included:
- 24/7 phone support
- Custom integrations
Login Card Components
Simple Login
A clean and minimal login interface with essential fields. Perfect for straightforward authentication needs.
Secure login powered by our platform
Social Login
A modern login card with social authentication options. Ideal for applications supporting multiple login methods.
Enterprise Login
A professional login interface with enhanced security features. Perfect for enterprise applications and business platforms.
Protected by enterprise-grade security
Profile Card Components
Modern Profile Card
A sleek and modern profile card with verification badge and key information display. Perfect for professional networking platforms.
Portfolio Profile Card
An elegant profile card design focusing on portfolio showcase and quick contact options. Ideal for creative professionals and freelancers.
Minimal Profile Card
A minimalist profile card with essential information and clean typography. Perfect for dashboards and member directories.
Team Card Components
Basic Team Card
A clean and simple team member card with social media links and basic information.
Hover Effect Team Card
An interactive card that reveals additional information about the team member on hover.
Modern Team Card
A modern layout with skill tags and a horizontal design for better space utilization.
Testimonial Card Components
Basic Testimonial Card
A clean and centered testimonial card with profile image and rating.
The product exceeded my expectations. The team was incredibly responsive and the results were exactly what we needed. Highly recommended!
Modern Quote Testimonial Card
A modern left-aligned design with decorative quote icon and compact layout.
"Their attention to detail and commitment to quality is unmatched. The project was delivered on time and the results were outstanding."
Featured Testimonial Card
A highlighted testimonial card with inverted colors and premium styling.
"Working with this team has been transformative for our business. Their innovative solutions and dedicated support have helped us achieve our goals faster than we thought possible."
Blog Card Components
Basic Blog Card
A clean and simple blog card with image, category badge, and author info.
Modern Blog Card
A modern design with hover effects, overlaid category badge, and compact author info.
Featured Blog Card
A highlighted blog card with inverted colors and premium styling for featured posts.
Mike Johnson
Lead Developer