A collection of hand-picked jQuery card code examples: 3d, animated, flip, expanding, stacked, unfolding. Update of October 2019 collection. 23 new examples.

  1. CSS Cards

Creator

  • Trần Trí Thạnh

Programming language

  • HTML / CSS / JS

Information a code

UI Media Card

UI media card with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Visnu Ravichandran

Programming language

  • HTML / CSS (SCSS) / JS

Information 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?

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Creator

  • Brian Haferkamp

Programming language

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

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css, jquery.touchswipe.js

Creator

  • Alexandra Kudryavtseva

Programming language

  • HTML / CSS / JS

Information a code

Cards with Folded Corner

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Adam Kuhn

Programming language

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

Information a code

Friend Collector Cards

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: faker.js

Creator

  • Abdul-malik Mustapha

Programming language

  • HTML / CSS (Less) / JS

Information a code

Illustrative Stacked Cards

Stacked card with navigation in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: animate.css

Creator

  • Vincent Van Goggles

Programming language

  • HTML / CSS / JS

Information a code

Interactive UI Cards

Cool UI cards that you can swipe through.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: swiper.css, swiper.jquery.js

Creator

  • Vladimir

Programming language

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

Information a code

Blog Preview Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Zed Dash

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Expanding Flex Cards

Expanding flex cards in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Adam Kuhn

Programming language

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

Information a code

Splitting.js Card

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js

Creator

  • Tobias Glaus

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Figure & Figcaption Card

Figure & Figcaption card with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Filipe Martins

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Cards

This is the movie cards with full view of the trailer and infos about the series.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Aaron Griffis

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Animated 3D Playing Card with Randomization

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Zach

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Hoverable Expandable Blog Cards

Emulate iPhore appstore card tap zooming and expanding.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Julie Park

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

User Profile

User profile design with hamburger drop down menu animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Andrew Canham

Programming language

  • HTML / CSS (Less) / JS

Information a code

Spread Cards

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Aaron Taylor

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Contact Me Card Animation

Click on the “Contact Me” button to see it in action.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Nathan Taylor

Programming language

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

Information a code

Info Cards

Animated info cards in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Kitsune

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Planets App SVG Animation

Clicking on a planet reveals more information about that planet.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • m

Programming language

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

Information a code

3D Product Card

3D product card in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Tobias Glaus

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Unfolding Card

Unfolding card in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Dan

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Animated Video Grid

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Brandon Ward

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Card Stack Tutorial Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Gabrielle Wee

Programming language

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

Information a code

jQuery User Profile

Fully responsive and animated user profile modal card.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Trevor L.J.M. McIntire

Programming language

  • HTML / CSS / JS

Information a code

Material Design Card Animation

A quick little animation with a material-design card.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • XiChen

Programming language

  • HTML (Pug) / CSS (Sass) / JS (CoffeeScript)

Information a code

User Profile

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Kitsune

Programming language

  • HTML / CSS (SCSS) / JS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Steve Gardner

Programming language

  • HTML / CSS (SCSS) / JS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js, snap.svg.js

Creator

  • Andre Madarang

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Clash of Clans Cards

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: slick.css, slick-theme.css, slick.js

Creator

  • Fabio Ottaviani

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

E-Commerce Shop Card

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: slick.css, slick-theme.css, slick.js

Creator

  • Jack Thomson

Programming language

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

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Alban Bujupaj

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Card 3D View Parallax

Card 3D view parallax in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Andy Tran

Programming language

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

Information a code

Information Card Slider

Material Design information card slider with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Carlos Sánchez Riballo

Programming language

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

Information a code

3D Perspective Card XY

Used some jQuery to rotate the card on mouse movement.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • David Foliti

Programming language

  • HTML / CSS (Less) / JS

Information a code

Material Design Responsive Card

Card style based on Google Material color palette.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, bootstrap.css

Creator

  • Jesse Couch

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Re-Order Stacked Cards

Just for fun.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Andy Tran

Programming language

  • HTML (Pug) / CSS (Less) / JS

Information a code

Article News Card

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Ettrics

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Google Now Inspired Flip Cards

Google Now style info cards with CSS card flip animation and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Virgil Pana

Programming language

  • HTML / CSS / JS

Information a code

Product Card

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Keith Pickering

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

jQuery Business Card

Save the trees with a digital business card.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jesse Couch

Programming language

  • HTML / CSS (SCSS) / JS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Cole Bemis

Programming language

  • HTML / CSS (Stylus) / JS

Information a code

jQuery Card Flip

Simple card flip using CSS 3D transforms, transitions and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Jon Beebe

Programming language

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

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: