Style Manager

When a Block is selected, it can be styled under the 'Block Styling'  tab in the Toolbox. Styling can include changing the text color, background color, borders, typography, or dimensions of the Block. This allows you to customize the look and feel of the application based on themes or color palettes for your specific organization. You can also customize the style of certain actions such as hovering over or clicking a button, or changing the style for every second Block.
A Block can also be assigned to a style group where a common set of styles can be configured and applied to multiple Blocks at the same time.
Certain Blocks such as content cards or cards that are dragged onto the canvas already have pre-existing style groups, such as grids. These will show up under the 'Style Group'.
If you have a Style Group selected and make changes to any of the styling configurations, the styling will automatically be applied to all the Blocks that are also in that style group. For example, if two grids have a style group called box-card, and you select only one of the grids and change the background to light blue, that change will also be applied to the other grid. 
To make changes without affecting other blocks, deselect the style group and make the changes. 
You can add multiple style groups at a time. If a Block has multiple style groups and you only want to apply styling to one of them, make sure only that style group is selected when configuring new styles. 
If multiple style groups are selected and the styling is changed, the styling will be applied to both of them together. For example, if you have two style groups, box-card, and lightgreen, and you apply styling to both of them, that styling will only be applied to Blocks that have both box-card and lightgreen style groups. 
Devices
Styles can also be configured for different devices. See the Devices article for more details on devices.​
Style Sections
General
The General section contains style options that pertain to how the Block is positioned and displayed.
Style
CSS Property
Display
​The display property specifies the display behavior (the type of rendering box) of an element.​
Position
​The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute, or sticky).
Top
​The top property affects the vertical position of a positioned element.​
Right
​The right property affects the horizontal position of a positioned element. ​
Left
​The left property affects the horizontal position of a positioned element.​
Bottom
​The bottom property affects the vertical position of a positioned element.​
Dimension
Style
CSS Property
Width
​The width property sets the width of an element.​
Height
​The height property sets the height of an element.​
Min Width
​The min-width property defines the minimum width of an element.​
Min Height
​The min-height property defines the minimum height of an element.​
Max Width
​The max-width property defines the maximum width of an element.​
Max Height
​The max-height property defines the maximum height of an element.​
Margin Top
​The margin-top property sets the top margin of an element.​
Margin Right
​The margin-right property sets the right margin of an element.​
Margin Bottom
​The margin-bottom property sets the bottom margin of an element.​
Margin Left
​The margin-left property sets the left margin of an element.​
Padding Top
​The padding-top property sets the top padding (space) of an element.​
Padding Right
​The padding-right property sets the right padding (space) of an element.​
Padding Bottom
​The padding-bottom property sets the right padding (space) of an element.​
Padding Left
​The padding-left property sets the right padding (space) of an element.​
Flex Layout
Style
CSS Property
Flex Container
​The display property specifies the display behavior (the type of rendering box) of an element.​
Direction
​The flex-direction property specifies the direction of the flexible items.​
Justify
​The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).​
Align (align-items)
​The align-items property specifies the default alignment for items inside the flexible container.​
Grow
​The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.​
Shrink
​The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.​
Basis
​The flex-basis property specifies the initial length of a flexible item.​
Order
​The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.​
Align (align-self)
​The align-self property specifies the alignment for the selected item inside the flexible container.​
Flex Wrap
​The flex-wrap property specifies whether the flexible items should wrap or not.​
Typography
Style
CSS Property
Font
​The font-family property specifies the font for an element.​
Font size
​The font-size property sets the size of a font. The supported css units are:
fixed: px
relative: %, em, rem, vh, and vw
Weight
​The font-weight property sets how thick or thin characters in text should be displayed.​
Letter Spacing
​The letter-spacing property increases or decreases the space between characters in a text.​
Font Color
​The color property specifies the color of text.​
Line Height
​The line-height property specifies the height of a line.​
Text Align
​The text-align property specifies the horizontal alignment of text in an element.​
Text Decoration
​The text-decoration property specifies the decoration added to text, and is a shorthand property for:​
​text-decoration-line (required)​
​text-decoration-color​
​text-decoration-style​
Text Shadow
​The text-shadow property adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text.​
Decorations
Style
CSS Property
Opacity
​The opacity property sets the opacity level for an element.​
​The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.​
Background Color
​The background-color property sets the background color of an element.​
​The background of an element is the total size of the element, including padding and border (but not the margin).​
Border Width (Top)
​The border-top-width property sets the width of an element's top border.​
Border Width (Right)
​The border-right-width property sets the width of an element's right border.​
Border Width (Bottom)
​The border-bottom-width property sets the width of an element's bottom border.​
Border Width (Left)
​The border-left-width property sets the width of an element's left border.​
Border Style
​The border-style property sets the style of an element's four borders. This property can have from one to four values.​
Border Color
​The border-color property sets the color of an element's four borders. This property can have from one to four values.​
Border Radius (Top Left)
​The border-top-left-radius property defines the radius of the top-left corner.​
Border Radius (Top Right)
​The border-top-right-radius property defines the radius of the top-right corner.​
Border Radius (Bottom Left)
​The border-bottom-left-radius property defines the radius of the bottom-left corner.​
Border Radius (Bottom Right)
​The border-bottom-right-radius property defines the radius of the bottom-right corner.​
Box Shadow
​The box-shadow property attaches one or more shadows to an element.​
Background
​The background property is a shorthand property for:​
​background-color​
​background-image​
​background-position​
​background-size​
​background-repeat​
​background-origin​
​background-clip​
​background-attachment​
Extra
Style
CSS Property
Transition
​The transition property is a shorthand property for:​
​transition-property​
​transition-duration​
​transition-timing-function​
​transition-delay​
Perspective
​The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.​
Transform (Rotate X)
​The rotateX() method rotates an element around its X-axis at a given degree.​
Transform (Rotate  Y)
​The rotateY() method rotates an element around its Y-axis at a given degree.
Transform (Rotate Z)
​The rotateZ() method rotates an element around its Z-axis at a given degree.​
Transform (Scale X)
​The scaleX() method defines a 3D scale transformation by giving a value for the X-axis.​
Transform (Scale Y)
​The scaleY() method defines a 3D scale transformation by giving a value for the Y-axis.​
Transform (Scale Z)
​The scaleZ() method defines a 3D scale transformation by giving a value for the Z-axis.​
Pointer Events
​The pointer-events property defines whether or not an element reacts to pointer events.​
Further Reading
​How to use Style Manager and Devices​
​How to use Flex​

