Webflow Classes

Webflow States

HTML element when in designer (removed inside preview and published site)

.wf-design-mode

HTML element when in the traditional editor (not edit mode within the designer)

.w-editor

---

Elements

Rich Text Element

.w-richtext

Container Element

.w-container

Default Button Element

.w-button

Embed

.w-embed

---

Element States

Visibility Hidden Elements (elements removed on published site)

.w-condition-invisible

Hidden By CMS Conditional Visibility

.w-condition-invisible

Active Link (current page, anchor link, or tab link)

.w--current

---

Nav

Navbar

.w-nav

Nav Logo Link

.w-nav-brand

Nav Button

.w-nav-button

Open Nav Button

.w-nav-button.w--open

Nav Button Icon

.w-icon-nav-menu

Menu Element

.w-nav-menu

Open Menu Element

[data-nav-menu-open]

Backdrop Of Open Menu

.w-nav-overlay

The menu gets moved into this div when opened.

Default Nav Link Element

.w-nav-link

---

CMS

Collection Wrappers

.w-dyn-list

Collection Lists

.w-dyn-items

Collection Items

.w-dyn-item

Collection Empty State Div (removed from published site if there's cms items)

.w-dyn-empty

Hidden By CMS Conditional Visibility

.w-condition-invisible

Any element linked to an empty cms field

.w-dyn-bind-empty

.w-dyn-bind-empty is not added to an empty element when a component field is connected to a cms field.

Pagination Wrapper

.w-pagination-wrapper

Pagination Next Button

.w-pagination-next

Pagination Next Icon

.w-pagination-next-icon

Pagination Prev Button

.w-pagination-previous

Pagination Prev Icon

.w-pagination-previous-icon

Pagination Page Count

.w-page-count

---

Tabs

Tab Wrapper

.w-tabs

Tab Menu

.w-tab-menu

Tab Link

.w-tab-link

Active Tab Link

.w-tab-link.w--current

Tab Content

.w-tab-content

Tab Pane

.w-tab-pane

Active Tab Pane

.w-tab-pane.w--tab-active

---

Slider

Slider

.w-slider

Slider Mask

.w-slider-mask

Slide

.w-slide

Slider Aria Label (last child of mask)

.w-slider-aria-label

Left Arrow

.w-slider-arrow-left

Left Arrow Icon

.w-icon-slider-left

Right Arrow

.w-slider-arrow-right

Right Arrow Icon

.w-icon-slider-right

Pagination Dot Wrapper

.w-slider-nav

Pagination Dot

.w-slider-dot

Active Pagination Dot

.w-slider-dot.w-active

---

Background Video

Video Wrapper

.w-background-video

Pause Button

.w-background-video--control

---

Dropdown

Dropdown Wrapper

.w-dropdown

Dropdown Toggle

.w-dropdown-toggle

Open Dropdown Toggle

.w-dropdown-toggle.w--open

Dropdown Toggle Icon

.w-icon-dropdown-toggle

Dropdown List

.w-dropdown-list

Open Dropdown List

.w-dropdown-list.w--open

Dropdown Link

.w-dropdown-link

---

Lightbox

Lightbox Link

.w-lightbox

Opened Lightbox Link

.w-lightbox.active-lightbox

Lightbox Wrapper

.w-lightbox-backdrop

Closed Lightbox Wrapper

.w-lightbox-backdrop.w-lightbox-hide

Lightbox Container

.w-lightbox-container

Lightbox Content

.w-lightbox-content

Lightbox Spinner

.w-lightbox-spinner

Hidden Lightbox Spinner

.w-lightbox-spinner.w-lightbox-hide

Lightbox Controls

.w-lightbox-control

Lightbox Left Arrow

.w-lightbox-control.w-lightbox-left

Lightbox Right Arrow

.w-lightbox-control.w-lightbox-right

Lightbox Disabled Arrow

.w-lightbox-control.w-lightbox-inactive

Lightbox Close

.w-lightbox-control.w-lightbox-close

Lightbox Thumbnail Wrapper

.w-lightbox-strip

Lightbox Thumbnail Item

.w-lightbox-item

Active Lightbox Thumbnail Item

.w-lightbox-item.w-lightbox-active

Lightbox Thumbnail Inner Div

.w-lightbox-thumbnail

Thumbnail Images

.w-lightbox-thumbnail-image

Thumbnail & Large Images (all images inside lightbox)

.w-lightbox-img

Large Images

.w-lightbox-image

Lightbox View (holds active lightbox media)

.w-lightbox-view

Lightbox Frame

.w-lightbox-frame

Lightbox Figure

.w-lightbox-figure

---

Locales List

Locales Wrapper

.w-locales-list

Locales List

.w-locales-items

Locales Item

.w-locales-item

Locales Empty (removed from published site there's locales items)

.w-locales-empty

Hidden Locales Empty

.w-locales-empty.w-locales-hide

---

Forms

Form Wrapper

.w-form

Success Div

.w-form-done

Success Div When Form Submitted

.w-form-done[style="display: block;"]

Styling Some Other Element When Any Form Is Successfully Submitted

body:has(.w-form-done[style="display: block;"]) .your-element {
    background-color: green;
}

Error Div

.w-form-fail

Error Div When There's A Form Error

.w-form-fail[style="display: block;"]

Form Select Element

.w-select

---

Custom Checkbox

Checkbox Wrapper

.w-checkbox

Div Styled Like A Checkbox

.w-checkbox-input

Div Styled Like A Checkbox (Checked)

.w-checkbox-input.w--redirected-checked

Span Styled Like A Label

.w-form-label

---

Custom Radio

Radio Wrapper

.w-radio

Div Styled Like A Radio

.w-radio-input

Div Styled Like A Radio (Checked)

.w-radio-input.w--redirected-checked

Span Styled Like A Label

.w-form-label