168 CSS Cards Plugins

// horizontal flipping cards on CSS .....
Flip Card

Responsive Flip Card display. Day 7 of my React a Day challenge. .....
Flip Card

Responsive half flip card with 3d transform on bootstrap grid .....
Flip Card

Google Now style info cards with CSS card flip animation. .....
Flip Card

Messing around with 3d transforms and delayed transitions. Colours from http://colour.charlottedann.com/ .....
Flip Card

.....
Flip Card

A simple css only flip cards. .....
Flip Card

A simple Flip cards with jQuery! .....
Flip Card

Just a cute little card flipping demo. Not a game yet, but still nice to look. Hover over the cards to see what I mean! .....
Flip Card

.....
Flip Card

.....
Flip Card

.....
Flip Card

.....
Flip Card

.....
Flip Card

POC for a rapid updating dashboard component .....
Flip Card

.....
Flip Card

Flip cards with CSS3 .....
Flip Card

Color-coded delivery-flip-cards with live order tracking. .....
Flip Card

Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state. .....
Weather

Pure CSS3 and HTML5 animated weather notice cards. Original art by Fabrizio Bianchi. .....
Weather

Using pure CSS to create a click-through cards and radio buttons. .....
Radio Button

A card stack UI with swipeable cards. .....
Cards

Responsive credit card validation with card.js. .....
Cards

A simple card carousel snippet. :) .....
Cards

Mobile expanding cards with sports info. .....
Cards

This is a UI concept i have seen before but i felt there was a few things that could be done different. Ao here is my version of a Card Deck style dropdown, using CSS3 transitions and jQuery. .....
Cards

The cards also flip around to show a dynamically generated QR code. UPDATE: This pen now supports all modern browsers including IE 10 and up! .....
Cards

.....
Cards

A simple contact card concept using JQuery. .....
Cards

GitHub Card With ReactJs - Created By Hamed Esmaili .....
Cards

Blog post: http://www.ionicbundle.com/ionic-tinder-cards-2/ .....
Cards

.....
Cards

Material design interface animations inspired on https://dribbble.com/shots/1893589-Material-design-card-animation .....
Cards

Bootstrap cards tutorial for article on blog.alexdevero.com. Code is also available on https://github.com/alexdevero/Card-design-with-Bootstrap-4 .....
Cards

Animated Christmas card .....
Cards

Playing with Google Design card effect. .....
Cards

Flexbox demo to showcase a card module, with equal heights and accommodating elements. Was used as a demo in a Smashing Magazine article, March 2015: http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-ap.....
Cards

Some simple JS to hide a card's body. .....
Cards

Material Cards Design Concept.. for Posts.. No JS, Pure CSS.. with Flexbox .....
Cards

Beautiful animation for profile card design. Hover the ball to see the magic! Inspiration from Material Design by Google. .....
Cards

GitHub User Card Home : https://github.com/c0ncept/github-user-card .....
Cards

