70 CSS Cards

May 22, 2017

Collection of free HTML and CSS cards: blog, business, e-commerce, flip, mobile, profile, recipe, stack and etc. Demo and download code (*zip).

Table Of Contents

  1. Blog Cards
  2. Business Cards
  3. Card Grids
  4. Card Sliders
  5. Eccomerce Cards
  6. Flip Cards
  7. Hover Effects For Cards
  8. Mobile Cards
  9. Movie Cards
  10. Profile Cards
  11. Recipe Cards
  12. Stacked Cards

Blog Cards

Demo Image: Blog Card
Demo Image: Blog Card

Blog Card

Blog card with HTML and CSS.
Made by IMarty
January 30, 2017

Demo Image: CSS News Cards
Demo Image: CSS News Cards

CSS News Cards

Pure CSS news cards with revealing content on hover.
Made by Aleksandar Čugurović
January 14, 2017

Demo Image: Blog Post Item
Demo Image: Blog Post Item

Blog Post Item

Post preview with CSS animations and SVG icon sprite.
Made by Nodws
September 25, 2016

Demo Image: Article News Card
Demo Image: Article News Card

Article News Card

HTML and CSS article news card designed by JustinKwak.
Made by Andy Tran
June 19, 2016

Demo Image: Blog Cards
Demo Image: Blog Cards

Blog Cards

A very minimal responsive blog card design.
Made by Chyno Deluxe
April 18, 2016

Demo Image: Responsive Company Cards
Demo Image: Responsive Company Cards

Responsive Company Cards

Card design and switch view.
Made by Pham Mikun
November 1, 2015

Demo Image: Blog Card
Demo Image: Blog Card

Blog Card

Blog card with hover state.
Made by szpakoli
March 4, 2015

Demo Image: Blog Entry Layouts
Demo Image: Blog Entry Layouts

Blog Entry Layouts

Blog entry layouts in HTML and CSS.
Made by Russ Beye
December 20, 2014

Business Cards

Demo Image: Business Card
Demo Image: Business Card

Business Card

HTML, CSS and JS business card.
Made by Lubos
March 13, 2017

Demo Image: Business Card
Demo Image: Business Card

Business Card

Business card with HTML and CSS.
Made by Zach Saucier
September 28, 2016

Demo Image: 3D Flip Business Card
Demo Image: 3D Flip Business Card

3D Flip Business Card

3D flip business card with HTML/CSS.
Made by Elena Nazarova
August 29, 2016

Demo Image: Digital Business Card
Demo Image: Digital Business Card

Digital Business Card

Digital business card with HTML, CSS and JavaScript.
Made by Will Johnson
February 21, 2016

Demo Image: CSS Business Card
Demo Image: CSS Business Card

CSS Business Card

The physical world is so last year. Save the trees with a digital business card.
Made by Keith Pickering
January 8, 2016

Demo Image: Flippable Online Business Card
Demo Image: Flippable Online Business Card

Flippable Online Business Card

Flippable online business card in HTML and CSS.
Made by Petrus Rex
October 30, 2015

Demo Image: CSS3 Business Card
Demo Image: CSS3 Business Card

CSS3 Business Card

Flippable CSS3 business card.
Made by Mark Murray
October 16, 2015

Demo Image: CSS Business Card
Demo Image: CSS Business Card

CSS Business Card

This pen is sketch for a digital business card.
Made by jasper
September 8, 2014

Card Grids

Demo Image: 3D Fold Out Reveal
Demo Image: 3D Fold Out Reveal

3D Fold Out Reveal

Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.
Made by Andrew Canham
November 8, 2016

Demo Image: Material Design - Responsive Card
Demo Image: Material Design - Responsive Card

Material Design - Responsive Card

Responsive material card based on Google material color palette in a Bootstrap grid.
Made by David Foliti
October 21, 2016

Demo Image: Flexbox Card Grid
Demo Image: Flexbox Card Grid

Flexbox Card Grid

Quick prototype of equal height cards using flexbox grid layout. Also demonstrates the use of CSS aspect ratios (check out the images) and CSS filters.
Made by Craig Anthony
October 21, 2016

Demo Image: Expanding Card Grid With Flexbox
Demo Image: Expanding Card Grid With Flexbox

Expanding Card Grid With Flexbox

Inspired by the Google image gallery, card grid with expanding sections.
Made by Naila Ahmad
January 12, 2016

Demo Image: Multi-Height Grid Layout
Demo Image: Multi-Height Grid Layout

Multi-Height Grid Layout

A grid that is compatible with multi-height content.
Made by Cliff Pyles
December 11, 2015

Card Sliders

Demo Image: Clash Of Clans Cards
Demo Image: Clash Of Clans Cards

Clash Of Clans Cards

Clash Of Clans cards in HTML and CSS.
Made by Andre Madarang
May 19, 2016

Demo Image: Information Card Slider
Demo Image: Information Card Slider

Information Card Slider

HTML/CSS/JS information card slider.
Made by Andy Tran
November 23, 2015

Eccomerce Cards

Demo Image: Flipping Product Card
Demo Image: Flipping Product Card

Flipping Product Card

HTML/CSS/JS flipping product card.
Made by Jhonny Gil
March 21, 2017

Demo Image: UI Design - Product Card
Demo Image: UI Design - Product Card

UI Design - Product Card

HTML & CSS UI design product card.
Made by CodeFrog
March 21, 2017

Demo Image: Product Card
Demo Image: Product Card

Product Card

HTML, CSS and JavaScript product card.
Made by Oscar
February 23, 2017

Demo Image: E-Commerce Shop (Single Item)
Demo Image: E-Commerce Shop (Single Item)

E-Commerce Shop (Single Item)

E-Commerce shop (single item) with HTML, CSS and JavaScript.
Made by Fabio Ottaviani
February 21, 2017

Demo Image: Product Card
Demo Image: Product Card

Product Card

Product card in HTML and CSS.
Made by Alexandra K
October 15, 2016

Demo Image: Product Card
Demo Image: Product Card

Product Card

HTML, CSS and JavaScript product card.
Made by Jonathan Obino
February 1, 2016

Demo Image: Flexy Product Cards
Demo Image: Flexy Product Cards

Flexy Product Cards

This pen was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation.
Made by Jack Thomson
January 18, 2016

Demo Image: Product Page
Demo Image: Product Page

HTML and CSS Product Page

Responsive version of a product page with elements that overhang the cards they’re on.
Made by Chase Marlow
November 25, 2015

Demo Image: Product Card
Demo Image: Product Card

Product Card

Product card with HTML, CSS and JavaScript.
Made by Virgil Pana
March 10, 2015

Flip Cards

Demo Image: 3D Flipping Cards
Demo Image: 3D Flipping Cards

3D Flipping Cards

Just a cute little card flipping demo.
Made by Rita Bradley
May 4, 2017

Demo Image: Flip Animation
Demo Image: Flip Animation

Flip Animation

CSS flip animation for card.
Made by Eina O
April 18, 2017

Demo Image: React Flipping Card
Demo Image: React Flipping Card

React Flipping Card

Simple React flipping card.
Made by Alex Devero
January 9, 2017

Demo Image: Flipping Card
Demo Image: Flipping Card

Flipping Card

Flipping card with HTML, CSS and JavaScript.
Made by Sergey Nikishkin
December 29, 2016

Demo Image: Realistic 3D Image Flip Card
Demo Image: Realistic 3D Image Flip Card

Realistic 3D Image Flip Card

Realistic 3D image flip box flip card Kallyas WordPress theme.
Made by Nicola Mihaita
October 26, 2016

Demo Image: Google Now Inspired Flip Cards
Demo Image: Google Now Inspired Flip Cards

Google Now Inspired Flip Cards

Google Now style info cards with CSS card flip animation.
Made by Ettrics
October 8, 2016

Demo Image: CSS Card Flip
Demo Image: CSS Card Flip

CSS Card Flip

Simple card flip using CSS 3D transforms and transitions.
Made by Cole Bemis
December 30, 2014

Hover Effects For Cards

Demo Image: Parallax Depth Cards
Demo Image: Parallax Depth Cards

Parallax Depth Cards

Concept of parallaxed backgrounds and layers in cards.
Made by Andy Merskin
March 16, 2017

Demo Image: 2017 Card
Demo Image: 2017 Card

2017 Card

Card with 3D effect.
Made by Phil
January 28, 2017

Demo Image: Card Hover
Demo Image: Card Hover

Card Hover

Card hover effect with HTML and CSS.
Made by Jorge Sanes
January 25, 2017

Demo Image: 3D Perspective Card XY
Demo Image: 3D Perspective Card XY

3D Perspective Card XY

Used some JS to rotate the card on mouse movement.
Made by Carlos Sánchez Riballo
March 29, 2016

Demo Image: Material Card with Animated Featured Image
Demo Image: Material Card With Animated Featured Image

Material Card With Animated Featured Image

Experiment with material design. Animates the featured image and headline and adds button when hovered.
Made by Knol Aust
March 16, 2015

Mobile Cards

Demo Image: Bulma + Vuejs Flip Card
Demo Image: Bulma + Vuejs Flip Card

Bulma + Vuejs Flip Card

Flip card with HTML, CSS and JavaScript.
Made by Dzulfikar Adi Putra
October 18, 2016

Demo Image: Article Card UI - Read More CSS Animation
Demo Image: Article Card UI - Read More CSS Animation

Article Card UI - Read More CSS Animation

This pen 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.
Made by Valentine
September 28, 2016

Demo Image: Delivery Card Animation
Demo Image: Delivery Card Animation

Delivery Card Animation

Delivery card animation with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015

Movie Cards

Demo Image: Responsive Movie Card
Demo Image: Responsive Movie Card

Responsive Movie Card

HTML & CSS responsive movie card.
Made by Mehmet Burak Erman
May 12, 2017

Demo Image: Daily UI Movie Card
Demo Image: Daily UI Movie Card

Daily UI Movie Card

Daily UI movie card with HTML and CSS.
Made by George Mironidis
September 14, 2016

Demo Image: Movie Card Interactive UI With Pure CSS3 Animation Rating
Demo Image: Movie Card Interactive UI With Pure CSS3 Animation Rating

Movie Card Interactive UI With Pure CSS3 Animation Rating

A CSS3 animated movie card. Using CSS3 only to animate and keep track of the rating.
Made by Reece McDonald
January 4, 2016

Demo Image: Movie Card
Demo Image: Movie Card

Movie Card

A movie card.
Made by Alex Fernandez
November 28, 2015

Demo Image: Movie Card
Demo Image: Movie Card

Movie Card

Movie card with HTML and CSS.
Made by Andre Madarang
January 2, 2015

Profile Cards

Demo Image: HTML & CSS Profile UI
Demo Image: HTML & CSS Profile UI

HTML & CSS Profile UI

A user profile in HTML and CSS.
Made by Genaro Colusso
March 13, 2017

Demo Image: User Profile
Demo Image: User Profile

User Profile

Fully responsive and animated user profile card.
Made by Gabrielle Wee
January 31, 2017

Demo Image: User Profile Card
Demo Image: User Profile Card

User Profile Card

User profile card in HTML, CSS and JavaScript.
Made by XiChen
November 2, 2016

Demo Image: Profile Card
Demo Image: Profile Card

Profile Card

Simple HTML and CSS profile card.
Made by Matthias Martin
April 27, 2016

Demo Image: Materialup Profile Card
Demo Image: Materialup Profile Card

Materialup Profile Card

Materialup profile card with HTML, CSS and JavaScript.
Made by neel
January 18, 2016

Demo Image: Material Design: Profile Card
Demo Image: Material Design: Profile Card

Material Design: Profile Card

Material design profile card with HTML and CSS.
Made by Emil Devantie Brockdorff
January 15, 2016

Demo Image: Live Material Design User Widget
Demo Image: Live Material Design User Widget

Live Material Design User Widget

HTML, CSS and JavaScript live material design user widget.
Made by Mattia Astorino
January 8, 2016

Demo Image: 2 Sided Card
Demo Image: 2 Sided Card

2 Sided Card

2 sided card with HTML, CSS and JavaScript.
Made by Jesse Couch
September 22, 2014

Demo Image: 90's Profile Card
Demo Image: 90’s Profile Card

90’s Profile Card

HTML and CSS 90’s profile card.
Made by Ondřej Bárta
November 22, 2013

Recipe Cards

Demo Image: Recipe Card Design
Demo Image: Recipe Card Design

Recipe Card Design

Recipe card design in HTML and CSS.
Made by Travis Williamson
November 9, 2016

Demo Image: Unfolding Recipe Card
Demo Image: Unfolding Recipe Card

Unfolding Recipe Card

Unfolding recipe card with HTML, CSS and JavaScript.
Made by Dany Santos
October 12, 2016

Demo Image: Recipe Card UI Design
Demo Image: Recipe Card UI Design

Recipe Card UI Design

Example of a recipe card design using CSS3 animation.
Made by Riccardo Tartaglia
February 12, 2016

Demo Image: Recipe Card
Demo Image: Recipe Card

Recipe Card

HTML and CSS recipe card.
Made by Kevin Lesht
September 10, 2015

Stacked Cards

Demo Image: Stacked Cards Hover Effects
Demo Image: Stacked Cards Hover Effects

Stacked Cards Hover Effects

Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2017

Demo Image: Card Stack Animation
Demo Image: Card Stack Animation

Card Stack Animation

Card stack tutorial animation.
Made by Brandon Ward
May 12, 2017

Demo Image: Comment Card Animation
Demo Image: Comment Card Animation

Comment Card Animation

Flip through a stack of comment cards.
Made by Shaw
June 22, 2016

Demo Image: Cards Stack
Demo Image: Cards Stack

Cards Stack

Cards stack/fan in CSS3 with some jQuery.
Made by Jermaine
November 20, 2014

Demo Image: Card Stack
Demo Image: Card Stack

Card Stack

Displays a stack of cards. When the user hovers (or taps) the cards, they spread out and the user can hover (or tap) each card to see it.
Made by Lane Olson
May 30, 2013

FreeFrontend © 2016 - 2017

Back to top