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 contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.
A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, 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.