Structure Classes

A well-defined and flexible core structure that we can use on all or most pages.

page-wrapper
main-wrapper
small container
container medium
large container

Headings

HTML tags define default heading styles. Use heading classes when the typography style does not match the default HTML tag.

H1

Sample text helps you understand what real text might look like. Sample text is being used as a placeholder.

heading-style-h1

Sample text helps you understand what real text might look like. Sample text is being used as a placeholder.

H2

Sample text is being used as a placeholder. Sample text helps you understand what real text might look like.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand what real text might look like.

H3

Sample text helps you understand what actual text might look like on your website. Sample text is used as a placeholder for the actual text that would normally appear here.

heading-style-h3

Sample text helps you understand what actual text might look like on your website. Sample text is used as a placeholder for the actual text that would normally appear here.

H4

Sample text is being used as a placeholder. Sample text helps you understand what the actual text might look like. Sample text is being used as a placeholder for the actual text that is normally displayed here.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand what the actual text might look like. Sample text is being used as a placeholder for the actual text that is normally displayed here.

H5
Sample text is being used as a placeholder. Sample text helps you understand what the actual text might look like. Sample text is being used as a placeholder for the actual text that is normally displayed. Sample text helps you understand what the actual text might look like.
heading-style-h5
Sample text is being used as a placeholder. Sample text helps you understand what the actual text might look like. Sample text is being used as a placeholder for the actual text that is normally displayed. Sample text helps you understand what the actual text might look like.
H6
Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand what the actual text might look like. Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand what the actual text might look like.
heading-style-h6
Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand what the actual text might look like. Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand what the actual text might look like.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for the actual text that would normally appear here. Sample text helps you understand how the actual text might look on your website. Sample text is being used as a placeholder for the actual text.

All links
All Links
All quotes
Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand how the actual text might look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for the actual text that is normally displayed here.
  2. Sample text is being used as a placeholder for the actual text that is normally displayed here.
  3. Sample text is being used as a placeholder for the actual text that is normally displayed here.
All Unordered Lists
  • Sample text is being used as a placeholder for the actual text that normally appears here. jalksdfasfd Sample text is being used as a placeholder for the actual text that normally appears here. jalksdfasf Sample text is being used as a placeholder for the actual text that normally appears here. jalksdfasf
  • Sample text is being used as a placeholder for the actual text that is normally displayed here.
  • Sample text is being used as a placeholder for the actual text that is normally displayed here.

Text Classes

Text classes when the typography style does not match the default HTML tag.

Text Sizes

text-size-large

Sample text is being used as a placeholder for the actual text that is normally displayed here.

text-size-medium

This sample text is being used as a placeholder for the actual text that normally appears on your website.

text-size-regular

Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand how the actual text might look on your website.

text-size-small

Sample text is being used as a placeholder for the actual text that normally appears on your website. Sample text helps you understand how the actual text might look on your website.

text-size-tiny

Sample text is being used as a placeholder for the actual text that normally appears on your website. Sample text helps you understand how the actual text might look on your website.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines
This CSS style is not supported for Rich Text on iOS.

Sample text is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand how the actual text might look on your website. Sample text is being used as a placeholder for the actual text text-style-2lines

text-style-3lines
This CSS style is not supported for Rich Text on iOS.

Sample text is being used as a placeholder for the actual text that would normally appear here. Sample text helps you understand how the actual text might look on your website. Sample text is being used as a placeholder for the actual text. Sample text is being used as a placeholder for the actual text that would normally appear here. Sample text helps you understand how the actual text might look on your website. Sample text is being used as a placeholder for the actual text.

Text Weights

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Buttons

Button combo class system.

button
Buttonxt
button
is-small
Button Text
button
is-large
Button Text
button
is-secondary
Button Text
button
is-text
Button Text
button
is-icon
Button Text

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
text-color-alternate

Background Colors

background-color-black
background-color: white
background-color-primary
background-color-secondary
background-color-tertiary
background-color-alternate

Max widths

Use the `max-width` CSS property to limit the width of the inner content to a maximum value.

max-width-80
max-width-60
max-width-50
max-width-40
max-width-25
max-width-20

