Webflow Components Plus

Grotesque

This extension replaces Webflow text fields with dropdowns so you or your client can easily switch between preset values. To make it work you need to label your props like so: "Name of your prop {option A,option B,option C}" The comma separated values within curly brackets will become the options for the dropdown field. It's handy if you combine this with a CSS based styling system + custom attributes. You can make dramatic changes to your component styles without setting up a bunch of visibility props. You can setup custom attribute based CSS styles like so: .button[hierarchy="primary"]{ background-color: blue } .button[hierarchy="secondary"]{ background-color: gray } .button[hierarchy="tertiary"]{ background-color: transparent } Then, you can setup your custom attribute in your button component: Attribute name: hierarchy Attribute value: Assign a prop called "Hierarchy {primary,secondary,tertiary}" That's it. No more misspellings or confused end-users!