Text

Text

In a nutshell

The Text element displays a block of written content on the portal page. It is the primary way to add any readable, static text to a layout which can be combined with other elements to add more contextual depth to that aligns with your brand identity.

1. Overview

The Text element is the primary way to add readable content to a portal page. It renders a static string entered directly in the Display tab of the Properties pane and can be combined with other elements to build cohesive branding layouts. The text content's visual appearance can be controlled separately through the Style tab for the following states:

  1. Default - The text is visible but not focused on
  2. Hover - The primitive is highlighted as the user moves their pointer over it


Ideal for:

  1. Page headings and section titles
  2. Descriptive marketing content and instructions for portal users
  3. Short labels paired alongside icons or images
  4. Static written content that does not require dynamic data.

2. Display property

  1. Text - The Display tab controls what the Text element shows. Any text value that includes alphabets, numbers, and special characters can be displayed through this element.

3. Styling properties

The Text element can be styled independently over its Default and Hover visual states.

  1. Layout *link*
  2. Font *link*
  3. Background *link*
  4. Padding *link*
  5. Margin *link*
  6. Corner Radius *link*
  7. Border *link*
  8. Shadow *link*
  9. Opacity *link*

4. Action properties

The Actions tab controls what happens when a portal user clicks a text and triggers a preconfigured ON CLICK action. The actions can be:

  1. None - No action is performed when the text is clicked. This is the default option for the ON CLICK action.
  2. Navigate To - Navigates the portal user to a destination when the text is clicked. Selecting this option reveals two additional properties.
    1. Page / URL - This is the navigation's destination. You can either enter a publicly accessible URL directly, or select from the list of portal pages available in the dropdown. The dropdown lists all default pages (Sign In, Sign Up, Reset Password, and Create Password) and any custom pages created in the portal.
    2. Open In - This property controls how the destination loads. While Same Window reloads the current browser tab to display the destination portal page or URL, New Window opens it in a separate browser tab.

5. Try it yourself

Add a Text element and try the following:

  1. Set the font size to 32px, weight to Bold, and alignment to Center to create a page heading.
  2. Apply a background color and a Corner Radius of 6px to make the text container look like a tag or badge.
  3. Reduce Opacity to 50% and layer the element behind another to create a faded secondary label effect.

6. Points to note

  1. The shadow property renders behind the element's container and not behind individual characters of the text element.
  1. Configuring and managing portal pages *link*