Padding

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Size Classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottom
margin-top
margin-vertical
horizontal margin
margin-left
margin-right

Size Classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Icons

Unify icon sizes. `icon-height ` sets the height of icons. ` icon-1x1 ` sets both the height and width of icons.

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Webflow Elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! We have received your submission!
Oops! Something went wrong while submitting the form.
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for the actual text that normally appears here. Sample text helps you understand how the actual text might look on your website. Sample text is being used as a placeholder for the actual text. Sample text is being used as a placeholder for the actual text. Sample text is being used as a placeholder for the actual text.

  • Sample text is being used as a placeholder for the actual text that is normally displayed here.
  • Sample text is being used as a placeholder for the actual text that is normally displayed here.
  • Sample text is being used as a placeholder for the actual text that is normally displayed here.
  1. Sample text is being used as a placeholder for the actual text that is normally displayed here.
  2. Sample text is being used as a placeholder for the actual text that is normally displayed here.
  3. Sample text is being used as a placeholder for the actual text that is normally displayed here.
Sample text is being used as a placeholder for the actual text that would normally appear here. Sample text helps you understand how the actual text might look on your website. Sample text is being used as a placeholder for the actual text that would normally appear here.
nav_component
Website by
Website designed and developed by M7 Branding & Design B.V.

Text Inputs

☝️ How this works

The SVG icon on the right is a native Webflow dropdown that opens on hover. I generally find these easier to work with than custom CSS or Webflow IX.

This is the description for this input
☝️ How this works

There's some custom code here that disables the element when the page loads. All you have to do is add the "disabled" class in Webflow.

☝️ How this works

There's some optional CSS here that styles the icon SVG when the input is focused.

Custom CSS
⌘K
https://
https://
Invalid input
☝️ How this works
Custom CSS

There's some custom CSS here that sets the input border color to red, the SVG to red, and the help text to red.

The styling will automatically apply to any input whose parent has the class " MS Error."

At least 8 characters.
☝️ How this works

This element uses Webflow's tab component to toggle between the "show" and "hide" states. The tabs and the input have attributes that are linked to the custom code.

Add the following code to your page before the closing <body> tag.

I recommend copying the code from the published site to preserve line breaks.

<!--🟢 SHOW/HIDE PASSWORD CODE 🟢-->
<script>
//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.
document.querySelector("[data-transform]").addEventListener("click", transform);
//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
   //copy the element itself, its html source, and value text to a variable
   var myInput = document.querySelector("[data-show]");
   var oldHtml = myInput.outerHTML;
   var text = myInput.value;
   if (isPassword) {
       //replace "password" with "text" in the html if it is a password field
       var newHtml = oldHtml.replace(/password/g, "text");
   } else {
       //replace "text" with "password" if it is a text field
       newHtml = oldHtml.replace(/text/g, "password");
   }
   //update the html
   myInput.outerHTML = newHtml;
   //restore the text value
   myInput = document.querySelector("[data-show]");
   myInput.value = text;
   //toggle the isPassword flag
   isPassword = !isPassword;
}
</script>

Copy
☝️ How this works
Step 1 - Code

Below is some custom javascript that you should add before the closing <body> tag.

CUSTOM JS
<!--🟢 COPY BUTTON CODE 🟢-->
<script>
const copyBtns = document.querySelectorAll('[data-copy-button]');copyBtns.forEach(copyBtn => {
 const inputId = copyBtn.getAttribute('data-copy-button');
 const input = document.querySelector(`[data-input="${inputId}"]`);  copyBtn.addEventListener('click', async () => {
   try {
     await navigator.clipboard.writeText(input.value);
     console.log('Text copied to clipboard');
     
     // Change button text to "Copied" and add class "success" for 3 seconds
     const originalBtnText = copyBtn.innerHTML;
     copyBtn.innerHTML = 'Copied';
     copyBtn.classList.add('is-success');
     setTimeout(() => {
       copyBtn.innerHTML = originalBtnText;
       copyBtn.classList.remove('is-success');
     }, 3000);
     
   } catch (err) {
     console.error('Failed to copy text: ', err);
   }
 });
});
</script>

