uuid: 9fb7b0bc-9794-4efb-9198-0fe24c0a8115
langcode: en
status: true
dependencies:
  config:
    - cohesion_elements.cohesion_component_category.cpt_cat_layout_components
  content:
    - 'file:file:b8c42bb3-8cec-4cc0-aa2f-c99d3c980234'
  enforced:
    module:
      - acquia_cms_site_studio
label: Spacer
id: cpt_spacer
json_values: |
  {
      "canvas": [
          {
              "type": "container",
              "uid": "container",
              "title": "Container",
              "status": {
                  "collapsed": true
              },
              "uuid": "8e21625a-b2cf-4843-9861-76207986f306",
              "parentUid": "root",
              "children": []
          }
      ],
      "componentForm": [
          {
              "type": "form-container",
              "uid": "form-tab-container",
              "title": "Tab container",
              "status": {
                  "collapsed": false
              },
              "options": {
                  "formBuilder": true
              },
              "uuid": "125a5371-5501-4345-948e-90f397419e4f",
              "parentUid": "root",
              "children": [
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "uuid": "b8a7ff3e-bc15-414c-a3c8-2bfe671df8a7",
                      "parentUid": "form-tab-container",
                      "children": [
                          {
                              "type": "form-container",
                              "uid": "form-section",
                              "title": "Field group",
                              "status": {
                                  "collapsed": true,
                                  "collapsedParents": [
                                      "b8a7ff3e-bc15-414c-a3c8-2bfe671df8a7"
                                  ]
                              },
                              "options": {
                                  "formBuilder": true
                              },
                              "uuid": "0f37ff38-a3dd-4335-a0bf-e90cacb452ad",
                              "parentUid": "form-tab-item",
                              "children": [
                                  {
                                      "type": "form-field",
                                      "uid": "form-range-slider",
                                      "title": "Range slider",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": [
                                              "0f37ff38-a3dd-4335-a0bf-e90cacb452ad"
                                          ]
                                      },
                                      "uuid": "72f8059c-7ab7-417f-a980-4efa330b97a1",
                                      "parentUid": "form-section",
                                      "children": []
                                  },
                                  {
                                      "type": "form-field",
                                      "uid": "form-range-slider",
                                      "title": "Range slider",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": [
                                              "0f37ff38-a3dd-4335-a0bf-e90cacb452ad"
                                          ]
                                      },
                                      "uuid": "470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd",
                                      "parentUid": "form-section",
                                      "children": []
                                  },
                                  {
                                      "type": "form-field",
                                      "uid": "form-range-slider",
                                      "title": "Range slider",
                                      "status": {
                                          "collapsed": false,
                                          "collapsedParents": [
                                              "0f37ff38-a3dd-4335-a0bf-e90cacb452ad"
                                          ]
                                      },
                                      "uuid": "f0e200c8-bd2b-4864-819a-ab0da895ce9d",
                                      "parentUid": "form-section",
                                      "children": []
                                  }
                              ]
                          }
                      ]
                  },
                  {
                      "type": "form-container",
                      "uid": "form-tab-item",
                      "title": "Tab item",
                      "status": {
                          "collapsed": true,
                          "collapsedParents": []
                      },
                      "options": {
                          "formBuilder": true
                      },
                      "uuid": "0b8c2a48-2e6b-414a-b18e-b15a43274ffa",
                      "parentUid": "form-tab-container",
                      "children": [
                          {
                              "type": "form-help",
                              "uid": "form-helptext",
                              "title": "Help text",
                              "status": {
                                  "collapsed": false,
                                  "collapsedParents": [
                                      "0b8c2a48-2e6b-414a-b18e-b15a43274ffa"
                                  ]
                              },
                              "uuid": "8e3ace90-c2d8-413f-a1e9-b13f9feb9152",
                              "parentUid": "form-tab-item",
                              "children": []
                          }
                      ]
                  }
              ]
          }
      ],
      "mapper": {
          "8e21625a-b2cf-4843-9861-76207986f306": {
              "settings": {
                  "selectorType": "topLevel",
                  "formDefinition": [
                      {
                          "formKey": "container-settings",
                          "children": [
                              {
                                  "formKey": "container-width",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "width",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "common-link-animation",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "linkAnimation",
                                          "active": true
                                      },
                                      {
                                          "name": "animationType",
                                          "active": true
                                      },
                                      {
                                          "name": "animationScope",
                                          "active": true
                                      },
                                      {
                                          "name": "animationParent",
                                          "active": true
                                      },
                                      {
                                          "name": "animationTarget",
                                          "active": true
                                      },
                                      {
                                          "name": "animationScale",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDirection",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDistance",
                                          "active": true
                                      },
                                      {
                                          "name": "animationPieces",
                                          "active": true
                                      },
                                      {
                                          "name": "animationOrigin",
                                          "active": true
                                      },
                                      {
                                          "name": "animationFoldHeight",
                                          "active": true
                                      },
                                      {
                                          "name": "animationHorizontalFirst",
                                          "active": true
                                      },
                                      {
                                          "name": "animationIterations",
                                          "active": true
                                      },
                                      {
                                          "name": "animationEasing",
                                          "active": true
                                      },
                                      {
                                          "name": "animationDuration",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "common-link-modifier",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "modifier",
                                          "active": true
                                      },
                                      {
                                          "name": "modifierType",
                                          "active": true
                                      },
                                      {
                                          "name": "interactionScope",
                                          "active": true
                                      },
                                      {
                                          "name": "interactionParent",
                                          "active": true
                                      },
                                      {
                                          "name": "interactionTarget",
                                          "active": true
                                      },
                                      {
                                          "name": "modifierName",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "container-style",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      },
                                      {
                                          "name": "customStyle",
                                          "active": true
                                      }
                                  ]
                              },
                              {
                                  "formKey": "container-markup",
                                  "breakpoints": [],
                                  "activeFields": [
                                      {
                                          "name": "htmlMarkup",
                                          "active": true
                                      },
                                      {
                                          "name": "htmlMarkupCustom",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "form": null
              },
              "styles": {
                  "items": [],
                  "formDefinition": [
                      {
                          "formKey": "layout",
                          "children": [
                              {
                                  "formKey": "height",
                                  "breakpoints": [
                                      {
                                          "name": "xl"
                                      },
                                      {
                                          "name": "sm"
                                      },
                                      {
                                          "name": "ps"
                                      }
                                  ],
                                  "activeFields": [
                                      {
                                          "name": "min-height",
                                          "active": false
                                      },
                                      {
                                          "name": "max-height",
                                          "active": false
                                      },
                                      {
                                          "name": "height",
                                          "active": true
                                      }
                                  ]
                              }
                          ]
                      }
                  ],
                  "selectorType": "topLevel",
                  "form": null
              }
          },
          "f0e200c8-bd2b-4864-819a-ab0da895ce9d": {},
          "470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd": {},
          "72f8059c-7ab7-417f-a980-4efa330b97a1": {}
      },
      "model": {
          "8e21625a-b2cf-4843-9861-76207986f306": {
              "settings": {
                  "title": "Container - span",
                  "width": "fluid",
                  "customStyle": [
                      {
                          "customStyle": ""
                      }
                  ],
                  "htmlMarkup": "span"
              },
              "context-visibility": {
                  "contextVisibility": {
                      "condition": "ALL"
                  }
              },
              "styles": {
                  "settings": {
                      "element": "container"
                  },
                  "styles": {
                      "xl": {
                          "height": {
                              "value": "[field.72f8059c-7ab7-417f-a980-4efa330b97a1]"
                          }
                      },
                      "sm": {
                          "height": {
                              "value": "[field.470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd]"
                          }
                      },
                      "ps": {
                          "height": {
                              "value": "[field.f0e200c8-bd2b-4864-819a-ab0da895ce9d]"
                          }
                      }
                  }
              }
          },
          "125a5371-5501-4345-948e-90f397419e4f": {
              "settings": {
                  "type": "cohTabContainer",
                  "title": "Tab container",
                  "responsiveMode": true
              }
          },
          "b8a7ff3e-bc15-414c-a3c8-2bfe671df8a7": {
              "settings": {
                  "title": "Layout",
                  "type": "cohTabItem",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "0f37ff38-a3dd-4335-a0bf-e90cacb452ad": {
              "settings": {
                  "title": "Space (Height)",
                  "type": "cohSection",
                  "hideRowHeading": 0,
                  "columnCount": "3",
                  "breakpoints": false,
                  "propertiesMenu": false,
                  "disableScrollbar": true,
                  "disableEllipsisMenu": true,
                  "isOpen": true,
                  "removePadding": 0,
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "72f8059c-7ab7-417f-a980-4efa330b97a1": {
              "settings": {
                  "title": "Desktop",
                  "type": "cohRange",
                  "min": 0,
                  "max": 800,
                  "step": 8,
                  "schema": {
                      "type": "number"
                  },
                  "tooltipPlacement": "auto right",
                  "suffix": "px",
                  "machineName": "desktop"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": 80
              }
          },
          "470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd": {
              "settings": {
                  "title": "Tablet",
                  "type": "cohRange",
                  "min": 0,
                  "max": 800,
                  "step": 8,
                  "schema": {
                      "type": "number"
                  },
                  "tooltipPlacement": "auto right",
                  "suffix": "px",
                  "machineName": "tablet"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": 80
              }
          },
          "f0e200c8-bd2b-4864-819a-ab0da895ce9d": {
              "settings": {
                  "title": "Phone",
                  "type": "cohRange",
                  "min": 0,
                  "max": 800,
                  "step": 8,
                  "schema": {
                      "type": "number"
                  },
                  "tooltipPlacement": "auto right",
                  "suffix": "px",
                  "machineName": "phone"
              },
              "contextVisibility": {
                  "condition": "ALL"
              },
              "model": {
                  "value": 80
              }
          },
          "0b8c2a48-2e6b-414a-b18e-b15a43274ffa": {
              "settings": {
                  "title": "Help",
                  "type": "cohTabItem",
                  "breakpointIcon": ""
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          },
          "8e3ace90-c2d8-413f-a1e9-b13f9feb9152": {
              "settings": {
                  "title": "Help text",
                  "type": "cohHelpText",
                  "options": {
                      "showClose": false,
                      "helpType": "help",
                      "helpText": "# Using the Spacer component\n- Use the spacer component to add additional vertical space within a layout.\n- The spacer component is useful for fine control over content position by device width. For example, if content is sat over a background image, the spacer component can be used to push the content down to expose more of the image."
                  }
              },
              "contextVisibility": {
                  "condition": "ALL"
              }
          }
      },
      "previewModel": {
          "0b8c2a48-2e6b-414a-b18e-b15a43274ffa": {},
          "72f8059c-7ab7-417f-a980-4efa330b97a1": {},
          "b8a7ff3e-bc15-414c-a3c8-2bfe671df8a7": {},
          "0f37ff38-a3dd-4335-a0bf-e90cacb452ad": {},
          "470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd": {},
          "f0e200c8-bd2b-4864-819a-ab0da895ce9d": {},
          "8e21625a-b2cf-4843-9861-76207986f306": {
              "styles": {
                  "styles": {
                      "xl": {
                          "min-height": {},
                          "height": {}
                      }
                  }
              }
          },
          "8e3ace90-c2d8-413f-a1e9-b13f9feb9152": {}
      },
      "variableFields": {
          "0b8c2a48-2e6b-414a-b18e-b15a43274ffa": [],
          "72f8059c-7ab7-417f-a980-4efa330b97a1": [],
          "b8a7ff3e-bc15-414c-a3c8-2bfe671df8a7": [],
          "0f37ff38-a3dd-4335-a0bf-e90cacb452ad": [],
          "470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd": [],
          "f0e200c8-bd2b-4864-819a-ab0da895ce9d": [],
          "8e21625a-b2cf-4843-9861-76207986f306": [
              "styles.styles.xl.height.value",
              "styles.styles.sm.height.value",
              "styles.styles.ps.height.value"
          ],
          "8e3ace90-c2d8-413f-a1e9-b13f9feb9152": []
      },
      "meta": {
          "fieldHistory": [
              {
                  "uuid": "f0e200c8-bd2b-4864-819a-ab0da895ce9d",
                  "type": "form-range-slider",
                  "machineName": "phone"
              },
              {
                  "uuid": "470a86f1-ea1b-4491-8d21-a3c8ca8aa8dd",
                  "type": "form-range-slider",
                  "machineName": "tablet"
              },
              {
                  "uuid": "72f8059c-7ab7-417f-a980-4efa330b97a1",
                  "type": "form-range-slider",
                  "machineName": "desktop"
              }
          ]
      }
  }
json_mapper: '{}'
last_entity_update: entityupdate_0042
locked: false
modified: true
selectable: true
category: cpt_cat_layout_components
preview_image: 'public://element-preview-images/Spacer_0.png'
has_quick_edit: true
entity_type_access: {  }
bundle_access: {  }
twig_template: component--cohesion-cpt-spacer
weight: 9