Page Layers

Devices

Last modified 7mo ago

Style	CSS Property
Display	The `display` property specifies the display behavior (the type of rendering box) of an element.
Position	The `position` property specifies the type of positioning method used for an element (static, relative, fixed, absolute, or sticky).
Top	The `top` property affects the vertical position of a positioned element.
Right	The `right` property affects the horizontal position of a positioned element.
Left	The `left` property affects the horizontal position of a positioned element.
Bottom	The `bottom` property affects the vertical position of a positioned element.

Style	CSS Property
Width	The `width` property sets the width of an element.
Height	The `height` property sets the height of an element.
Min Width	The `min-width` property defines the minimum width of an element.
Min Height	The `min-height` property defines the minimum height of an element.
Max Width	The `max-width` property defines the maximum width of an element.
Max Height	The `max-height` property defines the maximum height of an element.
Margin Top	The `margin-top` property sets the top margin of an element.
Margin Right	The `margin-right` property sets the right margin of an element.
Margin Bottom	The `margin-bottom` property sets the bottom margin of an element.
Margin Left	The `margin-left` property sets the left margin of an element.
Padding Top	The `padding-top` property sets the top padding (space) of an element.
Padding Right	The `padding-right` property sets the right padding (space) of an element.
Padding Bottom	The `padding-bottom` property sets the right padding (space) of an element.
Padding Left	The `padding-left` property sets the right padding (space) of an element.

Style	CSS Property
Flex Container	The `display` property specifies the display behavior (the type of rendering box) of an element.
Direction	The `flex-direction` property specifies the direction of the flexible items.
Justify	The `justify-content` property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
Align (align-items)	The `align-items` property specifies the default alignment for items inside the flexible container.
Grow	The `flex-grow` property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
Shrink	The `flex-shrink` property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
Basis	The `flex-basis` property specifies the initial length of a flexible item.
Order	The `order` property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
Align (align-self)	The `align-self` property specifies the alignment for the selected item inside the flexible container.
Flex Wrap	The `flex-wrap` property specifies whether the flexible items should wrap or not.

Style	CSS Property
Font	The `font-family` property specifies the font for an element.
Font size	The `font-size` property sets the size of a font. The supported css units are: fixed: px relative: %, em, rem, vh, and vw
Weight	The `font-weight` property sets how thick or thin characters in text should be displayed.
Letter Spacing	The `letter-spacing` property increases or decreases the space between characters in a text.
Font Color	The `color` property specifies the color of text.
Line Height	The `line-height` property specifies the height of a line.
Text Align	The `text-align` property specifies the horizontal alignment of text in an element.
Text Decoration	The `text-decoration` property specifies the decoration added to text, and is a shorthand property for: text-decoration-line (required) text-decoration-color text-decoration-style
Text Shadow	The `text-shadow` property adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text.

Style	CSS Property
Opacity	The `opacity` property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Background Color	The `background-color` property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin).
Border Width (Top)	The `border-top-width` property sets the width of an element's top border.
Border Width (Right)	The `border-right-width` property sets the width of an element's right border.
Border Width (Bottom)	The `border-bottom-width` property sets the width of an element's bottom border.
Border Width (Left)	The `border-left-width` property sets the width of an element's left border.
Border Style	The `border-style` property sets the style of an element's four borders. This property can have from one to four values.
Border Color	The `border-color` property sets the color of an element's four borders. This property can have from one to four values.
Border Radius (Top Left)	The `border-top-left-radius` property defines the radius of the top-left corner.
Border Radius (Top Right)	The `border-top-right-radius` property defines the radius of the top-right corner.
Border Radius (Bottom Left)	The `border-bottom-left-radius` property defines the radius of the bottom-left corner.
Border Radius (Bottom Right)	The `border-bottom-right-radius` property defines the radius of the bottom-right corner.
Box Shadow	The `box-shadow` property attaches one or more shadows to an element.
Background	The `background` property is a shorthand property for: background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment

Style	CSS Property
Transition	The `transition` property is a shorthand property for: transition-property transition-duration transition-timing-function transition-delay
Perspective	The `perspective` property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
Transform (Rotate X)	The `rotateX()` method rotates an element around its X-axis at a given degree.
Transform (Rotate Y)	The `rotateY()` method rotates an element around its Y-axis at a given degree.
Transform (Rotate Z)	The `rotateZ()` method rotates an element around its Z-axis at a given degree.
Transform (Scale X)	The `scaleX()` method defines a 3D scale transformation by giving a value for the X-axis.
Transform (Scale Y)	The `scaleY()` method defines a 3D scale transformation by giving a value for the Y-axis.
Transform (Scale Z)	The `scaleZ()` method defines a 3D scale transformation by giving a value for the Z-axis.
Pointer Events	The `pointer-events` property defines whether or not an element reacts to pointer events.