We announced component style variants this year at Webflow Conf, and are excited to share that it’s now available for all customers. 

Components are the reusable building blocks of your site letting you customize content while staying true to your site’s design. In the past, when a component had different designs for different contexts, it required you to create and manage multiple versions of the same component, or use complex workarounds involving visibility props or custom class attributes.

Component style variants dramatically simplifies this process, letting you define multiple style options for a single component – like a Button with solid and outline styles, or a Card with horizontal and vertical layouts. In addition to making it more efficient to find and build with these components, variants help ensure design consistency –as they inherit any change to the base.

Variants can even be combined and applied on nested components –allowing you to mix and match them for a wide range of scenarios. For instance, you can have a section where the headline has typography variants, Cards with layout variants, and a Button within those Cards with different color variants. 

This means fewer components for designers to maintain, fewer components for the rest of the team to sift through, and more flexibility for everyone –but don’t just take it from us. Here’s what some of our partners who participated in the beta had to say:

• Component style variants are a game changer for our team, giving us the ability to design and deploy robust design systems that our clients and partners can easily manage. —Ilya Kroogman, Founder, The Digital Panda

• With component style variants, I can now offer my clients greater flexibility when creating pages with components. Previously, I had to create multiple components for each minor difference or use the class attribute on custom elements, which was too complex for my clients. Now, they can easily change the style or layout of the component with a simple select element. —Kyle Craven, Designer & Webflow Developer

‍Visit our Help Center to learn how you can start designing with component style variants today.