Clone Now

S2 Components

Title Sets

Title Sets title-set improve consistency and greatly speed up your web design process by eliminating the need to repeatedly create classes for headings and titles. You may customize them during the early design process.

Title Sets

Our services and capabilities

Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Our services and capabilities

Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Unleash potentials

Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Unleash potentials

Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

About our company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Recruitment of IT professionals in the region

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Our Executives

Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Our Management

The best team in the industry.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Value

Our value guides our businesses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Lorem ipsum dolor sit amet

Flexible workforce solutions for sustainable business success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Elements of Title Sets

title-heading

Flexible workforce solutions for sustainable business success

title-heading
is-lg

Flexible workforce solutions for sustainable business success

title-heading
is-xl

Flexible workforce solutions

title-heading
is-2xl

Flexible workforce solutions

title-heading
is-3xl

Flexible workforce solutions

title-message
Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.
title-message
is-sm
Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.
title-message
is-xs
Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.
eyebrow
Lorem ipsum dolor sit amet

Hero Section

Hero Section / 01
Drawing on WritePal

Sketcy

The last sketch app you'll ever need.
Explore features
Hero Section / 02
This is an eyebrow

This is your hero section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Learn more
How it works?
Hero Section / 03
NEW
36k+ members

Performance Starts Here.

Simple, motivating, and built for momentum – empower you to track progress, stay on pace, and crush fitness goals with the app.

How it works
Join free

Swiper Slider

Optimal base setup for Swiper Sliders in Webflow with S2 Framework.

Swiper Slider / 01, 02
blue waves
blue waves
blue waves
blue waves
blue waves
blue waves
💡 Swiper Sliders share a common base configuration. You can find the custom code in the head code of this page.
💡 Each slider setup requires its own additional script, which can be found directly after each slider.

Marquee / Carousel

marquee6k is used in the JavaScript version.

Marquee (JS)
💡 Custom script is required in the JavaScript version. You can find it in the footer code of this page.

In the pure CSS version, you can use data-repeat="x3" to easily repeat the content to make it long enough for looping.

CSS Marquee (Pure CSS)
This is a marquee animation using CSS. You can override the default speed by using the animation-duration property.
This is another marquee animation using CSS. It can be configured by using the animation="marquee" (default) or animation="marquee-50p" attribute.
No hover and pause in this example.
Apply the attribute animation-direction="reverse" to change the direction of the marquee.
💡 Some custom CSS is required for the pure CSS version. It is already included in the CSS Animations within Global Code.
💡 The required JS script for the "Repeat Elements" function can be found in the footer code of this page.

Before-After

Our Before-After Slider is based on BeerSlider and nicely optimized for Webflow with excellent flexibility.

BeerSlider
blue waves
💡 Custom CSS and JavaScript required. You can find them in the head code of this page.

2-Col Section

Improved version of Webflow's out-of-the-box 2-column section.

2-Col Section / 01
blue waves

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem. Etiam sodales ac felis id interdum.

Get started
2-Col Section / 02

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem. Etiam sodales ac felis id interdum.

Get started
blue waves

Accordion

Accordion / Base

FAQs

We are here to answer your questions. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Nunc ut sem vitae risus tristique posuere?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Have other questions? Check the help forum or send us a message here.
💡 The accessibility features of the accordion are powered by JavaScript. You can find it in the head code of this page. Simply set up the class names as in the example: accordion_item, accordion_title-wrapper, and accordion_content-wrapper, and the script will handle the rest. It’s super easy!
Accordion / 01

Have questions?

We are here to answer your questions. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion / 02

FAQs

We are here to answer your questions. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Nunc ut sem vitae risus tristique posuere?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Have other questions? Check the help forum or send us a message here.

Footers

These are basic footer layouts. The structures are flexible and most elements have no or only one combo class, making it very easy to customize or create your own version.

Footer / 01
Footer / 02
Footer / 03

Plyr Player

Advanced Plyr is a powerful, accessible, and customizable media player for HTML5 video, audio, YouTube, and Vimeo. You can further develop the player based on our demos and custom code. Feel free to remove this section if it is not relevant to your use case.
Learn more: Plyr.io | CodePen

HTML5 Video (A) - Quality options + Captions + Autoplay + Muted + Loop

HTML5 Video (B)

YouTube (A)

YouTube (B) - No Poster

Vimeo (A)

Vimeo (B)

HTML5 Audio

💡 Custom CSS and JavaScript required. You can find them inside the container of this demo section.
The cover image, which should be the same as the video poster, is just a placeholder for Webflow Designer. It will not be rendered on the website. Besides, you can use data-autoplay instead of autoplay to avoid annoying autoplay in Webflow Designer.