Style Pane

While working with Avonni Flow Screen Components, you may find some common styling properties across most components.
This page walks you through:

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

Adding Margin


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

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.

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.


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.
Switching from manual to Tokens values

Styling glossary

Foreground color

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.

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 inline start margin, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Inline End

Inline Between