30+ jQuery Cards - Free Code + Demos
Collection of 30+ jQuery Cards. All items are 100% free and open-source. The list also includes 3d jquery cards, animated, flip, exp, ing, and stacked.
1. Friend Collector
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: August 5, 2019
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: codepenchallenge, cpc-fork-card, cards, trade
2. Illustrative Stacked Cards
Stacked card with navigation!
Author: Abdul-malik Mustapha (maleekcodes)
Links: Source Code / Demo
Created on: July 18, 2019
Made with: HTML, Less, JS
Tags: cards, stacked cards, card
3. Interactive UI Cards
Cool UI cards that you can swipe through
Author: Vincent Van Goggles (Gogh)
Links: Source Code / Demo
Created on: February 27, 2019
Made with: HTML, CSS, JS
Tags: swiper, ui card, swipe through, card layout, i should be working but i'm actually on codepen messing around
4. Blog Preview Modal
Author: Vladimir (fdsea)
Links: Source Code / Demo
Created on: February 6, 2019
Made with: HTML, Sass, Babel
5. Expanding Flex Cards
Author: Zed Dash (z-)
Links: Source Code / Demo
Created on: September 28, 2018
Made with: HTML, SCSS, JS
Tags: css, css-variables, flex-box, card, image
6. Splitting.js Card
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: September 4, 2018
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
7. Vue Carousel + Bootstrap Vue Cards
Using Vue.Js, Vue Carouse by ssense, and Bootstrap Vue
Author: David Hutto (David_Hutt)
Links: Source Code / Demo
Created on: June 11, 2019
Made with: HTML, CSS, Babel
Tags: card, carousel, vue, bootstrap, vue-carousel
8. Animated 3D Playing Card With Randomization
The value of the card gets randomized every time you flip it over.
Author: Aaron Griffis (aarongriffis)
Links: Source Code / Demo
Created on: June 7, 2018
Made with: HTML, SCSS, JS
Tags: card, 3d, responsive, random, svg
9. Hoverable Expandable Blog Cards
Emulate iPhore appstore card tap zooming and expanding
Author: Zach (hirodashi)
Links: Source Code / Demo
Created on: May 19, 2018
Made with: HTML, SCSS, JS
Tags: iphone, jquery, scss, css
10. User Profile Card JQuery
User profile design with hamburger drop down menu animation.
Author: Julie Park (juliepark)
Links: Source Code / Demo
Created on: April 10, 2018
Made with: HTML, SCSS, JS
Tags: dailyui, daily ui 006, user-profile, menu-animation, ux-design
11. Spread Cards
Author: Andrew Canham (candroo)
Links: Source Code / Demo
Created on: September 4, 2017
Made with: HTML, Less, JS
12. Info Cards
Author: Nathan Taylor (nathantaylor)
Created on: July 7, 2017
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: ui, animation, css, motion, design
13. 3D Product Card
Author: m (miguel96)
Links: Source Code / Demo
Created on: July 3, 2017
Made with: HTML, SCSS, Babel
14. Unfolding Card
Author: Tobias Glaus (tobiasglaus)
Links: Source Code / Demo
Created on: June 23, 2017
Made with: HTML, SCSS, JS
15. Material Design Card Animation
A quick little animation with a material-design card.
Author: Trevor L.J.M. McIntire (uplusion23)
Links: Source Code / Demo
Created on: November 10, 2016
Made with: HTML, CSS, JS
Tags: material, card, material design, animation
16. 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.
Author: Steve Gardner (ste-vg)
Links: Source Code / Demo
Created on: August 22, 2016
Made with: HTML, SCSS, JS
Tags: snap-svg, tweenmax, svg, weather, animation
17. Card 3D View Parallax
Author: Alban Bujupaj (abujupaj)
Links: Source Code / Demo
Created on: November 30, 2015
Made with: HTML, SCSS, JS
Tags: minimal, card, awesome, mousemove, 3d
18. Material-cards
Card style based on Google Material color palette
Author: David Foliti (marlenesco)
Links: Source Code / Demo, Github Page
Created on: July 21, 2015
Made with: HTML, Less, JS
Tags: google material, material color, responsive, bootstrap
19. Re-order Stacked Cards
Just for fun.
Author: Jesse Couch (designcouch)
Links: Source Code / Demo
Created on: June 29, 2015
Made with: HTML, SCSS, JS
20. The Scattering
Stacked Cards with randomized rotation. Renders a slightly scattered stack of cards with randomized rotation and transform-origin on each card.
Author: Jon Beebe (somethingkindawierd)
Links: Source Code / Demo
Created on: March 31, 2014
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: scss, css, ui
21. Product Card
Author: Oscar (olhilton)
Links: Source Code / Demo
Created on: August 15, 2016
Made with: HTML, SCSS, JS
22. Business Card Sample Using JQuery Flip
Business Card Sample Using jQuery Flip
Author: Michael Stabile (mikestabile)
Links: Source Code / Demo
Created on: February 21, 2016
Made with: HTML, SCSS, JS
Tags: business-card, business, jquery, jquery flip, card
23. UI: Profile Card [CSS3, JQuery]
This flexbox-based profile card can display a lot of information without overloading users with it. Subtle animations make this thing come alive.
Author: Jasper (jasper)
Links: Source Code / Demo
Created on: April 11, 2016
Made with: HTML, SCSS, JS
Tags: flexbox, profile, card, ui
24. Featured-Movies-Card
Author: vinay patel (patelvinay)
Links: Source Code / Demo
Created on: September 4, 2020
Made with: HTML, CSS, JS
Tags: cards
25. Delivery Card Animation
Source gif by Ramotion - https://dribbble.com/shots/2121350-Delivery-Card Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it's not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcodin...Read More
Author: Nikolay Talanov (suez)
Links: Source Code / Demo
Created on: August 22, 2015
Made with: HTML, SCSS, JS
Tags: gif to demo, css-animation, 3d-css, flip-animation
26. Animated Card Stacks
Testing some simple animations to separate stacks of cards
Author: Chris Hutchinson (chrishutchinson)
Links: Source Code / Demo
Created on: May 24, 2014
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, cards, css, scss, jade
27. Netflix Cards Hover Effect
Netflix hover effect as close as possible! You can change the number of elements per strip (as long as they are always the same for each)
Author: Simone Giannangeli (sgiannangeli)
Links: Source Code / Demo
Created on: January 23, 2020
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: netflix, carousel, hover, cards, animation
28. Simple CSS & JQuery Parallax Hover
Create an amazing 3D parallax hover effect on your content !
Author: Alexandre Buffet 😎 (alexandrebuffet)
Links: Source Code / Demo
Created on: January 29, 2017
Made with: HTML, Less, JS
Tags: parallax, hover, effect, 3d, cards
29. Vanilla JS Parallax Depth Cards
Author: Rudransh (rudyt7)
Links: Source Code / Demo
Created on: February 12, 2020
Made with: HTML, CSS, JS
Tags: cards, parallax, vanilla, javascript, depth
More Awesome Lists:
Share: