31

Cards 2.0 - Webflow Framework/UI Kit

5 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!

7 comments

  • Antti Kareinen, 5 years ago

    Spectacular work once again Jan. Keep up the grind!

    4 points
  • G BowdenG Bowden, 5 years ago

    this is amazing work!!

    1 point
  • Anton MoritzAnton Moritz, 5 years ago

    Outstanding work! I just started using Webflow in favor of coding, so this is a great base for me. Thanks a lot!

    0 points
  • Tomas Rolejček, 5 years ago

    Great job! I really like nicely organised Sketch file useful for web wireframing. (btw i found little mistake - empty products artboard) Small suggestion - It will be great if you can include more than one breakpoint and set constraints. Thank you, Honzo :)

    0 points
    • Jan Losert, 5 years ago

      Thanks for the comment, it seems that I haven't hit Save Changes on the gumroad product and left there a unfinished file. All fixed now. Just redownload the file :)

      1 point