Comment on page
Block Styling
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.

Styles can also be configured for different devices. See the Devices article for more details on devices.​
The General section contains style options that pertain to how the Block is positioned and displayed.
Style | CSS Property |
---|---|
Display | ​ display specifies the type of rendering box of an element: block, inline, inline-block, flex (default), or none. |
Position | ​ position specifies the type of positioning used for an element: static (default), relative, absolute, or fixed. |
Top* | |
Right* | |
Left* | |
Bottom* |
- fixed: px
- relative: % and vh/vw
Style | CSS Property |
---|---|
Width | |
Height | |
Min Width | |
Min Height | |
Max Width | |
Max Height | |
Margin | |
Padding |
- fixed: px
- relative: % and vh/vw
Style | CSS Property |
---|---|
Flex Container | Enable flex to let all the flexible items be the same length, regardless of content. |
Direction | ​ flex-direction specifies the direction of the flexible items: Row, Row reverse, Column, or Column reverse. |
Justify | ​ justify-content aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally): Start, End, Space between, Space around, or Centre. |
Align Items | ​ align-items specifies the default alignment for items inside the flexible container: Start, End, Bottom, Stretch, Centre. |
Wrap | |
Grow | |
Shrink | |
Basis | |
Order | |
Align Self | ​ align-self specifies the alignment for the selected item inside the flexible container: Auto, Start, End, Bottom, Stretch, Centre. |
Style | CSS Property |
---|---|
Font | ​ font-family specifies the font for an element: Arial, Arial Black, Brush Script MT, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, Verdana |
Font size | ​ font-size sets the size of a font. Either string or an integer along with a fixed (px) or relative (%, em, rem, vh, or vw) css unit. |
Weight | ​ font-weight sets how thick or thin characters in text should be displayed: Thin, Extra-Light, Light, Normal, Medium, Semi-Bold, Bold, Extra-Bold, or Ultra-Bold. |
Wrap Text | Sets whether text should be wrapped: Yes or No. |
Wrap Text At | The options are Spaces, Capitals and Symbols, and Anywhere. |
Letter Spacing | |
Word Spacing | ​ word-spacing increases or decreases the space in pixels between words in a text (default normal). |
Font Color | |
Line Height | ​ line-height specifies the height of a line using a fixed (px) or relative (%, em, rem, vw, or vh) css unit. |
Text Align | ​ text-align specifies the horizontal alignment of text in an element: Left (default), Center, Right, or Justify. |
Text Decoration | ​ text-decoration specifies the decoration added to the text: Underline, Strikethrough, or None (default). |
Text Shadow | ​ text-shadow adds one or more layers to the text, each comprising an X position, Y position, and Blur (px or %) - as well as a Color (name, RGB, or RGBA). |
Style | CSS Property |
---|---|
Overflow | ​ overflow sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction: visible (default), hidden, scroll, or auto. |
Opacity | ​ opacity sets the transparency of an element, where 1 is not at all transparent, 0.5 is 50% see-through, and 0 is completely transparent. |
Background Color | The background of an element is the total size of the element, including padding and border (but not the margin). |
Border Width | |
Border Style | ​ border-style sets the style of an element's four borders: Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset, or None. |
Border Color | |
Border Radius | Add rounded borders to the corners of elements: |
Box Shadow | ​ box-shadow adds one or more shadow layers to an element, each comprising an X position, Y position, Blur, and Spread (px or %) - as well as a Color (name, RGB, or RGBA) and Shadow Type (Outside, Inside). |
Background |
|
Style | CSS Property |
---|---|
Transition |
|
Perspective | ​ perspective defines how far the object is away from the user. A lower value will result in a more intensive 3D effect than a higher value. |
Z Index | |
Transform |
|
Pointer Events |
Last modified 17d ago