Components are aggregations of elements which are turned into a reusable element on your canvas.
On the canvas, Components are visually identified with a green outline.
They are particularly useful for elements that you'll be using across multiple pages of your site, such as;
In Oct-2022 Webflow added the ability to override certain aspects of a component in a particular instance, which expands the use cases for components to include things with structural consistency but content distinctions.
For example;
In 2023 Webflow added the ability to data-bind those component properties to a CMS context, such as a collection list or collection page. This includes the ability to control the conditional visibility of elements within the component.
How is this useful? Well, the main advantage is that components are neatly packaged pieces of design, which can now have some capability.
Let's suppose you have a nicely styled custom testimonial, but you want to use it in a variety of different places - in the sidebar of pages, on the homepage in a 3-most-recent, and also on a dedicated testimonials page.
Now you can build one component and use it in all 3 contexts, and even have certain variations such as whether you show the full testimonial, or just an excerpt, or whether it's clickable to go to the testimonials page.
Any time you have a specific arrangement of elements that you are using on more than one page, and which you want to maintain consistency between, you should probably use a Component.
Currently, Components cannot be CMS-bound, or used within a Collection List.
