Component Properties

Properties are how instances of the same component differ from each other. The component's
author decides which controls are open for editing per instance; everything else stays in
sync across every placement. See the Components Overview for
what components are, and
Creating & Managing Components for how to
open one for editing.

Exposing a control as a property

While editing a component, hover any control on an element's Content tab — a
button appears next to the
control's label. Click it to expose that control as a property. Click the
arrow beside it to open Property Settings, where you set:

• Label — the name shown wherever the property can be edited. Without one, the
  property uses the control's own label.
• Property Key — the identifier the value is stored under. One is generated
  automatically; set your own if you want a readable key.

Content-tab controls can become properties — text, links, images, dropdowns, and so on —
except controls that live inside a repeating list of items. Design controls can't be
exposed; per-instance differences are for content, while the design stays consistent by
definition. The one exception outside the Content tab is the Visible toggle, covered
below.

Setting properties per instance

Select any instance of the component and its exposed properties appear in the properties
panel, right under the Block chooser. Set a value and only that instance changes — the
canvas updates as you type. A property left empty inherits the component's own value, so
you only override what should differ.

Showing or hiding elements per instance

To make an element inside the component optional — a badge, an icon, a second button —
expose its Visible toggle: select the element while editing the component, open the
Conditions tab, and click the button next to Visible. Give it a clear
label like "Show badge".

Each instance then gets that toggle. Switching it off removes the element from that
instance entirely — it isn't rendered at all, not just hidden with CSS. Visibility
toggles are listed before the other properties in the instance panel.

Using a property anywhere with Component Field

An exposed property doesn't have to feed only the control it came from. While editing the
component, click the dynamic data button on any
compatible control and choose Component Field (under the Component category). Its
Key dropdown lists the component's properties by label — pick one, and that control
renders the instance's value for the property. This lets a single property drive several
controls inside the component at once.

Tips