Component slots
In Webflow, Components are building blocks that help you maintain consistency across your website. When you need to update a navbar component, for example, you can update the component once, and everywhere that navbar components exists on your site is also updated.
But sometimes you need a bit more flexibility — you want to maintain design consistency, but you might need one instance of a component to contain something slightly different. That's where Component slots come into play. With slots, you create a placeholder within your component, and later, when building your site, you can decide what other components to put into that slot. This way, you get the design consistency of components, but enough flexibility with slots to adapt on different parts of your site.
Video transcript
Component slots in Webflow let you create components with placeholder areas that can be filled with different content each time the component is used. Instead of a component having fixed, unchangeable inner content, a slot allows you to drop in whatever elements you want in that space when you place the component on your canvas.
This makes components significantly more flexible. A card component might have a slot for the icon at the top, so each instance can have a different icon without needing separate components or complex property logic. A section component might have a slot for the main content area, letting you drop in any combination of headings, text, and images.
To add a slot to a component, enter the component editor and use the slot element from the Add panel. Place it where you want the customizable area to be. When someone uses that component on the canvas, they can click into the slot and add their own content there.
Slots work alongside component properties and variants. Properties are good for simple value swaps — changing a text string or an image source. Slots are better when the structure or type of content needs to vary significantly between instances.
Together, properties, variants, and slots give you a powerful system for building components that are both consistent and flexible — which is exactly what a good design system needs.
