Cards 2.0 - Webflow Framework/UI Kit

over 4 years ago from , Webflow/No-Code Enthusiast, Product Designer & Product Maker. Tweets as @janlosert. Pixels on http://dribbble.com/JanLosert.

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 versions 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.

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

And that’s it :) 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?rfsn=915210.4b583c

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

And cheers!