Slots

Use slots for designing flexible components.

Slots are elements you can place in existing components that act as placeholders for other components. This allows you to build components modularly — that is, you can modify component instances to hold different components — offering more flexibility and versatility to your site's design.

How to add slots to main components

To add a slot to a main component, edit the main component, go to Add panel > Structure, and drag a Slot element into your component on the canvas or in the Navigator. A slot property will automatically be created. You can position a slot anywhere in your component.

You can rename a slot when editing the main component by double-clicking its name in the Navigator or at the top of the right panel, or by right-clicking the slot on the canvas and choosing Rename. The slot name will also appear on each instance of the component. You can also add a class in the Style panel.

You can add display settings to your slot and future components added to the slot will follow those display rules. By default, a slot is a div but you can change that in the Settings panel by setting its semantic tag.

How to edit slots on component instances

Once you've placed your slot in the main component, you can add components to that slot on component instances. To add components to a slot, drag components from the Components panel into the slot.

You can also nest slots within slots, by adding a slot to a component, then adding that component to an existing slot. This is a powerful workflow for creating adjustable designs.

You can't bind a slot property to a parent slot property. However, if you have a nested component in a component containing a slot you can add a slot into that component's slot as a workaround.

If you delete a slot from a component, all elements added to that slot will also be deleted for each of the component's instances.

How to set default content for a slot

An empty slot gives no indication of what belongs there, and without defaults the same setup has to be rebuilt on every instance. Designers can add components to a slot in the main component so every new instance starts with content already in place.

To set default content for a slot:

1. Edit the main component that contains the slot
2. Drag components from the Components panel into the slot

While you're editing the main component, you can configure the properties of the components you added — button text and links, for example. A slot can hold more than one instance of the same component as default content, and each one keeps its own property values.

New instances of the component include the slot's default content, along with any property settings you configured.

You can also set a slot's default components in the Properties panel while editing the main component — select the slot property, then click Add component under Default.

To change the shared default, edit the slot content in the main component. Your changes apply to instances whose slot content hasn't been customized.

Customize slot content on an instance

You can edit or replace the default content on a component instance — change a default button's text, for example, or replace it with another allowed component.

Customizing the slot content creates an override for that instance. The slot no longer receives changes to the main component's default content, and other instances aren't affected.

Reset a slot to its default content

If you've customized a slot on an instance, you can restore the main component's current default content:

1. Right-click the slot on the canvas or in the Navigator
2. Choose Reset slot

Reset slot removes the instance's slot override, and the slot receives future changes to the shared default again. It appears only if the slot content on that instance has been customized.

Clear a slot's content

To leave a slot empty on an instance, select the component(s) added to the slot and press Delete.

Restrict which components are allowed in a slot

By default, a slot accepts any component. If you want more control, you can restrict a slot to only allow specific components, so anyone with the Marketer role building with that component stays within the boundaries you set.

Once you set allowed components for a slot, marketers see a filtered list when they use the add button on the slot or open the Components panel with the slot focused, so they only see components that are allowed there. If they try to add a restricted component using another method, like Command+K, they'll see an error indicating that the component can't be used.

To restrict the components allowed in a slot:

1. Open the Components panel, hover over the component you want to edit and click Open component
2. Select the slot you want to restrict
3. Click the Settings tab
4. Under Allowed components, click Choose components
5. Choose the components you want to allow in that slot
6. Click Save

To remove a component from the allowed list or reset the list to allow all:

1. Open the Components panel, hover over the component you want to edit and click Open component
2. Select the slot you want to edit
3. Click the Settings tab
4. To remove a component from the list: click the trash icon to the right of the component
5. To reset the list: click Choose components > Allow all

Slot defaults and allowed components

Components used as slot defaults are always allowed in that slot, and the Allowed components list marks each one as (default). You can't remove a default from the list while it's used as default content.

Limitations

• You can't place an instance of a component inside its own slot
• Properties on components used as slot defaults can't be connected to parent component properties or CMS fields from a parent's Collection list. Connections to global sources, such as page links, are supported.
• Components in CMS rich text fields display their slot defaults, but you can't edit their slot content within the rich text field