🦚How to style components (basics)

Styling components is what we do maybe most of the time. Here you'll learn the basics about how to style with our builder.

https://firebasestorage.googleapis.com/v0/b/savvy-flow-uploads/o/oNrQLV6ZiVBavUmAkfcu%2FHow%20to%20style%20a%20component_660843411712384.mp4?alt=media&token=f20d98a0-ac9c-4ad4-baad-76c1dced05a8firebasestorage.googleapis.com

1. In the "Edit" sub-menu, click the brush icon to open up the "Designer" card.

2. Select the component you want to style.

To style a component it should always have a tag.

1. If the component doesn’t yet have a tag: a. Click on “Add a Tag” and write a tag name in the “Add a tag to this component” input. b. Search for an existent tag and select it, or press "Enter" to create a new one.

2. Select the property you want to set. CSS properties are grouped by categories in a couple tags (Size, Spacing, Position, etc...).

3. Set a value for the desired property.

4. When you feel you have finished styling your component, click the “Done” button to close the card.

Related Docs:

Styling CSS properties that are not there in the designer card (custom properties)

Styling hover, selected, disabled button states

How to style a specific component element (E.g. buttons image)