# Style Panel ## Overview The Style Panel is an essential feature for Salesforce of the Avonni Components Package for Salesforce Flow Builder. This powerful panel enables Salesforce Admins to apply detailed stylistic customizations to each Avonni component, ensuring a tailored and brand-aligned user interface within their Salesforce environment. ### **Key Benefits** * **Branding Alignment**: Maintain consistency with your corporate branding across all Salesforce screens. * **User Engagement**: Enhanced styling leads to a more engaging and intuitive user experience. * **Design Efficiency**: Quickly implement design changes without extensive coding, saving time and resources ## Accessing the Style Panel The Styles Panel is accessible directly from the Component Builder. * Select an Avonni Flow Screen Component from your Flow Screen Canvas. * Click on the "**`Open Component Builder`**" button. * Click on the "**`Style`**" panel {% embed url="" %} ## Adding Margin ### Overview Margins are used to create space around elements, outside of any defined borders. By default, margins are customizable by using SLDS **`tokens`**. For specific needs, margins can be customizable manually.
| Token Name | Value | | ---------- | -------- | | xxx-small | 0.125rem | | xx-small | 0.25rem | | x-small | 0.5rem | | small | 0.75rem | | medium | 1rem | | large | 1.5rem | | x-large | 2rem | | xx-large | 3rem | ### How to add a margin Adding a margin value allows for adjusting the overall size of the component. * Select the component to adjust. * Open the Component Builder to get access to the Styles Panel. * Under the **`Margin`** section, enter the desired value. * The Preview canvas will automatically adjust
## Styling Text Using various properties you can customize the Text of a lot of components. Text can be customized on the **`Title`**, **`Label`**, **`Header`** and more. Here are the Text attributes you can style: * **`Color`** : Define a color * **`Font Size`** : Define a font size * **`Font Weight`** : Define a font weight to change how thin or heavy the weight is for your font. * **`Font Style`** : Define a font style * **`Font Family`** : Define a font family * **`Line Height`** : Define a line height for changing the line-height of text * **`Horizontal Alignment`** : Define horizontal alignment

Styling text settings

## Adding Border * Open the Component Builder to access advanced settings * Click on the Styles Panel * Find the **`Border Color`** property if the component has one * Add a **`Border Radius`** property, enter the value 50. By default, the value 50 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the corner icon () to each corner separately. * Add a **`Border Color`**. * Set a **`Border Size`**. * Change **`Border Style`** if needed. {% embed url="" %} ## Changing component size You may want to change the default size of some components to match your size constraints. You can do so using the `Size` styling property. To change the size of a component: * Open the Component Builder to access advanced settings * Click on the Styles Panel * Find the **Size** property, if the component has one * Adjust `width` and `height` to fit your needs * `Overflow` attributes allow you to clip content or add scrollbars when an element's content is too big to fit in a specified area. * `Advanced Options` gives you the ability to specify max and min height/width.
## Tokens Capture the essential values of your styling attributes into named tokens. Use the defined token values and reuse them throughout your components' styling. Lightning Tokens make ensuring that your components' look and feel are consistent and even easier to update. Lightning Tokens can be found for some components under the tokens menu.

Switching from manual to Tokens values


## Styling glossary ### Foreground color The foreground color is the color that an element appears in. For example, when the avatar icon is styled to appear green, the *foreground color* of the avatar icon has been set to green. ### Overflow The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. {% hint style="info" %} The overflow property only works for block elements with a specified height. {% endhint %} ### Block Start The margin-block-start property in CSS defines the amount of space along the outer starting edge of an element in the block direction. ### Block End The Block End styling settings provide a convenient way to customize the appearance of the final element within a design block. ### Block Between The Block Between styling settings enable you to effortlessly customize the appearance of elements positioned between the beginning and end of a design block. ### Inline Start The inline-start CSS property defines an element's logical start margin, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. ### Inline End ### Inline Between --- # 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.avonnicomponents.com/flow/component-builder/style-panel.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.