Component Properties

The properties attribute can be used to define custom properties on <Section>, <Banner>, <Box>, or <Element> tags. It is defined by providing an array of objects. Each object represents a property that will be displayed on the Properties tab within the page editor.
Use custom properties to enable additional layouts or functionality for a component.
"name": "layout",
"label": "Layout",
"attribute": "class",
"type": "select",
"options": [
{ "label": "Default", "value": "default" },
{ "label": "Full", "value": "full" },
{ "label": "Grid", "value": "grid" },
{ "label": "Offset", "value": "offset" },
{ "label": "Collage", "value": "collage" },
{ "label": "List", "value": "list" }
"default": "center",
"placeholder": "...",
"required": true
Component properties can be referenced using the properties variable. This variable is attached to the variable referenced by the dataRef of the component. For example, for Section components it's:
{ } // Outputs the layout
Properties can be used to add many powerful features to your components.


  • type: string - value for the type of the property. Can be one of text, number, select, multiselect, date, time, datetime, checkbox, checklist, or color.
  • name: string - value for the name of the property that will be stored in the tag configurations.
  • label: string (optional) - the label that will be shown to content authors. If not set it will pull the value from the name property and sentence case it (capitalize the first letter).
  • attribute: string (optional) - value for the rendered element's HTML attribute that will be changed by the property when set.
  • required: boolean (optional) - value for whether a value is required or not for the property. If set a default must be set.
  • placeholder: string (optional, text/number types only) - value for the HTML placeholder attribute of the control.
  • prefix: string (optional, text/number types only) - if set, prepends an uneditable prefix on the inputted value.
  • suffix: string (optional, text/number types only) - if set, appends an uneditable prefix on the inputted value (e.g. "px" on a number input would yield an input that looks like [____px].
  • options: Array (required only for select, multiselect, checklist types) - Array for options for the dropdown control (used when type is select or multiselect). The value is what will be set on the attribute.
  • default: (optional) - The default value for the property.