Collection
Post cover

Best 59 jQuery Cards

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

Item Start Video

Author: Wikyware Net

Links: demo and code

Made with: HTML / CSS / JS

Item start video on hover with jQuery.

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

Responsive: yes

Post cover

3D Card

Author: LongKing

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Click Responsive Shuffling Tarot Cards

Author: Colleen Lohr

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Dependencies: tweenmax.js, easepack.js, cssplugin.js

3D Card Profile SVG

Author: @BrawadaCom

Links: demo and code

Made with: HTML (Slim) / CSS (Sass) / JS

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

Responsive: yes

UI Media Card

Author: Trần Trí Thạnh

Links: demo and code

Made with: HTML / CSS / JS

UI media card with jQuery.

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

Dependencies: font-awesome.css

Product Card UI

Author: Sanjaya

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Featured Movies Card

Author: vinay patel

Links: demo and code

Made with: HTML / CSS / JS

Featured movies card with little jQuery.

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

Responsive: yes

Dependencies: font-awesome.css

Smart Card Holder

Author: Visnu Ravichandran

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: gsap.js

jQuery Animation: Card to Full Screen

Author: Brian Haferkamp

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS

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

Cards with Folded Corner

Author: Alexandra Kudryavtseva

Links: demo and code

Made with: HTML / CSS / JS

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

Dependencies: font-awesome.css

Friend Collector Cards

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

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

Dependencies: faker.js

Illustrative Stacked Cards

Author: Abdul-malik Mustapha

Links: demo and code

Made with: HTML / CSS (Less) / JS

Stacked card with navigation in jQuery.

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

Dependencies: animate.css

Pokemon Card Holo Effect

Author: Simon Goellner

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Using color dodge blend mode on some backgrounds to create a "holographic" effect any Pokemon TCG collector will know!

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

Responsive: yes

Pink Without Floyd Card

Author: guy

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: font-awesome.css, slick.css, slick.js

Interactive UI Cards

Author: Vincent Van Goggles

Links: demo and code

Made with: HTML / CSS / JS

Cool UI cards that you can swipe through.

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

Dependencies: swiper.css, swiper.jquery.js

Blog Preview Modal

Author: Vladimir

Links: demo and code

Made with: HTML / CSS (Sass) / JS (Babel)

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

Responsive: yes

Expanding Flex Cards

Author: Zed Dash

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Expanding flex cards in jQuery.

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

Dependencies: font-awesome.css

Splitting.js Card

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: splitting.js

Material Card

Author: Jonah Wichtrup

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: material-icons.css

Figure & Figcaption Card

Author: Tobias Glaus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Figure & Figcaption card with jQuery.

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

Cards

Author: Filipe Martins

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Animated 3D Playing Card with Randomization

Author: Aaron Griffis

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Responsive: yes

Hoverable Expandable Blog Cards

Author: Zach

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Emulate iPhore appstore card tap zooming and expanding.

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

Responsive: yes

User Profile

Author: Julie Park

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

User profile design with hamburger drop down menu animation.

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

Dependencies: font-awesome.css

Spread Cards

Author: Andrew Canham

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Responsive: yes

Contact Me Card Animation

Author: Aaron Taylor

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Responsive: yes

Info Cards

Author: Nathan Taylor

Links: demo and code, dribbble shot

Made with: HTML (Pug) / CSS (SCSS) / JS (Babel)

Animated info cards in jQuery.

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

Responsive: yes

Planets App SVG Animation

Author: Kitsune

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Clicking on a planet reveals more information about that planet.

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

3D Product Card

Author: miguel96

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

3D product card in jQuery.

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

Unfolding Card

Author: Tobias Glaus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Unfolding card in jQuery.

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

Animated Video Grid

Author: Dan

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Material Cards FlexBox

Author: diego valobra

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Card Stack Tutorial Animation

Author: Brandon Ward

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Post cover

Material Design Product Card

Author: loiff

Links: demo and code

Made with: HTML / CSS / JS

Product card component based on jQuery and Materialize.css. The component has buttons with simple engaging icons.

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

Responsive: yes

Dependencies: materialize.css, materialize.js

jQuery User Profile

Author: Gabrielle Wee

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Fully responsive and animated user profile modal card.

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

Responsive: yes

Material Card Transformation

Author: Zach Curry

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Dependencies: d3.js

Environment Impact Cards

Author: Anton Mudrenok

Links: demo and code, dribbble

Made with: HTML / CSS (SCSS) / JS (Babel)

SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.

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

Responsive: yes

Dependencies: tweenmax.js, morphsvg.js

Material Design Card Animation

Author: Trevor L.J.M. McIntire

Links: demo and code

Made with: HTML / CSS / JS

A quick little animation with a material-design card.

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

User Profile

Author: XiChen

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS (CoffeeScript)

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

Dependencies: font-awesome.css

jQuery Article Card UI

Author: Kitsune

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Animated Weather Cards

Author: Steve Gardner

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: tweenmax.js, snap.svg.js

Clash of Clans Cards

Author: Andre Madarang

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

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

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

Seven Summits

Author: Zmey

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Responsive: yes

E-Commerce Shop Card

Author: Fabio Ottaviani; February 25, 2016

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

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

Responsive: no

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

Flexy Product Cards

Author: Jack Thomson

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

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

Card 3D View Parallax

Author: Alban Bujupaj

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Card 3D view parallax in jQuery.

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

Information Card Slider

Author: Andy Tran

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Material Design information card slider with jQuery.

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

3D Perspective Card XY

Author: Carlos Sánchez Riballo

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Used some jQuery to rotate the card on mouse movement.

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

Material Design Responsive Card

Author: David Foliti

Links: demo and code, github page

Made with: HTML / CSS (Less) / JS

Card style based on Google Material color palette.

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

Responsive: yes

Dependencies: font-awesome.css, bootstrap.css

Re-Order Stacked Cards

Author: Jesse Couch

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Just for fun.

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

Article News Card

Author: Andy Tran

Links: demo and code, dribbble shot

Made with: HTML (Pug) / CSS (Less) / JS

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

Responsive: yes

Dependencies: font-awesome.css

Google Now Inspired Flip Cards

Author: Ettrics

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Material Card Opening Effect

Author: Luiz Otávio Carvalho

Links: demo and code, dribbble

Made with: HTML (Slim) / CSS (SCSS) / JS

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

Dependencies: font-awesome.css

Product Card

Author: Virgil Pana

Links: demo and code

Made with: HTML / CSS / JS

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

jQuery Business Card

Author: Keith Pickering

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Save the trees with a digital business card.

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

Responsive: yes

Digital Business Card

Author: Jesse Couch

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: font-awesome.css

jQuery Card Flip

Author: Cole Bemis

Links: demo and code

Made with: HTML / CSS (Stylus) / JS

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

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

jQuery Animated Card Stacks

Author: Chris Hutchinson

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Testing some simple animations to separate stacks of cards.

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

The Scattering

Author: Jon Beebe

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback