Components

Instances

• Select an instance of a component to see its variant and properties in the Component section of Properties.
• Each property has the control its type needs: text, a number, a colour, an image, a link, a yes-or-no switch, a choice, an icon from the library, or the component or variant a nested instance shows. Text bound to a property is also edited on the canvas: double-click it.
• A value you set on the primary breakpoint is the instance's own; the reset button next to a property brings back the component's default.
• On another breakpoint, a value applies there and on the narrower breakpoints. The override dot next to the property resets it to the inherited value.
• The variant works the same way: on a narrower breakpoint, pick another one for smaller screens, for example a compact card on phones. Its override dot resets it to the variant of the wider breakpoint.

Variants

• Open a component's master and select a layer: the Variants section lists its variants, the primary one first. The primary variant is the master itself.
• Add variant adds one that starts as a copy of the primary, and shows it. While a variant shows on the canvas, what you change in Properties is changed for that variant only; the override dot next to a field resets it or pushes it to the variant it comes from.
• Hover, Press and Focus show the variant as it looks when a visitor points at it, presses it or reaches it with the keyboard. What you change then is changed in that state only, and the canvas shows it without you having to hover. Choose the state again to see the variant at rest.
• A variant's menu renames, duplicates, moves or deletes it. An instance that showed a deleted variant shows the primary one.

Changes inside an instance

• Double-click into an instance to select a layer inside it. What you change in Properties then applies to this instance only: the component and its other instances keep their look. The Instance overrides section says so.
• These changes apply at every breakpoint. A text changes per instance through a property: bind it in the component.
• The override dot next to a field resets it to the component's value; Reset all overrides resets the selected layers.
• When a layer that an instance changed leaves the component, the instance keeps its change, unused, so undo can bring it back. Clean up overrides removes such changes.