# Designer Card {% hint style="info" %} 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. {% endhint %} {% @arcade/embed flowId="lt0zjOQi3qSJVghqpbTM" url="" %} ## 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: {% content-ref url="../how-tos/design-how-tos" %} [design-how-tos](https://docs.trysavvy.com/how-tos/design-how-tos) {% endcontent-ref %} {% content-ref url="../how-tos/general-how-tos" %} [general-how-tos](https://docs.trysavvy.com/how-tos/general-how-tos) {% endcontent-ref %} {% content-ref url="../how-tos/logic-how-tos" %} [logic-how-tos](https://docs.trysavvy.com/how-tos/logic-how-tos) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.trysavvy.com/guides/designer-card.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.