Slots

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 > Elements, 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 also add a name to your slot in the Element settings panel and a class in the Style panel. You can change the name of the slot property in the Props panel when you have the main component selected.

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 Element settings panel by setting its semantic tag.

Note: You cannot add a slot into regular lists, Collection lists, or links.

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. Note that you can’t edit components if they’re in a slot instance.

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.

Note: If you copy and paste a slot, all content in that slot will copy and paste too.

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.