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

Click to flip
  • 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: -