Cards
Webflow UI Kit

When design meets code. Introducing the first cloneable Webflow Style UI Kit fully developed in Webflow Designer.

Get Template
Full Template for Free, obviously. Ready to be cloned!
Cards Webflow UI Kit Hero Image
Cards Webflow UI Kit Hero Image Mobile Version
Story behind

A designer who loves Webflow

Few days ago Webflow introduced a feature which allows users to copy and paste whole pages or just .divs between projects on to their platform. Since Webflow is something that I discovered only a few months ago and it had already changed my life as a non-coding designer, I decided to create my first small web based UI Kit.

WHAT’S INSIDE

Clonable Elements & Atoms

The main aim here was to create something visually beautiful. A kit that can be used by designers, as well as developers or new users to the platform. I prepared all various styles for all the main typography elements  also buttons, tags, alerts, social icons etc.. By using these “atoms” I created as many types of cards as possible.

Designed for All 4 Breakpoints

All Cards are fully responsive for Desktop, Tablet & Phone. Using the basic Webflow 940px grid.

Scalable Start

Created & Designed with Atomic Principles. Covering all the tiny details and elements such as paragraphs and forms.

What is predefined for you?

9 Predefined categories, all responsive and ready to be pasted anywhere in your projects!

Hero
Article Cards
Buttons
Typography
Forms
Alerts
Tags
Menu
PRedefined Colors

So here we go. Get, Set, Ready!

Stop doing all the initial setups over and over. Instead spend more time with the doing the fun work with Webflow.

Get Template

Like the design? Get the Cards Kit in Sketch as well.

Sketch Icon
Cards.sketch