A collection of hand-picked jQuery card code examples: 3d, animated, flip, expanding, stacked, unfolding. Update of October 2019 collection. 23 new examples.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
UI Media Card
UI media card with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Smart Card Holder
You probably have a credit card or two. And maybe even from different banks. Well, I think it would be cool to have one app with all your cards. Perhaps with basic functionality like account balance and money transfer. Not sure if one bank would be able to integrate with another, but guess we'll see, right?
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
jQuery Animation: Card to Full Screen
Click each image to open using a nice mobile app style animation. Pinch to close each article and return to the image list.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, jquery.touchswipe.js
Links
Made with
- HTML / CSS / JS
About a code
Cards with Folded Corner
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Friend Collector Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: faker.js
Links
Made with
- HTML / CSS (Less) / JS
About a code
Illustrative Stacked Cards
Stacked card with navigation in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: animate.css
Links
Made with
- HTML / CSS / JS
About a code
Interactive UI Cards
Cool UI cards that you can swipe through.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: swiper.css, swiper.jquery.js
Links
Made with
- HTML / CSS (Sass) / JS (Babel)
About a code
Blog Preview Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Expanding Flex Cards
Expanding flex cards in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Splitting.js Card
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Figure & Figcaption Card
Figure & Figcaption card with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Cards
This is the movie cards with full view of the trailer and infos about the series.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated 3D Playing Card with Randomization
The value of the card gets randomized every time you flip it over.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Hoverable Expandable Blog Cards
Emulate iPhore appstore card tap zooming and expanding.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
User Profile
User profile design with hamburger drop down menu animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (Less) / JS
About a code
Spread Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Contact Me Card Animation
Click on the "Contact Me" button to see it in action.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS (Babel)
About a code
Info Cards
Animated info cards in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Planets App SVG Animation
Clicking on a planet reveals more information about that planet.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
3D Product Card
3D product card in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Unfolding Card
Unfolding card in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated Video Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card Stack Tutorial Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
jQuery User Profile
Fully responsive and animated user profile modal card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Material Design Card Animation
A quick little animation with a material-design card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass) / JS (CoffeeScript)
About a code
User Profile
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
jQuery Article Card UI
This example is an article card UI aimed more at mobile users although this could probably work for an article layout, click on the excerpt to view a bit more of the content and then you're presented with the option to read the full article. The animation could do with some work but I like the outcome.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated Weather Cards
Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tweenmax.js, snap.svg.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Clash of Clans Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: slick.css, slick-theme.css, slick.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
E-Commerce Shop Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: slick.css, slick-theme.css, slick.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Flexy Product Cards
This example was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card 3D View Parallax
Card 3D view parallax in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Information Card Slider
Material Design information card slider with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
3D Perspective Card XY
Used some jQuery to rotate the card on mouse movement.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Less) / JS
About a code
Material Design Responsive Card
Card style based on Google Material color palette.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, bootstrap.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Re-Order Stacked Cards
Just for fun.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less) / JS
About a code
Article News Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Product Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
jQuery Business Card
Save the trees with a digital business card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Digital Business Card
The background image uses a CSS filter, so it's the same image that is behind the avatar. Managed to get rid of the white edges that come with this by offsetting the position and adding to the width.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (Stylus) / JS
About a code
jQuery Card Flip
Simple card flip using CSS 3D transforms, transitions and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
The Scattering
Stacked cards with randomized rotation. Renders a slightly scattered stack of cards with randomized rotation and transform-origin on each card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -