20+ CSS Recipe Cards - Free Code + Demos
Collection of 20+ CSS Recipe Cards. All items are 100% free and open-source.
1. UI Recipe Card
Author: Alex Tkachev (alexpopovich)
Links: Source Code / Demo
Created on: June 9, 2017
Made with: HTML, SCSS
2. Cocktail Recipe Card
Author: Reece Bennett (PhyscoKillerMonkey)
Links: Source Code / Demo
Created on: March 28, 2017
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
3. UI Recipe Card
Author: Alex Tkachev (alexpopovich)
Links: Source Code / Demo, Dribbble Shot
Created on: June 9, 2017
Made with: HTML, SCSS
4. Recipe Card
Recipe card design, found on http://collectui.com/ originally posted on Dribble https://dribbble.com/shots/3071512-Daily-Dose-of-Design-033
Author: Travis Williamson (travisw)
Created on: November 9, 2016
Made with: HTML, CSS
Tags: recipe, card, article
5. Recipe Card
Author: Dany Santos (THEORLAN2)
Links: Source Code / Demo, Dribbble.com
Created on: March 14, 2016
Made with: HTML, CSS, JS
Tags: card, dregrade, gradient, recipe, css
6. Recipe Card
Author: Jaime (jimmycow)
Links: Source Code / Demo
Created on: June 17, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
7. Recipe Card
Author: Jhonny Gil (gilsjhonny)
Links: Source Code / Demo
Created on: April 7, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
8. Responsive Recipe Card
Recipe card layout I came up with after seeing inspiration on dribbble
Author: Michelle (michmy)
Links: Source Code / Demo
Created on: February 14, 2017
Made with: HTML, Less
9. Recipe Card
A recipe card using flexbox and css native variables.
Author: Andrew Menich (andrewmenich)
Links: Source Code / Demo
Created on: January 11, 2018
Made with: HTML, SCSS
Tags: card, cards, recipe, variables, flexbox
10. Recipe Designs (HTML/CSS)
Author: DesertDev (DesertDev)
Links: Source Code / Demo
Created on: November 15, 2018
Made with: HTML, CSS
Tags: ui, css, cards, flexbox
11. Recipe Card
Author: Kayla (kpratt)
Links: Source Code / Demo
Created on: December 13, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: bulma, pug, recipe
12. Flexbox 4 Column Responsive Recipe Cards With Grooving Header Part
There are lots of different usage of Flexbox features like order, grooving header element, column structure card, row structure as responsive .... Lezizyemeklerim.com is a Turkish recipe web site: https://www.lezizyemeklerim.com/
Author: readywpthemes (readywpthemes)
Links: Source Code / Demo
Created on: February 21, 2019
Made with: HTML, SCSS
Tags: flexbox, flex, recipe, recipe-card, responsive
13. Slider Animations: Pies From The Waitress Musical
It started out with a simple recipe UI thing, but I couldn't just put one pie. Now it's a slider with animation! Well sorta, I didn't plan the structure properly and sorta hacked my way through. Anyway, pies from the Waitress musical!! Super love the names, there's one called "My Husband...Read More
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: April 28, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: slider, animation, pies, more pies, recipe
14. Animated Recipe Card
Author: Tusar (tusar78)
Links: Source Code / Demo
Created on: May 11, 2020
Made with: HTML, CSS, JS
15. Recipe Card
Expanding Recipe Card built using CSS, and plain JavaScript
Author: Ryan Trimble (mrtrimble)
Links: Source Code / Demo
Created on: February 17, 2020
Made with: HTML, SCSS, JS
Tags: recipes, javascript, css, tabs, expanding
NEW 🔥 Idea to UI/UX Design In Seconds With AI 🔥
👉 Click to try it for free: UXCanvas.ai
More Awesome Lists:
Share: