Class Naming Convention

This library follows a strict naming convention to prevent conflicts with Webflow's native styles, your custom CSS, and third-party embeds.

The Pattern

.wf-{component}-{element}
.wf-{component}__{child-element}
.wf-{component}__{child-element}--{modifier}

This is a modified BEM (Block Element Modifier) approach with a wf- namespace prefix.

Anatomy of a Class Name

.wf-hero-split__title--large
 │   │         │       │
 │   │         │       └── Modifier: visual variant
 │   │         └── Element: child within the block
 │   └── Block: the component name
 └── Namespace: "wf-" prevents collisions

Why This Matters in Webflow

Webflow generates its own class names (e.g., .heading-2, .paragraph-large). Without namespacing, your embedded component styles could accidentally override Webflow's styles — or vice versa.

The wf- prefix creates a clean boundary:

Rules

1. Always use the wf- prefix

Every class in this library starts with wf-. Never remove it.

2. Component names are kebab-case

wf-hero-split       (correct)
wf-heroSplit        (wrong — no camelCase)
wf-hero_split       (wrong — no underscores in component name)

3. Child elements use double underscore

wf-hero-split__title    (correct)
wf-hero-split-title     (wrong — looks like a new component)

4. Modifiers use double dash

wf-hero-split__btn--primary     (correct — modifier on an element)
wf-hero-split--dark             (correct — modifier on the block)

5. Keep nesting flat

Never nest more than one level of __:

/* Correct — flat structure */
.wf-pricing-cards__card-title { }

/* Wrong — nested BEM is unreadable */
.wf-pricing-cards__card__title__text { }

Practical Examples

Renaming a Component

If you copy hero-split and want to make a variant for your project:

/* Original */
.wf-hero-split { ... }
.wf-hero-split__title { ... }

/* Your variant — change the component name, keep the pattern */
.wf-hero-product { ... }
.wf-hero-product__title { ... }

Adding a Custom Modifier

To create a dark variant of an existing component:

/* Add a block-level modifier */
.wf-cta-banner--dark {
  background-color: var(--wf-color-gray-900);
}

/* Override child styles within the modifier scope */
.wf-cta-banner--dark .wf-cta-banner__title {
  color: var(--wf-color-white);
}

Combining with Webflow Classes

In Webflow's designer, you can add both a library class and a Webflow class to the same element:

<h2 class="wf-hero-split__title heading-style-h2">
  Your headline
</h2>

The Webflow class (heading-style-h2) handles the global typography; the library class (wf-hero-split__title) handles component-specific spacing and layout.

Quick Reference

CSS Custom Property Convention

All design tokens in styles/variables.css also use the wf- prefix:

--wf-color-primary     /* Colors */
--wf-text-lg           /* Typography scale */
--wf-space-4           /* Spacing scale */
--wf-radius-md         /* Border radius */
--wf-shadow-sm         /* Shadows */
--wf-transition-base   /* Transitions */
--wf-z-modal           /* Z-index layers */

Every component references these tokens with a fallback value so it works even without variables.css loaded:

color: var(--wf-color-primary, #4f46e5);
/*                              ^^^^^^^ fallback */

Part of No-Code Builder Pro

Import Guide — Adding Components to Webflow

This guide walks you through every method of bringing these components into your Webflow project.

Method 1: Embed Block (Recommended)

The simplest approach. Each component file is a self-contained