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.

Text component in a dashboard card
Text component in a dashboard card

Text Properties

The Text component (type = text) uses the following properties:

Property Type Description Required?
title ​String Text displayed in bold above the value no
value ​String ​​Content to display. Max 160 characters. yes
link ​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
style String set to warning or large-warning 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.
no

These images shows how the properties are used to display the component.

Properties of a Text component
Properties of a Text component

Here’s an example of the JSON to display the text components in the above image.



[
    {
        "type": "text",
        "value": "This is some text without a title or link."
    },
    {
        "type": "text",
        "title": "Exciting Announcement",
        "value": "This is a Text component with a title.",
        "link": "https://myurl.com:jwt"
    },
    {
        "type": "text",
        "title": "Important Announcement",
        "value": "This is the 'warning' style of Text component.",
        "style": "warning",
        "link": "https://myurl:jwt"
    }
]

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 warning or large-warning styles, the Text component should be placed at the top of the card.

Help make these docs better!