Step 2 - Attributes

Make sure your input field and copy button have attributes that look like data-input="INPUT_NAME" and data-copy-button="INPUT_NAME".

"INPUT_NAME" is a name you choose. As long as the button and input field match each other, you should be fine.

Step 3 - Multiple Inputs

If you have multiple input/button pairs on the same page, be sure to change the "INPUT_NAME" so that each pair is unique.

Step 4 - Styling

When the copy button is clicked, the " is-success " class is added for 3 seconds. You can style it below.

☝️ How this works

This element uses a transparent input field in conjunction with a series of "fake" input fields in the background.

The CSS below applies styling to the "fake" input fields in the background.

CUSTOM CSS

Here's a short video that explains the feature in more detail.

Radio Groups

All of these work with Memberstack. Here's a getting-started tutorial for radio buttons.
This is optional description text
This is optional description text
This is optional description text
This is optional description text
☝️ How this works
Custom CSS

Each of these radio groups has some custom CSS. You only need one per page, but I included one in each to make it easy for you to copy and paste.

And each group of radio buttons has a unique name. The value is what gets saved or submitted.

If you're using Memberstack, each radio input has a data-ms-member attribute. You'll need one custom field per radio group.

Radio Rows
Select an Option with Description
This is optional description text
☝️ How this works

These are Webflow's default radio buttons. I'm using custom CSS to change the label styles when they are checked.

Custom CSS
Custom CSS
Custom CSS
This is optional description text
☝️ How this works
Custom CSS

The images are background images. Give each MS Radio Image its own combo class so your images don't override each other.
‍
Each of these radio groups has some Custom CSS. You only need one per page, but I included one in each to make it easy for you to copy and paste.

And each group of radio buttons has a unique name. The value is what gets saved/submitted.

If you're using Memberstack, each radio input has a `data-ms-member` attribute. You'll need one custom field per radio group.

Only one option can be selected at a time.
☝️ How this works
Custom CSS

These are mostly Webflow elements that have been lightly styled with custom CSS. I tried to keep as much as possible within Webflow.

Custom CSS
Custom CSS

Checkboxes

☝️ How this works

This is the default Webflow checkbox with several sibling elements. The label is positioned at the top so that users can click anywhere to toggle it.

Use the following CSS to change the "Checked" styling.

Custom CSS
☝️ How this works

This is very similar to the element above, with a few additional classes to avoid conflicts.

Custom CSS
☝️ How this works
Custom CSS

These are mostly Webflow elements that have been lightly styled with custom CSS. I tried to keep as much as possible within Webflow.

This is optional description text
This is optional description text
☝️ How this works

These are the default Webflow checkboxes. I'm using custom CSS to change the label styles when they're checked.

Custom CSS
☝️ How this works

These are the default Webflow checkboxes. I'm using custom CSS to change the label styles when they're checked.

There is an SVG embed inside each checkbox. It is only visible if the checkbox is checked.

Custom CSS

Select Fields

☝️👇 How this works

It's a native Webflow select field with a custom dropdown icon.
‍
You can edit the dropdown SVG by selecting the input and then pressing the right arrow key.

The CSS for the icon is below.

CUSTOM CSS
Generate a Select Input →

It's annoying to manually change the drop-down options, so I created a tool that can do it automatically https://select-input-tool.webflow.io/

☝️ How this works
Step 1

Below is some custom CSS that you need to add to the page <header> code.

CUSTOM CSS
Step 2

You'll want to add the class name " nice-select " to any select input you want to style.

Step 3

Add the following code to your page before the closing <body> tag.

I recommend copying the code from the published site to preserve line breaks.

<!--🟢 CUSTOM SELECT CODE 🟢-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
  $('.nice-select').niceSelect();
});
</script>

Credits

I first discovered this component thanks to Noah Raskin on the Webflow Showcase.

☝️ How this works
Step 1

Below is some custom CSS that you need to add to the page <header> code.

CUSTOM CSS
Step 2

Add the following code to your page before the closing <body> tag.

I recommend copying the code from the published site to preserve line breaks.

