Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Text

Components > Displaying Data > Text
Use this component to...
Display simple text in your content, with styling options
See this component in action...
Test out this component in a hosted version of the sample app

Overview

You’ll display structured data with components like data grid, record detail, and tree view, but most applications also display some degree of simple text. Examples might include introductory text, text in help pages, or text in an About page.

The styling for simple text is automatically set at the body tag level by the theming. You can also mark certain text as bright, which makes it display bolder and in a brighter color, or error, which is appropriate for highlighting an error condition.

Your application may define additional text styling as needed, but that styling should never change the font face or color as those are defined by the theming.

Examples of themed text

This is regular text.

This is bright text.

This is error text.

Development

Web component development

The styling for text is set at the body tag level by the theming.

You can also apply the rui-regular-text-label, rui-bright-text-label, and rui-error-text-label CSS classes to elements to force them to display with regular, bright, and error text styling, respectively.

Import the module
<div class="rui-regular-text-label">This is regular text.</div>

<div class="rui-bright-text-label">This is bright text.</div>

<div class="rui-error-text-label">This is error text.</div>

To display standalone text in a function toolbar, add the text to a span that has the rui-function-toolbar-text themed CSS class applied.

Import the module
<rui-function-toolbar>
    <span class="rui-function-toolbar-text">NANCY DAVOLIO</span>
</rui-function-toolbar>

Angular wrapper development

The styling for text is set at the body tag level by the theming.

You can also apply the jha-regular-text-label, jha-bright-text-label, and jha-error-text-label CSS classes to elements to force them to display with regular, bright, and error text styling, respectively.

Import the module
<div class="jha-regular-text-label">This is regular text.</div>

<div class="jha-bright-text-label">This is bright text.</div>

<div class="jha-error-text-label">This is error text.</div>

To display standalone text in a function toolbar, add the text to a span that has the jha-function-toolbar-text themed CSS class applied.

Import the module
<jha-function-toolbar>
    <span class="jha-function-toolbar-text">NANCY DAVOLIO</span>
</jha-function-toolbar>

Design

Figma design

Figma design info
You can find this component in the Components - Text page in the Figma UI Kit.
Dev ComponentDesign Component Name
Regular textAdd text and apply the “rui-regular” text style and the “rui-pacific/text-regular” color style.
'Bright' textAdd text and apply the “rui-regular” text style and the “rui-pacific/text-bright” color style.
Error textAdd text and apply the “rui-regular” text style and the “rui-pacific/text-error” color style.
Anchor text (i.e. links)Add text and apply the the “rui-anchor” text style and “rui-pacific/accent” color style.

Adobe XD design

Adobe XD design info
You can find this component in these artboards in the Adobe XD design samples:
  • Sample App - Text
Dev ComponentDesign Component Name
Regular textAdd text and apply the “JHA / Text / Regular” character style.
'Bright' textAdd text and apply the “JHA / Text / Bright” character style.
Error textAdd text and apply the “JHA / Text / Error” character style.
Anchor text (i.e. links)Add text and apply the “JHA / Text / Anchor” character style.
Support options
Have questions on this topic?
Join the Responsive UI team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.
Last updated Tue Apr 18 2023