Create custom style classes and rules

Use style classes rules in UI Builder to apply custom visual styling to UI elements by referencing CSS classes.

Before you begin

Role required: admin

About this task

Control the appearance of fields, containers, buttons, and other interface components without writing inline styles making the UI cleaner, more consistent, and easier to maintain. All style classes and rules can be applied to any container or component on the page. For more information about CSS styles, see the ServiceNow Developer site and the ServiceNow Community site.

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create or open a page.
4. Add a component to your page.
5. Select the Styles tab in the configuration panel.
6. Select the ... icon next to the Style class field.
   The Page classes and rules pop up will appear.
7. Optional: Select + Add class.
   1. Enter a name in the Style class name field.
   2. Provide the CSS style you would like to apply to the component.
   3. Select Apply.
8. Optional: Select + Add rule.
   1. Enter a name in the Style rule name field.
   2. Provide the CSS rule you would like to apply to the component.
   3. Select Apply.
9. Close the Page classes and rules pop up.
10. Select the Style class field.
11. Select a style class or style rule from the list.
12. Select Save.
13. Select Preview to test the applied style class or style rule.