spacing

A four-direction spacing control with top, right, bottom, and left values. Use it for setting padding or margin on widget sections.

Properties

Property	Type	Required	Description
type	"spacing"	Yes	Field type identifier
label	string	Yes	Label shown in the builder
default	object	No	Default { top, right, bottom, left } values

Usage

schema.json

{
  "padding": {
    "type": "spacing",
    "label": "Section Padding",
    "default": {
      "top": 0,
      "right": 0,
      "bottom": 0,
      "left": 0
    }
  }
}

Template

<section style="padding: {{ widget.settings.padding.top }}px {{ widget.settings.padding.right }}px {{ widget.settings.padding.bottom }}px {{ widget.settings.padding.left }}px;">
  {# widget content #}
</section>

Output

{
  "padding": {
    "top": 20,
    "right": 16,
    "bottom": 20,
    "left": 16
  }
}

tip

Values are in pixels. You can use them directly in inline styles or map them to CSS classes.

Interactive Preview

Interactive Preview

Section Padding

top

left

content

right

bottom

Live Output

{
  "padding": {
    "top": 20,
    "right": 16,
    "bottom": 20,
    "left": 16
  }
}