Block Styling
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Width
Height
Min Width
Min Height
Max Width
Max Height
Margin
Padding
Direction
Justify
Align Items
Wrap
Grow
Align Self
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.
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
Image (file or URL)
Repeat (repeat, repeat-x, repeat-y, no-repeat)
Position (left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom,
Attachment (scroll, fixed, local)
Size (auto, cover, contain)
These styling options are rarely needed, but they provide additional flexibility for expert users.
Display
Position
Top*
Right*
Left*
Bottom*
Transition
Easing (linear, ease, ease-in, ease-out, ease-in-out)
Perspective
Z Index
Transform
rotateX()
rotates an element around its X-axis at a given degree.
rotateY()
rotates an element around its Y-axis at a given degree.
rotateZ()
rotates an element around its Z-axis at a given degree.
scaleX()
defines a 3D scale transformation by giving a value for the X-axis.
scaleY()
defines a 3D scale transformation by giving a value for the Y-axis.
scaleZ()
defines a 3D scale transformation by giving a value for the Z-axis.
Pointer Events
Cursor
Auto (default), Allowed, Help, None, Pointer, Progress, Wait, Zoom In, or Zoom Out. Note: Pointer Events must be set to All for the Cursor changes can be applied.
Flex Container
Shrink
Basis
Order
Text Shadow
Overflow
Opacity
Box Shadow
Styles can also be configured for different devices.
.
.
.
.
.
.
When not using 'auto', the supported for the dimension properties are:
Recommended reading: and .
: Row, Row reverse, Column, or Column reverse.
: Start, End, Space between, Space around, or Centre.
: Start, End, Bottom, Stretch, Centre.
: No wrap, Wrap, Wrap reverse.
: Auto, Start, End, Bottom, Stretch, Centre.
: Arial, Arial Black, Brush Script MT, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, Verdana
Either string or an integer along with a fixed (px) or relative (%, em, rem, vh, or vw) .
: Thin, Extra-Light, Light, Normal, Medium, Semi-Bold, Bold, Extra-Bold, or Ultra-Bold.
Normal, italic, or oblique.
using a fixed (px) or relative (%, em, rem, vw, or vh) .
by name, RGB, or RGBA.
: Left (default), Center, Right, or Justify.
: Underline, Strikethrough, or None (default).
(default normal).
(default normal).
Either string or an integer along with a fixed (px) or relative (%, em, or rem) .
by name, RGB, or RGBA.
in px or em.
in px or em.
in px or em.
in px or em.
: Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset, or None.
by name, RGB, or RGBA.
, each comprising:
block, inline, inline-block, flex (default), or none.
static (default), relative, absolute, or fixed.
(default auto).
(default auto).
(default auto).
(default auto).
The supported for properties marked with a * are:
, each comprising:
(all, width, height, background-color, transform, box-shadow, opacity)
how many seconds the effect lasts
A lower value will result in a more intensive 3D effect than a higher value.
:
: All (default) or None.
:
, each comprising an X position, Y position, and Blur (px or %) - as well as a Color (name, RGB, or RGBA).
: visible (default), hidden, scroll, or auto.
, where 1 is not at all transparent, 0.5 is 50% see-through, and 0 is completely transparent.
, 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).