Element Style

Element Style property group is related to the component itself. For any component, it allows to declare a component’s Custom Classes and to add custom CSS into the Element CSS Style property. Some components, like Panels, have more properties in this group related to their specific features.

Styles written here are directly applied to the outermost HTML wrapper of the Element part of the component, replacing the default ones.

Components that contain several distinct parts may have additional CSS Style fields targeted at each part separately.

To get more details on the Element structure principles, read the Element Part of a Component article.

Changing Element CSS Style

Use the Element CSS Style property if you want to apply CSS that targets the content of a component.

  1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add the CSS styles to the Element CSS Style property:

color: chocolate;
text-align: center;
font-size: 40px;
font-weight: 800;

  1. The style is applied once the field is out of focus, and the result is visible on the dashboard.

To take a deep dive into using CSS in component properties, visit the Applying CSS to Components section.

Was this page helpful?