Swipe action (section list element) (mobile)
The swipe action element is a pseudo child-element of the Section list's list item:
Section list
List item
Swipe action
It's visible in the element tree, but cannot be added from the element palette. Instead, you add it in the properties of the list item.
The element gradually appears when the user swipes left or right on a list item. You can connect a workflow to the swipe action element just like other elements.
Add/delete action
The add/delete action buttons add or remove a sibling swipe action on the same side as the currently selected one. You can stack a total of three actions.
Visual
Content
Icon/label
Sets whether the element shows an icon, a text or both.
Label
Sets the label of the swipe action. Icon/label needs to be set to label or icon and label for this property to be visible.
Icon
Sets the icon of the swipe action. Icon/label needs to be set to icon or icon and label for this property to be visible.
Size
Sets the width and height of the element. These properties depend on the layout configuration of the parent element.
Parent container has a column or row layout
Width/height
Sets the width/height of the element. The column, row and align layouts have a more flexible way to set element position.
Fixed
Sets the width of the element as a fixed value.
Pixels: sets the width to a fixed pixel value
Percentage: sets the width to a percentage of the parent container
Fit
The element’s width and height automatically adjust based on the size of its child elements. To add a mininum and/or maximum value, click the + symbol.
Min: the minimum width/height, defined as a pixel value or percentage of the parent container.
Max: the maximum width/height, defined as a pixel value or percentage of the container.
Fill
The element's width and height fills the available space in the parent container. To add a mininum and/or maximum value, click the + symbol.
Min: the minimum width/height, defined as a pixel value or percentage of the parent container.
Max: the maximum width/height, defined as a pixel value or percentage of the container.
Parent container has a fixed layout
Width/height
Sets the width/height of the element. The fixed layout has a more rigid way of setting element size, based on static pixel values.
Fixed
Sets the width of an element as a fixed pixel value.
Layout
Alignment
Parent layout: Column
In a column layout, a child element's property is restricted to the vertical axis.
Left
Elements are aligned to the left edge.
Center
Elements are aligned to the vertical center of the container.
Right
Elements are aligned to the right edge.
Parent layout: Row
In a row layout, a child element's alignment property is restricted to the horizontal axis.
Top
Elements are aligned to the top edge of the container
Center
Elements are aligned to the horizontal center of the container.
Bottom
Elements are aligned to the bottom edge of the container.
Parent layout: Fixed
Elements are positioned using fixed X and Y coordinates, defined in pixels.
Spacing
Gap
Sets the distance between the icon and label in the swip action.
Padding
Defines the internal spacing between an element’s content and its border in a static pixel value. Padding adds space inside the element, without affecting its position relative to other elements.
Padding is added on the vertical and horizontal axis respectively.
Style
Style sets the visual design of the element, including properties such as colors, fonts, borders, shadows and other appearance settings.
Styles are shared across elements. When multiple elements use the same style, updating the style will automatically update all elements that reference it.
Style selector
Select the style to apply to the selected element.
Edit style
To edit the style, click the edit style icon. The changes to that style will apply to all elements using that style.
Detach style
Detaching the style will disconnect the element from the current style, but keep the formatting of the style until you make changes to it. This only affects the selected element.
Overriden styles
You can override a style on one or more elements, using the defined style properties but allowing you to make individual changes to styling properties that apply only to the selected element(s).
Overridden styles will be marked with an Overridden labelI.
You can reset the selected element's style by clicking the Reset icon.
Text
Sets the typography of the selected element(s). Only applies to elements that contain text.
Font
Sets the font family used for the text. You can choose a custom font or use a saved font variable.
Font weight
Sets the thickness of the text. Lower values (for example, 400) are lighter, while higher values (for example, 600 or 700) appear bolder.
Understanding font weight
Font weight is not calculated mathematically. It’s defined by the font itself.
Most modern fonts use a numeric weight scale from 100 to 900:
100–300: lighter weights
400: regular (normal)
500–600: medium / semi-bold
700: bold
800–900: extra bold / black
However, available weights differ between fonts. One font might include 400, 600, and 700, while another only includes 400 and 700. A weight of 700 in one font is also not guaranteed to look the same as 700 in another font.
The numeric scale (100–900) is standardized in CSS, but each font designer defines how thick “700” actually appears within that typeface.
Font size
Defines the size of the text in pixels.
Text alignment
Controls how text is aligned within the element: left, center, or right.
Text formatting
Applies inline formatting options such as bold, italic, and underline. Click the More properties icon for more formatting options.
Additional text properties
Word spacing
Defines the horizontal space between words. Increasing the value spreads words further apart; decreasing it brings them closer together.
Line spacing
Controls the vertical distance between lines of text (line height). Higher values improve readability for longer text blocks, while lower values create a more compact layout.
Letter spacing
Adjusts the horizontal space between individual characters. Positive values increase spacing (tracking), while negative values tighten the text.
Text alignment (vertical)
Controls how text is aligned vertically within its container (for example, aligned to the top or bottom when vertical alignment is enabled).
Text shadow
Adds a shadow effect behind the text. You can configure properties such as offset, blur, and color to create depth or improve contrast against the background.
Text color
Sets the color of the text. You can select a custom color or use a saved color variable.
Icon
Sets the icon size and color. Only applies to elements that contain an icon.
Appearance
The appearance section lets you control the opacity, rotation and radius (corner roundness) of the selected element(s).
Opacity
Opacity sets the transparency level of the selected element(s). At 100%, the element is fully opaque. At 0%, it is fully transparent (invisible).
Opacity affects child elements: If applied to a container, all child elements inherit the same opacity level.
Opacity does not collapse the element: Even at 0%, the element still occupies space in the layout. Unlike hiding an element (using This element is visible on page load, a conditional visibility rule, or a hide/show action), opacity does not reduce the element’s width or height to zero.
Background
Sets the background of the selected element(s) as a color, gradient or image.
Color
Sets the background color in a hex value. You can also set the opacity of the border. Can be a static or the result of a dynamic expression.
Gradient
Sets a gradient color, ranging from a start color and an end color, with an optional mid color.
Linear gradient
A linear gradient is a background effect where colors transition gradually along a straight line.
The gradient follows a defined direction (for example, top to bottom, left to right, or at a specific angle). Instead of a single solid color, the element displays a smooth blend between two or more colors across that line.
Top
The gradient begins at the top and transitions downward.
Left
The gradient begins on the left side and transitions horizontally to the right.
Bottom
The gradient begins at the bottom and transitions upward.
Right
The gradient begins on the right side and transitions horizontally to the left.
Custom
Allows you to define a specific angle for the gradient direction.
Radial gradient
A radial gradient is a background effect where colors transition outward from a central point.
Instead of following a straight line (like a linear gradient), the color spreads in a circular or elliptical shape from the center to the edges.
Radial gradient types
Circle
The gradient expands evenly in all directions from the center, forming a perfect circle.
Ellipse
The gradient expands in an oval shape, stretching more in one direction based on the element’s width and height.
Radial gradient expansion
Define how far the radial gradient extends from its center point.
They control which edge or corner of the element determines the gradient’s final size, affecting how quickly the color transition spreads across the element.
Closest side
The gradient expands from the center until it reaches the nearest side of the element.
Closest corner
The gradient expands from the center until it reaches the nearest corner of the element.
Farthest side
The gradient expands from the center until it reaches the farthest side of the element.
Farthest corner
The gradient expands from the center until it reaches the farthest corner of the element.
Stops
Sets the start and end point of the radial gradient. By default, it has a Start and End. Optionally, you can add an intermediate point by clicking the + symbol next to Stops.
Image
Sets an image as the element's background. The image can be a static file uploaded directly in the editor, or the result of a dynamic expression.
Upload
Upload a static image file to use as the background.
Make dynamic
Click the + icon to define a dynamic expression that returns the image to use as the background.
Interaction
Workflows
Shows the workflows connected to the selected element. Click the + symbol to create a new workflow associated with that element. The list of available events differs based on which element is selected.
Shortcut: To quickly add a workflow to a selected element, press Cmd+K on macOS or Ctrl+K on Windows. The shortcut defaults to the most likely event for that element type.
Options
Make interactive
Allows the swipe action to be interactive and trigger workflows.
Transitions
Transitions add animation when a style property changes.
Instead of updating instantly, the element gradually shifts from its previous state to the new one over a defined duration. For example, if you reduce an element’s width, a transition can make it smoothly shrink rather than change size immediately.
Transition styles
ease
Starts slowly, speeds up in the middle, and slows down at the end.
ease-in
Starts slowly and accelerates toward the end.
ease-out
Starts quickly and decelerates toward the end.
ease-in-out
Starts slowly, accelerates in the middle, and slows down again at the end.
linear
Moves at a constant speed from start to finish.
step-start
Jumps immediately to the end state at the start of the transition.
step-end
Remains in the start state and jumps to the end state at the very end of the transition.
Transition duration
Transition duration defines how long the transition animation runs, measured in milliseconds.
Advanced
ID attribute
A unique identifier assigned to the element. This can be used to reference the element in custom code, such as JavaScript or CSS, using document.getElementById() or CSS selectors.
For this property to be visible, you need to enable Expose the option to add an ID attribute to HTML elements in Settings – Advanced options.
Last updated
Was this helpful?