1. Prototyping components

Work with component versions

In the Component builder, a component can contain one or more different visual representations of the content displayed. These visual representations, called component versions, let teams quickly extend content without having to duplicate or reconfigure a component.

You can, for example, build versions with different images that can be used to personalize the component for specific audiences in Pages. You can also use versions and breakpoints to build responsive bundles, which are components where the rendering depends on the screen width at which they is seen.

Versions can share linked elements. This avoids repetitive work with content or style changes. For example, a common Call to Action button can be shared between all versions of a component. In this case, you only have to change the fill color of the button once to apply the change to all the buttons in every version.

Add a version to a component

To add an additional version to a component:

  1. In the Component builder, at the bottom of the page, click Add version.

  2. If the version is meant to be used to build a responsive component, set the breakpoints at which the version should be rendered.

You can start to build the new version by adding elements or typing text.

Note

The version is automatically named Name of a new version. You can change this to a more relevant name at any time.

Duplicate a component version

After you have styled and configured a component, you can duplicate it. This lets you create versions with different layouts without having to build from scratch or restyling every time.

To copy a component version:

  1. In the Component builder, in the top-right corner of a component, click Actions.

  2. Click Duplicate version .

The copy of the component appears below the component that you copied.

Delete or archive a component version

To delete a version of a component:

  1. In the Component builder, click Actions of the version you want to delete.

  2. Click Delete.

If the version was previously staged and/or published, it is archived instead of deleted, and you can therefore restore it.

To restore an archived version:

  1. Scroll to the bottom of the component versions to find the archived versions.

  2. Click Show archived versions.

  3. Click Unarchive on the version you want to restore.

If you have suggestions for improving this article, let us know!