Music Player Card
Dark music player card with a spinning vinyl cover, seek bar, play, skip, shuffle and repeat controls, volume slider and a clickable playlist.
Tag: card
Components tagged with "card".
30 component(s)
Weather Card with Forecast
Sky-blue weather card with a CSS-drawn sun and clouds, current conditions, quick stats, a 5-day forecast with range bars and a Celsius/Fahrenheit switch.
Pricing Cards with Hover
Three pure CSS pricing cards with hover lift and a featured plan that has a spinning conic-gradient border, glow and Most popular badge.
Product Card with Quick Actions
Responsive product card grid where hover or focus reveals wishlist, quick view and add-to-cart actions, with star ratings and a native quick view dialog.
Social Share Buttons
Pure CSS social share card with brand-colored X, Facebook and LinkedIn buttons, a copy-link field with clipboard feedback and a native share fallback.
Neon Glow Profile Card
Dark profile card with an animated neon conic-gradient border, soft glow, stats, skill tags and a Follow toggle, built with pure CSS and vanilla JS.
Scroll-Snap Testimonial Slider
Horizontally scrolling testimonial cards using CSS scroll snap, with star ratings, avatars and accessible previous and next buttons.
Pricing Cards with Billing Toggle
Bootstrap 5 pricing cards with a Monthly / Annual segmented switch that updates prices, savings and yearly totals, plus a highlighted featured plan.
Social Media Post Card
Dark Bootstrap 5 social post card with photo, double-tap like, save, native share with copy-link fallback and an inline comment thread.
Product Listing Grid
Responsive Bootstrap 5 product grid with sale, new, bestseller and sold-out badges, color swatches, wishlist buttons, sorting and client-side pagination.
KPI Cards with Progress
Dark Bootstrap 5 KPI cards with trend badges, goal progress bars and a Month, Quarter and Year switch for admin and sales dashboards.
Profile Card with Stats
Bootstrap 5 user profile card with gradient cover, initials avatar, animated stat counters, follow toggle, message and copy-link buttons.
Card with Image Overlay
Bootstrap 5 image cards with text overlaid on photos, a readability gradient, category badges, save buttons and a featured layout.
Team Cards with Hover Info
Bootstrap 5 team section with portrait cards that reveal a bio and social links on hover or keyboard focus. Pure CSS, no JavaScript.
Featured Post with Sidebar List
Bootstrap 5 blog section with a large featured article card and a tabbed sidebar of recent and popular posts.
Contact Section with Details
Bootstrap 5 contact section with address, phone and email cards, copy buttons and a CSS map placeholder with opening hours.
Product Card with Color Options
Tailwind CSS product card with live-recoloring color swatches, a size selector with sold-out state, wishlist toggle and add to bag button.
Order Summary with Coupon
Tailwind CSS checkout order summary card with a discount code field, live totals, tax and a free shipping progress bar.
Skeleton Card Loader
Tailwind CSS skeleton loaders for an article card grid and a list, with pulse or shimmer animation that swaps to real content once loaded.
Rating Summary with Bars
Tailwind CSS review summary with an average score, partial star fill and clickable rating distribution bars that filter reviews.
Stat Cards with Trend
Tailwind CSS KPI stat cards with change percentage pills and animated SVG sparklines generated from a data attribute.
Radio Card Selector
Tailwind CSS plan picker that turns native radio inputs into selectable pricing cards with a check indicator, focus ring and live summary.
Contact Form Card
Tailwind CSS contact form card with a topic select, live character counter and meter, inline validation and a simulated sending state.
Profile Card with Cover
Tailwind CSS profile card with a gradient cover, overlapping avatar, verified badge, bio, skill chips, stats and an accessible follow toggle.