Style Pane
While working with Avonni Flow Screen Components, you may find some common styling properties across most components.
This page walks you through:
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
Marginsection, enter the desired value. - The Preview canvas will automatically adjust
.gif?alt=media&token=ec626c53-a7cf-46ed-bcc6-2f51279297ee)
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 colorFont Size: Define a font sizeFont Weight: Define a font weight to change how thin or heavy the weight is for your font.Font Style: Define a font styleFont Family: Define a font familyLine Height: Define a line height for changing the line-height of textHorizontal Alignment: Define horizontal alignment
Styling text settings
- Open the Component Builder to access advanced settings
- Click on the Styles Panel
- Find the
Border Colorproperty if the component has one - Add a
Border Radiusproperty, 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 Styleif 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
widthandheightto fit your needs Overflowattributes allow you to clip content or add scrollbars when an element's content is too big to fit in a specified area.Advanced Optionsgives you the ability to specify max and min height/width.
.gif?alt=media&token=6943f81b-48a9-4747-88c8-7fe16d2b866a)
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 it easy to ensure that your components' look and feel are consistent and even easier to update them.
Lightning Tokens can be found for some components under the tokens menu.
.gif?alt=media&token=fe6e39ad-0dd7-4e20-9433-79f9ffb41926)
Switching from manual to Tokens values
Foreground color is the color that an element appears in. For example, when 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 inline start margin, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
Last modified 5mo ago