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

  1. CSS Cards

Author

  • Trần Trí Thạnh

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

Author

  • Visnu Ravichandran

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

Author

  • Brian Haferkamp

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

Author

  • Alexandra Kudryavtseva

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

Author

  • Adam Kuhn

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

Author

  • Abdul-malik Mustapha

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

Author

  • Vincent Van Goggles

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

Author

  • Vladimir

Made with

  • HTML / CSS (Sass) / JS (Babel)

About a code

Blog Preview Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Zed Dash

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

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Splitting.js Card

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js

Author

  • Tobias Glaus

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: -

Author

  • Filipe Martins

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: -

Author

  • Aaron Griffis

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: -

Author

  • Zach

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: -

Author

  • Julie Park

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

Author

  • Andrew Canham

Made with

  • HTML / CSS (Less) / JS

About a code

Spread Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Taylor

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: -

Author

  • Nathan Taylor

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: -

Author

  • Kitsune

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: -

Author

  • m

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: -

Author

  • Tobias Glaus

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: -

Author

  • Dan

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Video Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Brandon Ward

Made with

  • HTML / CSS (SCSS) / JS

About a code

Card Stack Tutorial Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Gabrielle Wee

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: -

Author

  • Trevor L.J.M. McIntire

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: -

Author

  • XiChen

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

Author

  • Kitsune

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: -

Author

  • Steve Gardner

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

Author

  • Andre Madarang

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

Author

  • Fabio Ottaviani

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

Author

  • Jack Thomson

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

Author

  • Alban Bujupaj

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: -

Author

  • Andy Tran

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: -

Author

  • Carlos Sánchez Riballo

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: -

Author

  • David Foliti

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

Author

  • Jesse Couch

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: -

Author

  • Andy Tran

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

Author

  • Ettrics

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

Author

  • Virgil Pana

Made with

  • HTML / CSS / JS

About a code

Product Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Keith Pickering

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: -

Author

  • Jesse Couch

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

Author

  • Cole Bemis

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: -

Author

  • Jon Beebe

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: -