1. Styling components

Customize an element

Elements have been assigned one or more styles in the Styles library. When you use an element in a component, it is styled according to the theme chosen for the component. It is possible to change that default style to a style that was originally assigned to the element in the styles library, or to another available style.

Optionally, you can apply a one-off customization on a specific element style. One-off style customization allows for unique combinations of one-off styles without creating many different rules to manage. Only the chosen element is affected by the changes, and the one-off customized style is not saved in the Styles library for reuse by other elements.

Customize a style

To customize a style by changing the style of one or more features of the style:

  1. In the Component builder, select the element you want to style. You can click the element in the canvas, or use the context toolbar in the bottom-left corner of the component.

  2. At the top of the right-hand pane, in the Style section, click the tile to open the Styles picker and choose the style you want to customize.

  3. To customize the selected style, click for the particular feature of the style you want to change, for example, Typography or Spacing.

  4. Turn on the option Show all available styles to see all the available styles previously built in the Styles builder. You can choose from feature styles that have been assigned to the element in addition to the default one, or from any feature style from the Styles library, even if they were not assigned to this element. These extra options are highlighted with a warning sign because using them detaches them from the original element style.

    Screenshot of the different feature style options

Create a one-off customization of a style

To create one-off customization of a style by creating a new configuration of one or more features of the style:

  1. In the Component builder, select the element you want to style. You can click the element on the canvas, or use the context toolbar in the bottom-left corner of the component.

  2. At the top of the right-hand pane, in the Style section, click the tile to open the Styles picker and choose the style you want to customize.

  3. Click for the particular feature of the style you want to change, for example, Typography or Spacing.

  4. Click > Custom .

  5. The right-hand pane displays the configuration options from the Styles builder that you can use to create a one-off custom design.

Screenshot showing the configuration option for one-off customization of an element feature.

The advanced style customization only applies to the existing component version, unless the element is duplicate linked. In this case, the customization applies to all versions sharing the linked element.

The design created here cannot be saved in the library, and cannot be reused. To make it a reusable design, you can create it and apply it to the element in the styles library.

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