Quick guide to get started into styling flow components.
Some specific things like tags and a few component options are set on the Options Tab, but all of the styling itself gets done in the Design Tab. Here you'll find a detailed explanation of the Design Tab and its different areas.
Component and Element Selection
Select the component you want to add styles to
Go to the Design Tab on the Right Sidebar
"Choose an element" will allow you to affect different parts of the component
โ
Tagging Components
Go to the Options Tab on the Right Sidebar
Below the parent container dropdown, you'll see the component tags
No tags? Just write a new tag for it
This is helpful and good practice if you are going to apply the same styles to similar components in the flow
Applying Styles
Go to the Design Tab
Choose whether to apply the styles to:
This particular component
All components with the same key
All components with the same tag
Etc.
โ
Setting Styles
Keep scrolling on that Design Tab until you get to the Styles List.
Make your components beautiful.
Here you can add custom styles that are not included in the common styles list.
Using States
At the bottom of the "Choose an Element" area, there's a "Use states" Toggle.
Toggle it!
This will let you style different states of the component such as hover, selected, etc.
โ
Not all types of components have states, this feature is only available for components that do.