Text Card

Text Cards display only static text that is not connected to an object in the system (i.e. it does not react to object changes). The Text Card can be used anywhere static content is required, such as providing basic informational content.

  • Usage
  • Configuration
  • Examples

The Text Card is the building block of most screens, providing static text for main screens, overlay panels, and other use cases where plain text is needed. This card can be used with or without a background, at any size, and is thus easy to combine with other components for a varied presentation of both text and visual content.

The Text Card does not represent specific data, items, or sets of items in the system like the other card components. Instead, this card contains only information written by the designer and will not update as data in the system is updated.

The Text Card is most useful for conveying information to users that does not change frequently and is not tied to a specific item in the system.

Anatomy

  1. Title

  2. Description

Best practices

  • For accessibility, use high-contrast card background colors when deviating from the default (white (#ffffff) and Deep Ocean are recommended).
  • While the larger section in which a card is located can add context to that card's content, ensure that cards stand alone and do not rely on other components for understanding or relevance.
  • Configure Text Cards as small or medium components on the grid. Avoid configuring a card in a single column, as this can cause accessibility issues.
  • When combining multiple cards on the same row of the grid, design for the largest card because all cards will match the height of the largest card.

Properties

  • Apply Card Background checkbox – Optional. If selected, a card background is applied to the card, which sets the component apart from the screen background. If not selected, the default background displays.
  • Title Source Type checkbox – Optional. Specifies the source of the card title. If selected, the title is retrieved from a source specified in Title Data Source. When the Title Source Type checkbox is not selected, the title displays as static text.
  • Title field – Optional. The title that displays for the card.
  • Title Data Source field – Conditionally required if the Title Source Type checkbox is selected. The query that retrieves the data for the card title, based on the data model.
  • Content field – Optional. The text that displays on the card body, centered both vertically and horizontally.
  • Background Color field – Optional. The hex code for the card background color.
  • Minimum Card Height field – Required. The minimum height of the card in pixels.
  • Visibility Permission field – Optional. The user's permission to access the component. If a user is not assigned a role that includes this permission, they cannot view or interact with the component.
  • Visibility Permission Not Assigned drop-down – Optional. If the user does not have permission to access the component, specifies whether to hide or disable it:
    • Hide – The component is hidden.
    • Disable – The component is visible but not cannot be interacted with.

With title

  • Apply Card Background not selected.
  • Title included.
  • Content not included.
  • Background Color not included.

With description

  • Apply Card Background not selected.
  • Title not included.
  • Content included.
  • Background Color not included.

With title and description

  • Apply Card Background not selected.
  • Title included.
  • Content included.
  • Background Color not included.