Layout overlay

Overview

A flexible overlay container component that allows positioning child blocks in fixed positions on the screen corners. Supports both app and theme blocks with customizable corner positioning and z-index control. Ideal for chat widgets, promotional banners, or notification elements.

Common use cases

• Use for floating/fixed position blocks on the screen like chat widgets, promotional banners, or notification elements

• Configure position and spacing using the block settings

• Control visibility for different device sizes

Compatible blocks

The following blocks can be nested within this block:

• All theme blocks

• App blocks

Block settings

Spacing

Setting	Description	Options
Enable padding	Adds padding around the overlay content	Checkbox (default: true)
Gap size	Controls spacing between child blocks	• None • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Color scheme	Controls the background and text colors	• Body • Neutral • Accent 1 (default) • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Color border	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not blank

Style

Setting	Description	Options
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All

Layout

Setting	Description	Options
Rotation	Rotates the overlay content	• None (default) • Right 90° • Left 90°
Horizontal position	Controls horizontal positioning of the overlay	• Left (default) • Center • Right
Vertical position	Controls vertical position as percentage from top	0 - 100 % (default: 100)
Enable margin	Applies margin based on theme settings	Checkbox (default: false)

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only