Anatomy

- Text container: Contains your custom stylized text and formatting; a border is a styling option
Usage
Use this component anywhere you want to use flexible, custom text. Stylized text uses CSS, so you can configure any font, size, and color, in addition to having a wide range of formatting options. This component can be used anywhere in an experience, such as in a workspace, portal page, or knowledge article.
Configurations
Learn how to customize stylized text by configuring the available properties.
Plugin
To use this component, you must activate the com.servicenow_now_stylized_text plugin on your ServiceNow instance.
Presets and controllers
This component has a preset configuration that sets properties and event handlers, making it ready for use. You can override preset values with a custom configuration if needed. Preset values won’t upgrade with updates. To avoid using presets, configure manually. One preset can apply to a single component instance. See presets for more info.
A preset is linked to a controller, which serves as a data resource. Controllers provide configuration data and event bindings for the component. Selecting a preset adds the required controller to the page, allowing new components to use its preset. For more on controllers, see controllers. For default presets, see view properties and events in the controller API.
Display text
Enter any text you want to display. There is no effective character limit for this field.
HTML tag
You can configure stylized text to display your content in any of 5 heading levels, a standard paragraph format, or as div, pre, or span tags.
CSS editing
If the HTML tags offered don’t fit your design or theme, you can edit the CSS and provide any style or effect you need. The CSS enables you to specify background images for your text.
Usability
Stylized text complies with all internationalization and accessibility requirements.
Internationalization
When this component is used in a platform configured for a right-to-left (RTL) language, the text aligns on the right.
Accessibility
Keyboard interactions
Arrow Keys: Used to access and read plain text when the screen reader is in browse/read mode.
Note: Because stylized text has no actionable elements in it, the tab key can’t select the component.