Comment on page

Designer Card

Quick guide to get started into styling flow components.

Some specific things like a few component options are set on the Options Tab, but all of the styling itself gets done in the Designer Card. Here you'll find a detailed explanation of the Designer Card and its different areas. 
All Designer Card Options:
Image
Name
Description
​
​
Designer Card
This is the whole Designer card.
​
​
Styling Tags
With our builder, we ALWAYS style tags (CSS classes). So if the component you've selected doesn't have one, please "Add a tag" now.
​
​
Refining Selector
You may want to set a more specific selector. You can specify it by device or even by different parts of a component. For example, you may want to style a button's image when viewed on a mobile device for a specific tag, but only on this page. By refining the selector, you'll be fine-tuning your styles.
​
​
Screen sizes
Here you can choose on which kind of device (screen size-related) the styles you set are going to be applied. The default option is "All devices", which sets styles for computer screens. You can also choose "Tablet" or "Mobile".
​
​
+ Sub-Element
This dropdown will display a list of the sub-elements that the selected component has. From here, you can choose which specific sub-element you want to style.
​
​
+ Filter
In the "When" dropdown you'll find options like "hover", "disabled", "selected", etc. The options you'll see are going to depend on the kind of component you have selected.
Within the "In" dropdown, you'll be able to limit the reach of your tag. For example, you can select "This page" so that only the components with the tag you're styling and on this page would be affected by the styles you set.
​
​
Card Tabs
Tabs are groups of CSS properties that make it easier for you to find the property you want to set. Depending on the kind of component you have selected, you'll see a different set of tabs. Keep in mind that not all CSS properties can be applied to all kinds of elements.
​
​
Custom Properties
Not every CSS property is included on our tabs. If you want to use a not-so-common property and can't find it, you can always go to the last tab "Custom" and add any existing CSS property.
​
​
Style Input Section
This is the Inputs area, which changes depending on the tab you have selected. In this image you can see the properties from the "Size" tab.
How-tos sections:
Design How-To's
General How-To's
Logic How-To's

Image	Name	Description
	Designer Card	This is the whole Designer card.
	Styling Tags	With our builder, we ALWAYS style tags (CSS classes). So if the component you've selected doesn't have one, please "Add a tag" now.
	Refining Selector	You may want to set a more specific selector. You can specify it by device or even by different parts of a component. For example, you may want to style a button's image when viewed on a mobile device for a specific tag, but only on this page. By refining the selector, you'll be fine-tuning your styles.
	Screen sizes	Here you can choose on which kind of device (screen size-related) the styles you set are going to be applied. The default option is "All devices", which sets styles for computer screens. You can also choose "Tablet" or "Mobile".
	+ Sub-Element	This dropdown will display a list of the sub-elements that the selected component has. From here, you can choose which specific sub-element you want to style.
	+ Filter	In the "When" dropdown you'll find options like "hover", "disabled", "selected", etc. The options you'll see are going to depend on the kind of component you have selected. Within the "In" dropdown, you'll be able to limit the reach of your tag. For example, you can select "This page" so that only the components with the tag you're styling and on this page would be affected by the styles you set.
	Card Tabs	Tabs are groups of CSS properties that make it easier for you to find the property you want to set. Depending on the kind of component you have selected, you'll see a different set of tabs. Keep in mind that not all CSS properties can be applied to all kinds of elements.
	Custom Properties	Not every CSS property is included on our tabs. If you want to use a not-so-common property and can't find it, you can always go to the last tab "Custom" and add any existing CSS property.
	Style Input Section	This is the Inputs area, which changes depending on the tab you have selected. In this image you can see the properties from the "Size" tab.

Last modified 4mo ago