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

Happy Cloning! 🎉

Cards 2.0 - Framework/UI Kit

Hi everyone.

The second template for https://www.graphicowls.com is ready. I tried to make something unusual, without typical grid layout. What do you think? Is it fresh enought? :)

Will be glad to read your thoughts in comments.
Thanks a lot for your time!

«Splash» Template. GraphicOwls

We challenge the conventional way of thinking. An expert team of geeks, gurus and growth hackers cutting through the most attention dense environment on the planet.

Leave a like and comment if you like what you see :)

Disruptive Social - Creative Agency in London

Easily create an interaction to reveal different images while you scroll through sections

Image Scroll Reveal

Time to take control of the colors... :)

Feel free to clone.

Follow my profile to get notified about new tutorials of cool Webflow tricks.

(inspired by Slava Fedosenko)

Before and After effect

This was inspired by the following CodePen: https://codepen.io/farmok/full/aYbKOO

Learn about how I used the BEM naming convention to create the page in the following YouTube video: https://www.youtube.com/watch?v=gcKprnFVCUQ

Also, feel free to ask any questions

Background Images with Clipped Text

Simple type writer custom code. You can check the custom code field and clone this project.

type-writer

A dynamic before and after slider that is interactive on desktop and mobile. I did not write the code, but found out how to make it dynamic so clients can update themselves. 

Ideal for before and after images for cleaners, dentists, etc. Anything with a before and after!

Use the header and footer code on the main settings page under Custom code page if you intend to have the element on other pages.

To use on a static website, just replace the dynamic image fields with the image source address.

magicslider

Here is an example to dynamically add Instagram embeds to your projects using the standard Instagram Embed code and a Collection.

Some resources: 

How to get the original embed snippet: https://help.instagram.com/513918941996087

How to use an Embed Component in Webflow using Collection fields: https://university.webflow.com/article/how-to-use-dynamic-embeds-on-your-webflow-site

Support for CMS and Custom Code here: https://forum.webflow.com/c/code-help

Dynamic Instagram Embeds

scroll-zoom

Webflow's background video component currently works only on desktop devices due to mobile restrictions on auto-playing video. These restrictions have been recently lifted. Inserting the snippet of code below will make background video work as intended on iOS and Android.

Works on iOS 10 and above  |  Android Lollipop (5.0) and above

Make Background Video Work on iOS and Android

A collection of useful animations made on wedflow.

Check out Webflow Samples 2: http://wfs2.webflow.io/

webflow-samples

This is demo of some "sticky on scroll" elements I created completely within Webflow. I tried my best to explain how I did it, but I'm happy to answer any questions you have about the setup.

NOTE: This setup may not work in older browsers.

Sticky On Scroll

Hey Webflow,

I quickly created this cloneable site to help answer a question on our forums:
https://forum.webflow.com/t/vertical-slider-with-pagination-on-the-right-side/45423

The solution allows users to click on the menu dots on the right hand side to access different sections throughout the site.

This solution was inspired by the following site: http://www.thepathfinders.world/

Hopefully this helps :blush:

Best regards,
Micah

Vertical Menu with Section Selection

Just a quick little template you could use for a Style Tile + Mood Board with your clients.

Blog post on how to best utilize them is coming soon!

Style Tile

Simple, cloneable implementation of the Isotope Masonry layout plugin with easy filter controls. All styling + filtering is controlled WITHIN the Webflow interface.

You have a ".grid" container, inside that you have individual grid ".items"... In a div above that you have your filter/sorting functions in a ".filter" container that holds your buttons. Just add a custom "data-filter" attribute to the buttons to control the filtering.

Enjoy.

Kristine Paulsen

About

About

About