# 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="<https://app.arcade.software/share/lt0zjOQi3qSJVghqpbTM>" %}

## All Designer Card Options:

<table><thead><tr><th width="292">Image</th><th width="146.33333333333331">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FNC2vUuKJphNOw3V0fUSa%2Fimage.png?alt=media&#x26;token=121a8024-2291-4c0c-8ed6-15afbb5d1d2c" alt=""></td><td>Designer Card</td><td>This is the whole Designer card.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FFKtV3niSgGgZJciI0ut9%2Fimage.png?alt=media&#x26;token=1d089cee-df2e-4cd4-b63b-a5455a2a81f1" alt=""></td><td>Styling Tags</td><td>With our builder, we <strong>ALWAYS</strong> style tags (CSS classes). So if the component you've selected doesn't have one, please "<strong>Add a tag</strong>" now.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fpv0Tbrxn0LW4Vax248wK%2Fimage.png?alt=media&#x26;token=1ea85ead-4c2c-4e22-ab97-5219873df4a3" alt="" data-size="original"></td><td>Refining Selector</td><td>You may want to set a <strong>more specific selector</strong>. You can specify it <strong>by device</strong> or even by different <strong>parts of a component</strong>. 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.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FUizjVgwgM9oi8k1s5tkx%2F2023-03-10_15h32_21.png?alt=media&#x26;token=e8146bf7-c8e8-45b1-9875-d1c329b9d307" alt="" data-size="line"></td><td>Screen sizes</td><td>Here you can choose on which kind of device (<strong>screen size-related</strong>) the styles you set are going to be applied. The default option is "<strong>All devices</strong>", which sets styles for computer screens. You can also choose "<strong>Tablet</strong>" or "<strong>Mobile</strong>".</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FKrRQE6xWhWyDLD1316c6%2Fimage.png?alt=media&#x26;token=361bd1fd-24d3-4baf-b697-538e68d6d790" alt=""></td><td>+ Sub-Element</td><td>This dropdown will display a list of the <strong>sub-elements</strong> that the <strong>selected component</strong> has. From here, you can choose which specific sub-element you want to style.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FiomQ3DV0tbke54SVE4el%2Fimage.png?alt=media&#x26;token=09041b03-5426-4f1c-abc0-94801bd05750" alt=""></td><td>+ Filter</td><td>In the "<strong>When</strong>" dropdown you'll find options like "<strong>hover</strong>", "<strong>disabled</strong>", "<strong>selected</strong>", etc. The options you'll see are going to depend on the kind of component you have selected.<br>Within the "<strong>In</strong>" dropdown, you'll be able to limit the <strong>reach of your tag</strong>. For example, you can select "<strong>This page</strong>" so that only the components with the tag you're styling and on this page would be affected by the styles you set.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FdwFARYnMOGMa8DsP3H1r%2Fimage.png?alt=media&#x26;token=2607241b-1cf9-4941-b9ce-d10d937c21ef" alt=""></td><td>Card Tabs</td><td>Tabs are <strong>groups of CSS properties</strong> 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.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FA9AV7ZmmaHrrYfeFjuJm%2Fimage.png?alt=media&#x26;token=f2211f9b-90d2-4647-bae2-5930d3231368" alt=""></td><td>Custom Properties</td><td>Not every <strong>CSS property</strong> is included on our tabs. If you want to use a <strong>not-so-common property</strong> and can't find it, you can always go to the last tab "<strong>Custom</strong>" and add any existing CSS property.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FmbGSclyE28vnXJ7WcahE%2Fimage.png?alt=media&#x26;token=003be877-f05e-453f-8533-609afcf2544c" alt=""></td><td>Style Input Section</td><td>This is the Inputs area, which changes depending on the tab you have selected. In this image you can see the properties from the "<strong>Size</strong>" tab.</td></tr></tbody></table>

## 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 %}