Two awesome snippets putted together This is the combination of two awesome snippets : @GGG (http://chat.stackoverflow.com/users/886931/ggg) card set: .....
Cards

An UI for a movie card of Deadpool. Enjoy. .....
Cards

A classic card trick of "guessing" what the user has selected. .....
Cards

Understanding the css 3d card flip. .....
Cards

A simple credit card (looks more or less like Visa). HTML and CSS only. No images. .....
Cards

Jelly Effect in Card concept: http://www.materialup.com/posts/jelly-effect-in-card .....
Cards

Small example about how to align a materialize card (vertical & horizontal) .....
Cards

Position all cards off screen with transform and then return them to their natural positions. .....
Cards

idk expanding card comment thing .....
Cards

Simple profile card example. Inspired by : https://dribbble.com/shots/1554241-Bakery-Website?list=searches&tag=web_site&offset=1 .....
Cards

Working on two javascript plugin . The first one is for the hearthstone card flying effect. The second one is for the mouse move stars on canvas. .....
Cards

Facebook Cards Facebook card featuring my 2016 Workspace! .....
Cards

Custom Bootstrap 4 card. .....
Cards

An update of Unfolding Post. .....
Cards

Small and independent module that is easy to extend and/or customize, written in Sass. It uses BEM methodology to organize the code. .....
Cards

Example of a recipe card Design using css3 and css animation. .....
Cards

This is a simple UI made in pure CSS that demonstrates how to make a card UI for a quiz or a game of cards. You can easily make it responsive and customize it using CSS by setting background images on the front and back faces. .....
Cards

Using CSS3 flexbox to set cards to match height. .....
Cards

3D Card flippers are nothing new, but I found it challenging to make them responsive. I built this using Bootstrap's responsive grid, but I don't see why it wouldn't work with any responsive grid. .....
Cards

A business card concept I created for a little challenge over at http://reddit.com/r/web_design! .....
Cards

You want a card layout for your blog? Then you've come to the wrong place, move along. If you want a spinning collection of card related things then woop woop .....
Cards

Frosted glass effect using CSS3 filter property. The card's title and description slide up on hover, blurring the card's background behind them. .....
Cards

A small app demonstrating the process of fetching data from the GitHub API and displaying a user profile card. .....
Cards

http://media.tumblr.com/tumblr_lry2vgYJB51qe7fo7.gif .....
Cards

Just checking out CodePen API v2 by Nate Wiley. It's pretty cool, I recommend checking it out. http://cpv2api.com/ .....
Cards

A special thank you to Clement Ng for my Dribbble invite. This thank you card was created with code instead of being designed in Photoshop. .....
Cards

A CSS pixel art redux of the original Super Mario Bros 3 mini game. Flip over any two cards and see if they match. Miss three times and it will be marked as an attempt. The fewer attempts you make, the smarter you look to all of .....
Cards

Full css animated playing card. Inspired on https://dribbble.com/shots/728786-Art-Deco-Playing-Cards .....
Cards

CSS-only card selector interface for https://twitter.com/jonikorpi/status/910538054280019973 .....
Cards

Throw to discard the top card on the pile. You can drag to the left or right to see the ones behind. When there are no more left, the cards return. This is just some preliminary work I'm doing along with some Material Design layo.....
Cards

Playing cards tilted and flipped using CSS transforms and transitions. A post with a walkthrough of the code is up on my blog at: https://manjitkarve.com/posts/card-flip-interaction/ .....
Cards

Example of Card Layout using ReactJS and CSS Flex. .....
Cards

Parallax Cards - A slider inspired by a Ali express 7th Anniversary sale By Grapestheme .....
Cards

Inspiration from: https://dribbble.com/shots/2280468-Message-notifications .....
Cards

Creating Tarot cards that flip. .....
Cards

A very basic kanban-style card wall using HTML5's drag and drop. Drag cards between columns, or click to view. .....
Cards

Was this your card? // Try a class of 'spade', 'club', 'diamond', or 'heart' for other aces // Future missions (feel free to fork and help) .....
Cards

This is component for make list/grid for blog or other .....
Cards

Disclaimer: Tested to work in latest Chrome, no guarantees in other browsers. I'm currently experimenting with ways to expand the card metaphor that is rapidly gaining interest in today's UI design landscape. In this experiment, .....
Cards

Doing a quick build of Lukas Bulga's Profile Card: http://dribbble.com/shots/746371-Profile-Menu-Web-App?list=users .....
Cards

Live demo of https://dribbble.com/shots/1733691-Animated-User-Profile-Widget?list=users&offset=6 .....
Cards

A responsive set of cards using flexbox and some basic elements. Useful for social/photo apps, ecommerce, news... .....
Cards

I recently learned a cool magic trick. It's a card trick called "27". I love to perform this trick in front of my friends (irl ;P). .....
Cards

My version of the checkout experience. Displays the order in a receipt form, and asks for payment in a credit card. Check(it)out! .....
Cards

Inspired by a shot on dribbble. I loved the concept of a personal card, and decided to build one. .....
Cards

This is an example for Material Card to blog, personal web, etc.... .....
Cards

.....
Cards

Thinking of a nice logo of a hand of cards with html and css. .....
Cards

Fade in a set of cards in sequence, using Sass to set up the timing offsets. Also a subtle 3d transform, because hey. Why not? .....
Cards

DailyUi#002 - Credit Card Checkout Finally my second daily ui!! I've omit some interaction because is august and I don't have much time to spend, despite this, I hope you like it :P .....
Cards

Interactive business card for the reddit.com/r/web_design July community challenge. Roll over the front see the backside of the card. .....
Cards

clickable cards reveal a hidden menu across the bottom of the screen. .....
Cards

Profile Card CSS .....
Cards

A Little birthday card I hacked together in an afternoon for my sister's birthday. Uses 3D transforms and such, and a bit of shitty JS for opening and closing the card. .....
Cards

Material design card with spinner. .....
Cards

Credit card form .....
Cards

.....
Cards

.....
Cards

Inspired by LinkedIn's profile cards. .....
Cards

A collection of light, dark, master and simple credit card icons in SVG format for e-commerce clients. Vector-based imaging stands out beautifully for responsive code and can be scaled without losing image quality. The SVG Defs f.....
Cards

The popular Card UI is now seen everywhere and for a good cause: It's a very good way to present heterogenous content in a group without overloading the user with information. .....
Cards

Stacked cards which are draggable and can be thrown off the top of the "deck". Looks best on smaller screens, so drag that window! .....
Cards

Trading card Magic the gathering style. .....
Cards

Experiment with material design. Animates the featured image and headline and adds button when hovered. .....
Cards

Create an entry for the weekly #CodepenChallenge, with a neat card redirecting the visitor to an hypothetical blog post. .....
Cards

gradient pattern based on pattern by Kakha Kakhadzen https://dribbble.com/shots/2908379-Pattern-for-Business-Cards .....
Cards

Bio card made with Vue.js consuming data from a Strapi.js API. A sort of personal interpretation of bio.kiwi by @mikker. .....
Cards

Vannila JavaScript Pairs card game .....
Cards

The value of the card gets randomized every time you flip it over. .....
Cards

Envelope and invitation card. .....
Cards

DeAnimate - A jQuery lightweight plugin for Animatio .....
Cards

Envato Remix Challenge - Responsive profile card with beautiful animations. .....
Cards

This card is made with svg and css that for inspiration. Credits: OCR A Std font is available at https://www.fontyukle.net/en/DownLoad-OCR+A+Std.ttf .....
Cards

Nubank Credit Card, using pure css and CSS Variables (Custom Properties) .....
Cards

I needed an interface that generated cards. This was a little proof of concept. .....
Cards

.....
Cards

Credit Card Form for another pen. Click "Visa" to change card type. for http://codepen.io/andytran/pen/rOMPWZ .....
Cards

Simple credit card experiment .....
Cards

Based off the Dribbble shot of Linn Fritz: https://dribbble.com/shots/1528058-Oh-you-credit-card .....
Cards

Drop card A simple interaction that removes a card from its stack .....
Cards

.....
Cards

Change this card to include a picture and information about yourself. When you are done, export it as a gist to your Github account and we will incorporate your card into the class website at dgmd.github.io/people .....
Cards

Simple card concept with photo and comments. Inspired by https://dribbble.com/shots/1093954-Places-comments .....
Cards

Click it!!! .....
Cards

Spent the whole night working on this interactive wallet UI by Paul Flavius Nechita for his Day 23 UI. In this pen you're able to add new cards, as well as filter between each of it. :) .....
Cards

CodePen Challenge June 2018 week one : Cards with The Star Wars API and Vue.js .....
Cards

Simple card design. Make cards can be as simple or complex as you want. They can handle titles, text, images, links, and can be flipped for additional content!! .....
Cards

.....
Cards

Angular Card / List View Toggle .....
Cards

.....
Cards

A 4 column layout that mix and matches different size cards. Mostly just made as a proof of concept for a project I am working on. .....
Cards

Flash cards styled to look like index cards. For each card, a jQuery click event triggers a CSS3-powered flipping animation. Reset button included for restoring the pile. .....
Cards

Birthday card for mom :) .....
Cards