<!--🟢 DATE PICKER CODE 🟢-->
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script>
   $(document).ready(function () {
       $('[data-input="datepicker"]').datepicker({
           format: 'mm-dd-yyyy'
       });
       // Available date placeholders:
       // Year: yyyy
       // Month: mm
       // Day: dd
   });
</script>

Credits

I found this code on the Flowbase blog.

☝️ How this works
Step 1

Add the following code to your page before the closing <body> tag.

I recommend copying the code from the published site to preserve line breaks.

<!--🟢 COLOR PICKER CODE 🟢-->
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
<script>
   // Create a new color picker instance
   // https://iro.js.org/guide.html#getting-started
   var colorPicker = new iro.ColorPicker(".ms-colorpicker", {
       // color picker options
       // Option guide: https://iro.js.org/guide.html#color-picker-options
       width: 180,
       color: "rgb(255, 0, 0)",
       borderWidth: 5,
       borderColor: "#f5f5f5",
   });    var values = document.getElementById("values");
   var hexInput = document.getElementById("hexInput");
   var swatch = document.getElementById("colorSwatch");    // https://iro.js.org/guide.html#color-picker-events
   colorPicker.on(["color:init", "color:change"], function(color){
       // Show the current color in different formats
       // Using the selected color: https://iro.js.org/guide.html#selected-color-api
       values.innerHTML = [
           "hex: " + color.hexString,
           "rgb: " + color.rgbString,
           "hsl: " + color.hslString,
       ].join("<br>");
       
       hexInput.value = color.hexString;
       swatch.style.backgroundColor = color.hexString;
   });    hexInput.addEventListener('change', function() {
       colorPicker.color.hexString = this.value;
       swatch.style.backgroundColor = this.value;
   });
</script>

Credits

If you need more than one color picker on the same page, check out this project. https://webflow.com/made-in-webflow/website/color-input

Iro.js is a color picker widget for JavaScript with a modern SVG-based user interface. No jQuery or extra CSS or images.

Head to iro.js.org for full documentation and features, or check out the source code on GitHub!

I discovered this package thanks to James Daniel on Codepen.

Custom Multi-Select Fields

All of the solutions below rely on a native Memberstack feature called "Checkbox Groups." You can learn more about how they work in the Memberstack documentation.

Custom Dropdown with Checkboxes & Webflow IX
Select all that apply
Custom Multi-select Input
Custom Multi-select + Custom Instant Search
Multi-select Buttons

Rich Text

Please note that the rich text editor is powered by Quill JS. Follow their documentation to make edits.
☝️ How this works

There's a lot going on with this one... let's let Julian explain 🎉

Clone the Original Project

Buttons

Save Order
Save & Publish
Download
Contact Us
Save Draft
Resize
Undo
Export
Delete
Light SM
Delete All

Drag & Drop

Option A
🟢
Option B
🟡
Option C
🔴
You'll probably want to hide and/or disable it in production. I'll add some HTML that you can use.
👈 How this works
Step 1

Duplicate the boxes to add more options. Be sure to keep the attributes and class names the same. " MS Box " and " MS Boxes " are required class names.

Step 2

Add the following code to the header of your page or site.

<style>
[draggable] {
 user-select: none;
}
[data-value] {
pointer-events: none;
}
</style>

Step 3

Next, you can change the styling of boxes that are about to be "replaced."

Style Me
Step 4

If you want to use a hidden or disabled input field, you can add the following code to an embed in Webflow. You can change "NAME" to whatever you like.

<input type="hidden" data-input="drag-order" maxlength="256" name="NAME" data-name="NAME" id="NAME" data-ms-member="FIELD_ID" required="">

The " data-ms-member " part is only required if you're using Memberstack.

Step 5

Last, and most importantly, you need to add the following code before the closing </body> tag.

