Style Pane
Last updated
Last updated
The Style Pane is an essential feature for Salesforce of the Avonni Components Package for Salesforce Flow Builder. This powerful pane enables Salesforce Admins to apply detailed stylistic customizations to each Avonni component, ensuring a tailored and brand-aligned user interface within their Salesforce environment.
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
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
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 |
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
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
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 Color.
Set a Border Size.
Change Border Style if needed.
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.
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.
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.
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.
The overflow property only works for block elements with a specified height.
The margin-block-start property in CSS defines the amount of space along the outer starting edge of an element in the block direction.
The Block End styling settings provide a convenient way to customize the appearance of the final element within a design block.
The Block Between styling settings enable you to effortlessly customize the appearance of elements positioned between the beginning and end of a design block.
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.
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.
