Component properties

Component properties in Webflow let you create flexible, configurable components that can be customized each time they're used — without breaking the shared design system. Instead of creating multiple near-identical components for slightly different use cases, you define one component and expose specific properties that can be adjusted per instance.

There are several types of component properties you can create. Text properties let you change the text content of an element within the component. Image properties let you swap out images. Link properties let you change where a button or link points. Boolean properties (true/false toggles) let you show or hide elements within the component. And with component variants, you can switch between predefined design states entirely.

To add a property to a component, enter the component editor by double-clicking the component on the canvas. Select the element you want to expose, and in the Settings panel you'll see the option to bind it to a new or existing property. Once you do, that property shows up in the element settings panel whenever someone uses the component on the canvas — they can customize that value without touching the underlying component design.

Properties make components much more reusable. A card component might have a text property for the title, an image property for the thumbnail, and a link property for the CTA. Anyone using that card can fill in those values without knowing anything about how the component is structured.

This is especially powerful for design systems and team workflows — designers can lock down the structure while giving content editors or other team members the ability to customize the right parts.