Skip to main content

Custom 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
    },
    ...
]

Arguments​

  • 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.