Bootstrap CSS and JS .....
Cards

Not all cards in there, but it gives a clear idea on how to do card flipping in css. Update: Now with flexbox to keep it on the screen. .....
Cards

Isotope demo created for @desandro; coded in 3 hours. View in full-page mode to play! .....
Cards

An interesting way to buy different tickets for your favourite concert. Feel free to do whatever you want with those cards. If you use them in any project please post here the link, I'm very curious to see how you used them. .....
Cards

.....
Cards

A quick css copy of https://www.instagram.com/p/BVEcuWcFKwq/ ... not a 100% percent equal, but it has a working clock. .....
Cards

Occurred to me that rotate + translate + rotate should trivially define a carrousel. Idea is to animate rotation from 0 to 360degrees. Note the zIndex animation to change stack order + negative animation timing start to have all .....
Cards

.....
Cards

clean card hover effect .....
Cards

Example of a team card design only in CSS .....
Cards

From here .....
Cards

3 user profile cards .....
Cards

This card shows an example of a person description card that gives more information when you hover over their name. It uses CSS only .....
Cards

This pen, shows a simple fading in card styled using the Material Design Specification. No special things happening here, just HTML, CSS and jQuery! .....
Cards

Simple card build with ReactJS & MobX and, of course, love. .....
Cards

Horizontal scroll cards inspired by the Spotify app. Load on a mobile device, or use Chrome/Firefox developer tools to emulate a mobile touch device. .....
Cards

.....
Cards

Rotating card with html and css only. no javascript. .....
Cards

This is an example of cards switching places. This could be used as image info in ome kind of portfolio .....
Cards

flippy cards! .....
Cards

Flat pricing card / pricing table item with box shadow and gradient effect. .....
Cards

It's very cool Bateman, but that's nothing... Let's have a little fun, shall we? I challenge you to make your card, and have a little fun. Post it using the tag "cardoff". Nothing like some friendly competition to spark creativit.....
Cards

Flipping credit cards (Font Awesome Icons) using CSS and jQuery. .....
Credit Card Design

.....
Material Design Card

.....
Material Design Card

A card is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject. .....
Material Design Card

Cards inspired by Google's material design. Images change their properties on hover. .....
Material Design Card

.....
Material Design Card

A card element with truncating as well as fixed elements inside. .....
Material Design Card

.....
Material Design Card

.....
Material Design Card

.....
Material Design Card

.....
Material Design Card

The design inspired from ALI AAS, on MaterialUp https://material.uplabs.com/posts/fab-ulous-interface, but animation not same on design. .....
Material Design Card