<!--🟢 DRAG N DROP 🟢-->
<script>
document.addEventListener('DOMContentLoaded', (event) => {  var dragSrcEl = null;
 
 function handleDragStart(e) {
   this.style.opacity = '0.4';
   
   dragSrcEl = this;    e.dataTransfer.effectAllowed = 'move';
   e.dataTransfer.setData('text/html', this.innerHTML);
 }  function handleDragOver(e) {
   if (e.preventDefault) {
     e.preventDefault();
   }    e.dataTransfer.dropEffect = 'move';
   
   return false;
 }  function handleDragEnter(e) {
   this.classList.add('over');
 }  function handleDragLeave(e) {
   this.classList.remove('over');
 }  function handleDrop(e) {
   if (e.stopPropagation) {
     e.stopPropagation(); // stops the browser from redirecting.
   }
   
   if (dragSrcEl != this) {
     dragSrcEl.innerHTML = this.innerHTML;
     this.innerHTML = e.dataTransfer.getData('text/html');
   }
   
   let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');    let orderList = Array.from(orderedBoxes).map(function(box) {
     return box.innerHTML;
   }).join(',');    let input = document.querySelector('input[data-input="drag-order"]');    input.value = orderList;    return false;
 }  function handleDragEnd(e) {
   this.style.opacity = '1';
   
   items.forEach(function (item) {
     item.classList.remove('over');
   });
 }
 
 let items = document.querySelectorAll('.ms-boxes .ms-box');
 items.forEach(function(item) {
   item.addEventListener('dragstart', handleDragStart, false);
   item.addEventListener('dragenter', handleDragEnter, false);
   item.addEventListener('dragover', handleDragOver, false);
   item.addEventListener('dragleave', handleDragLeave, false);
   item.addEventListener('drop', handleDrop, false);
   item.addEventListener('dragend', handleDragEnd, false);
 });  // Set initial value of the input field
 let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');
 let orderList = Array.from(orderedBoxes).map(function(box) {
   return box.innerHTML;
 }).join(',');
 let input = document.querySelector('input[data-input="drag-order"]');
 input.value = orderList;
 
});
</script>

Credits

ChatGPT and this article on WebDev

This input type also works with Memberstack.

You'll need to update the code, so I recommend that you clone this other project and watch this video instead of following the instructions on the left.

Range Sliders

0
0
👈 How this works
Step 1

Be sure to keep all the class names, or update them in your code. They are required for this input to work.

Step 2

Add the following CSS to your page or site settings. Place it on the page to preview the changes

CUSTOM CSS
Step 3

Change the styling of these elements right in Webflow. To style the handle and hover states, edit the custom CSS.

0
Step 4 - Option A

Last, and most importantly, you need to add the following code before the closing </body> tag.

<!--🟢 RANGE SLIDERS 🟢-->
<script>
function rangeSlider() {
 var sliders = document.querySelectorAll('.ms-range-slider');  sliders.forEach(function(slider) {
   var range = slider.querySelector('.ms-range-slider-bar'),
       value = slider.querySelector('.ms-range-slider-value');    value.innerHTML = range.value;    range.addEventListener('input', function() {
     value.innerHTML = this.value;
   });
 });
}rangeSlider();
</script>

Step 4 - Option B

If you want to use this feature with Memberstack, you'll want to use this code instead. You only need one or the other.

<!--🟢 RANGE SLIDERS W/ MEMBERSTACK 🟢-->
<script>
function rangeSlider() {
 var sliders = document.querySelectorAll('.ms-range-slider');  sliders.forEach(function(slider) {
   var range = slider.querySelector('.ms-range-slider-bar'),
       value = slider.querySelector('.ms-range-slider-value');    value.innerHTML = range.value;    range.addEventListener('input', function() {
     value.innerHTML = this.value;
   });
 });
}// Check if Memberstack is available
if (typeof window.$memberstackDom !== 'undefined') {
 // Get the current Memberstack member
 window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
   if (member) {
     let id = member.id;
     // Memberstack member found, initialize range sliders
     rangeSlider();
   } else {
     // Memberstack member not found, initialize range sliders
     rangeSlider();
   }
 });
} else {
 // Memberstack not available, initialize range sliders
 rangeSlider();
}
</script>

Credits

The Simple Range Slider project by Adam Whitten

Thank you! We have received your submission!
Oops! Something went wrong while submitting the form.