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.
Style Groups
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
Dimension
Style | CSS Property |
---|---|
Width | |
Height | |
Min Width | |
Min Height | |
Max Width | |
Max Height | |
Margin | |
Padding |
When not using 'auto', the supported css units for the dimension properties are:
fixed: px
relative: % and vh/vw
Flex Layout
Recommended reading: Flex and How to Use Flex.
Style | CSS Property |
---|---|
Direction | |
Justify | |
Align Items | |
Wrap | |
Grow | |
Align Self |
Typography
Style | CSS Property |
---|---|
Font | |
Font size | |
Font Weight | |
Font Style | |
Line Height | |
Font Color | |
Text Align | |
Text Decoration | |
Word Spacing | |
Letter Spacing | |
Wrap Text | Sets whether text should be wrapped: Yes or No. |
Wrap Text At | The options are Spaces, Capitals and Symbols, and Anywhere. |
Decorations
Style | CSS Property |
---|---|
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 Color | |
Border Radius | Add rounded borders to the corners of elements: |
Background |
|
Advanced Styling
These styling options are rarely needed, but they provide additional flexibility for expert users.
Advanced position and displayed styling
Style | CSS Property |
---|---|
Display | |
Position | |
Top* | |
Right* | |
Left* | |
Bottom* |
The supported css units for properties marked with a * are:
fixed: px
relative: % and vh/vw
Extra advanced styling
Style | CSS Property |
---|---|
Transition |
|
Perspective | |
Z Index | |
Transform |
|
Pointer Events |
Advanced flex layout styling
Style | CSS Property |
---|---|
Flex Container | |
Shrink | |
Basis | |
Order |
Typography advanced styling
Style | CSS Property |
---|---|
Text Shadow |
Advanced decoration styling
Style | CSS Property |
---|---|
Overflow | |
Opacity | |
Box Shadow |
Further Reading
Last updated