Site components

A site component is a part you build once, such as a project card, a call to action or a team row, and place on any page. Each placement is an instance: it follows the component, so a change to the component reaches every page, while each instance keeps its own words, links and pictures in the fields you expose.

Before you start #

• You need the Content editor role or higher.
• Build and style the part first, on any page, until it looks the way every copy should. A component copies the selected element and everything inside it.
• A component is not a preset. A preset is copied once and then lives on its own; an instance stays linked to its component.

Make a component from a layer #

1. In Layers, open the … menu on the row of the part, and choose Create component…. The menu shows how many fields it will expose: N fields exposed.
2. The form proposes:
   • the component's name, starting from the layer's name;
   • one field per piece of content an instance will want to change, each named by its role: Title, Text, Button label, Link, Image ("Title 2" for a second title).
3. Rename any field under Field name. The name is what an editor reads on the instance's Settings tab, so prefer "Project name" to "Title".
4. Choose Create.

The part on the page is replaced by an instance of the new component. Its row in Layers becomes a single row with a Component chip, named after the component.

You can also do it from the sidebar: select the part, open the Components tab next to Layers, choose New component from selection, type the Component name and choose Create. The same fields are exposed.

Place an instance #

1. Open the Add panel where you want it (Add section, Insert, or a + in the preview).
2. Choose the Site components category, or search for the component's name.
3. Choose the component. The instance is inserted and selected.
4. On the inspector's Settings tab, fill the exposed fields for this placement. A field you leave empty shows the component's own value.

Change one instance only #

Exposed fields cover most changes. For anything else inside the instance:

1. Select the inner element in the preview. A first click selects the instance; click again to select the element under the pointer. A ⌘-click (Ctrl-click on Windows and Linux) selects it at once.
2. The inspector says Changes here apply to this instance only. Edit the field.
3. The element now shows Overridden. Reset to component clears that override and the element follows the component again.

Change every instance #

1. Select an instance and choose Edit component in the bar at the top of the inspector. Or open the Components tab and choose Open next to the component.
2. The component opens on its own canvas. Edit it like any page: text, layout, styles, motion.
3. Every instance on every page follows. Overrides and the values of exposed fields stay as they were.

Choose what an instance may change #

With the component open, the Components tab shows Exposed props under the list:

1. Add prop adds a row.
2. Give it a Field name, and under Fills pick which field of which inner element it writes, for example the title text or the image. Besides content fields, you can expose the component's Theme or a part's Variant, so an instance can switch from light to dark or pick another button style the design system defines.
3. Optionally give a Default.
4. Remove (×) deletes a row. Choose Save props.

If no prop is exposed, the instance's Settings tab says This component exposes no props: edit it on its own canvas.

Detach an instance #

Detach, in the instance's bar, replaces the instance with a plain copy of what it shows, with its overrides applied. The copy no longer follows the component, and the component's motion does not come with it.

What you see #

• In Layers, an instance is one row with the Component chip; its inner elements are not listed there.
• In the Components tab, the site's components with Search components, or No components yet.
• In the inspector of an instance, the component's name, Edit component and Detach, then the exposed fields.

Pitfalls #

• Create component… is missing from the menu. It is offered on an element of a page, not on an instance and not inside a component's own canvas.
• Bound content. Create component… is refused when the part holds an element that shows page, site or item data (a title bound to the page title, a card picked inside a collection list), because the copy cannot keep the binding outside its page. The admin shows an error, in English, and no component is made.
• Header and footer components. A component made from a header or footer part, such as the navigation bar, can only be placed in the header or footer.
• Nesting. An instance inside a component works, but you edit only one level deep from a page. A collection list (repeater) inside a component is not supported yet.
• Detach is not undone by the component. Once detached, later changes to the component do not reach that copy. Use undo right away if you detached by mistake.
• Motion plays per instance. A scene on the component plays once for each instance on the page; three cards with an entrance scene enter three times.

Related #

• Build a page
• Layers and canvas
• Components and variants (design-system components, a different thing)
• Hand a site to a client