# Theme Spacing

Displays the Theme Studio Spacing control.

{% tabs %}
{% tab title="Control Example" %}

```json
{
  "title": "Card Padding",
  "id": "cardPadding",
  "themeSpacing": {
    "mode": "padding",
    "default": {
      "base": {
        "left": "sm",
        "right": "sm",
        "top": "sm",
        "bottom": "sm"
      },
      "md": {
        "left": "lg",
        "right": "lg",
        "top": "lg",
        "bottom": "lg"
      }
    }
  }
}
```

{% endtab %}

{% tab title="Group Example" %}

```json
{
  "groups": [{
    "title": "Card Layout",
    "properties": [{
      "title": "Card Padding",
      "id": "cardPadding",
      "themeSpacing": {
        "mode": "padding",
        "default": {
          "base": {
            "left": "sm",
            "right": "sm",
            "top": "sm",
            "bottom": "sm"
          },
          "md": {
            "left": "lg",
            "right": "lg",
            "top": "lg",
            "bottom": "lg"
          }
        }
      }
    }]
  }]
}
```

{% endtab %}
{% endtabs %}

The `themeSpacing` attribute should be used for all space settings like padding, margins, gaps, translate, and positioning.

This control allows the user's site to dynamically adapt to any theme updates, changes, or overrides to the spacing scale.

The themeSpacing control has the following modes:

* padding
* margin
* gap
* transition
* position
* single

Each one of these modes correspond to the appropriate Tailwind utility classes. This means both developers and users can manage one single spacing scale that help promote consistency across all sites built in RapidWeaver Elements. See the examples below for more information.

```json
{
  "groups": [{
    "title": "Section Spacing",
    "properties": [{
      "title": "Section Padding",
      "id": "sectionPadding",
      "themeSpacing": {
        "mode": "padding",
        "default": {
          "base": {
            "left": "md",
            "right": "md",
            "top": "xl",
            "bottom": "xl"
          },
          "md": {
            "left": "2xl",
            "right": "2xl",
            "top": "2xl",
            "bottom": "2xl"
          }
        }
      }
    }]
  }]
}
```

### Single Mode

The single mode allows you to access the spacing scale from the Theme Studio in a single select control. This is handy when you need to set a single property rather than all four properties (top, right, bottom left). For example, if you need to set only the `top` css property you can do so like this:

```json
{
  "title": "Badge Offset",
  "id": "badgeOffsetTop",
  "format": "top-{{value}}",
  "themeSpacing": {
    "mode": "single",
    "default": {
      "base": {
        "value": "2"
      }
    }
  }
}
```

In this example, the default value will be returned as `top-2`.

### Custom Values

You can also specify that a custom value should be used by default for the themeSpacing control. This allows you to gain precise control over the value of the spacing when your element is dropped on to a page.

### Linking Values


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/component/properties-json/ui-controls/theme-spacing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.