Streaming live at 10am (PST)

Cards 2.0 - Framework/UI Kit [Clonable]


#1

Hi Webflow people!

4 months ago I’ve shared with you Cards for Webflow, first ever UI Kit right after Webflow allowed copy and pasting between projects. Within couple of months you’ve cloned this project over 1500 times and put it with your upvotes as a top 1 on Webflow Showcase in clonable products. So to give back for this amazing support I’ve decided to completely rethink the cards and come up with a massive update. As I’m writing this message I’ve just pressed “Publish to Showcase gallery” for my new product CARDS 2.0 Framework/UI Kit for Webflow!

Cards 2.0 are Symbol based Framework/UI Kit for quick design or wireframe of your next landing page project. 100 symbols/elements ready for design or hi-fidelity wireframe for any UI/UX designers or developers out there. All comes with a easy to use Webflow file. The main goal of this project is to help you - Webflow users - with creating beautiful landing pages or wireframes within minutes directly in Webflow with ready to be published code. All again with a coded styleguide for all the main typography elements (H1-H6, links, paragraphs etc.) buttons, tags you name it.

What you get/Package overview:

50 New Cards as Webflow Symbols (in 2 versicns Dark and Light = 100 Symbols)

3 Complete landing pages in 2 versions

Symbols for Hero sections, Features, Testimonials, Pricing, Team, Blog and more.

Ready for all 4 responsive breakpoint

Cards from v1.0 recreated into a new structure

All cards in Sketch file

All of this based on beautiful designs crafted using roughly 10 core elements (7 text styles and 3 buttons) to keep the visual language super simple and easy to understand.

————

This package can do great things for:

Developers: simply take every style and visual language out of this package with you cmd+c cmd+v to be able create stuff instead of being in charge of designs. No need to be worried anymore if you have the correct line-height or if the colors are working together nicely.

UI Designers: by giving them a library of section and code help them create stuff quickly just by pasting their assets into ready sections to really reduce the time of creating landing pages for their clients or projects.

UX Designers: with the right elements which can be quickly moved this around and help testing different approaches on their users. Or just to quickly prepare visual structure to present ideas to their stakeholders.

(Obviously it would be better to remove all the “real-pixels” from the sections to make this a real wireframing package. I might do that in some upcoming update. Or you guys can do that with me! :raised_hands:t2:)

First time users: explore the possibilities of simple layouts in Webflow copy paste anything into their future projects.

—————

And that’s it :slight_smile: All of this is again for FREE and ready to be cloned or downloaded. I’ll be super excited to see any of your results based on this framework, so feel free to send anything you’ve done with Cards 2.0 at @janlosert or me@janlosert.com

Showcase link: https://webflow.com/website/cards2

How it works video link: https://youtu.be/ygaozgFKKOs

Sketch file download ($0) link: http://gum.co/cards2c

And cheers! :tada: