> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/guides/designer-card.md).

# 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="/files/yMag1O1vLWKUTblR55m9" alt=""></td><td>Designer Card</td><td>This is the whole Designer card.</td></tr><tr><td><img src="/files/hyVESpFu05swIrgOxwsr" 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="/files/pOl6jkDBCqjLzf8c4igQ" 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="/files/JarAB4mVYvcncV4qJ4VL" 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="/files/zUs0HlGFzuRlCdoZRr0m" 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="/files/Reg9Tec8q8ErwCBJtgyF" 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="/files/v5EpNjJ1uSWyArbX99Fq" 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="/files/C2IOBcgDQ9vW0NdtbYao" 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="/files/VQrBnBCn77fxWLpmb520" 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="/pages/XBUR4nDT5vq5ximgyDYU" %}
[Design How-To's](/how-tos/design-how-tos.md)
{% endcontent-ref %}

{% content-ref url="/pages/3vz5029KElhSbAzNFdak" %}
[General How-To's](/how-tos/general-how-tos.md)
{% endcontent-ref %}

{% content-ref url="/pages/ijS1SFcgxwO3o0wJmZhs" %}
[Logic How-To's](/how-tos/logic-how-tos.md)
{% endcontent-ref %}