Styling components
XM Cloud Components lets you design components by adding and configuring elements within a component. You can configure elements by adjusting their layout, alignment, sizing, and placement, using the settings available in the right-hand pane of the Components builder.
You can also style your components and elements using the styles library. This library is built in the Styles builder, where a designer has created and saved element styles and themes. Some of these styles are specifically assigned to specific element categories and to themes. They are the allowed styles for an element or theme. The other styles, which are saved in the library but assigned to other elements or themes, are called available styles.
For styling and customizing styles, you have the following options:
-
Style a component - style an entire component in just a click with one of the themes.
-
Customize a theme - customize the theme of a component by changing the style of all elements of a specific type (for example, all cards, or all image blocks) with another allowed style than the default style, or any other available style.
-
Style an element - style one specific element in the component with an allowed style for the element.
-
Customize an element - customize one specific element by styling one or more of its features with another available style from the styles library that was not initially assigned to this element.
-
Make a one-off customization of an element - customize one specific element even further by accessing in the Components builder all configuration settings usually only available in the Styles builder. This one-off customization in the Components builder only affects the element you are styling, and can not be reused elsewhere.