7 Webflow Clonables Showcase to Know

Documentation
June 28, 2022
3 min
Made In Webflow Logo
Key points

Today, we are going to provide an overview of the essential clonables that you should know about in the Webflow Showcase (Made in Webflow). These clonables will help you be more productive in your web development and enable you to create high-quality projects.

1. Client First - Webflow

How can we create a list of the best Webflow clonables without mentioning Client-First by Finsweet? This resource allows you to kickstart your Webflow project with the style guide from the Client-First methodology, complete with pre-configured classes and combo classes.

Link to the Client-First clonable

2. Filter Components - Webflow

Continuing with a client-first development mindset, here is a template featuring numerous filtering components. By utilizing Finsweet's attributes, you can implement an optimized and accessible filtering system for your website.

Link to the Filter Components clonable

3. Weglot UI KIT - Webflow

Do you want to translate your site into multiple languages using Weglot? This template from the Webflow Showcase is perfect for you! Finsweet offers various types of buttons to switch from one language to another. The Weglot kit provides you with greater flexibility in customizing your site.

Link to the Weglot UI KIT clonable

4. Finsweet Cookie Consent - Webflow

Data protection and user consent for data usage are highly regulated. To remain compliant with GDPR, here is a Webflow clonable that allows you to add a native and customizable cookie banner in Webflow! This serves as an alternative to using Axeptio.

Link to the Finsweet Cookie Consent clonable

5. 20 CSS Buttons Hover Styles - Webflow

Are you lacking inspiration for your buttons? Do you want to optimize your conversion rate with enticing CTAs? Once again, here’s a template from the Webflow Showcase that will assist you. This list of buttons will provide you with flexibility for your project. With just a few clicks, you can implement attractive hover animations for your website.

Link to the 20 CSS Buttons Hover Styles clonable

6. 20 Line Hover Animations - Webflow

Similar to the previous clonable, here is another list of components featuring a hover effect on a line that may be useful in your project.

Link to the 20 Line Hover Animations clonable

7. 180 Beautiful Gradients - Webflow

Want to add color to your site but out of ideas? This Webflow-made template offers a wide range of gradients that will inspire your design. With the provided codes, you can easily implement these gradients in your project.

Link to the 180 Beautiful Gradients clonable

Bonus: Relume Timeline Component - Webflow

A little bonus for the end! Here’s a Webflow clonable that allows you to add a custom and animated timeline to your website. You have great flexibility in customizing this timeline, and the model is fully responsive thanks to Relume.

Link to the Relume Timeline Component clonable

This was a non-exhaustive list, but feel free to let us know on LinkedIn or YouTube what your favorite Webflow clonables are.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today