Floating Actions Reference

Write the following CSS code in the CSS editor.

.floating-actions {
    -webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
    left: 0;
    right: auto;
}

.floating-actions-items {
    -webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
    padding-left: var(--space-s);
}

.floating-actions-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
}

.floating-actions-item-button {
    margin-left: 0;
    margin-right: var(--space-base); 
}

Publish and test.

Drag the Floating Actions Pattern into the preview.

In the Items placeholder, drag a List Records widget.

Set the Line Separator property of the List Records to None.

In the List Records, drag a Floating Actions Item.

In the Floating Actions Item, use expressions to display the required content.

Publish and test.