The Text component displays lines of text. It’s useful to display simple tips or promotions. Unlike the other components, it doesn’t have to have a link that opens a takeover, as shown in the first Text component, below. It can also use the warning style to show important information, as shown in the last Text component.
The Text component (
type = text) uses the following properties:
||String||Text displayed in bold above the value||no|
||String||Content to display. Max 160 characters.||yes|
||URL||URL to the content that displays in the takeover when the arrow is clicked. Must be served over HTTPS. Can include a JWT token.||no|
||String set to
||Sets a warning style that uses orange for the title and places an orange highlight on the left edge.
If style is not set, it defaults to plain text.
These images shows how the properties are used to display the component.
Here’s an example of the JSON to display the text components in the above image.
Text Design Considerations
Keep the following in mind when using the Text component:
- Cards should typically only have 1 instance of a Text component, as cards are intended to show actionable data to the user, not involve reading a lot of static text.
- When using the
large-warningstyles, the Text component should be placed at the top of the card.