Highlight
The Highlight element emphasizes key numeric values or labels. It is visually styled to stand out within form sections, totals, or inline summaries. This element appears in scheduling, billing, and form validation workflows.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Highlight | UI component type |
| Group | Text | Belongs to the "Text" group in UI catalog |
| Identifier | 24 | Unique element ID |
| Preview | ✓ | See image preview above |
| Value | Accepts content injected by the system | |
| Mandatory | Not a required field | |
| Error | Does not display error state | |
| Min | No explicit minimum value | |
| Max | Lines | Allows one or more text lines |
| Read-only | Does not accept direct user input | |
| Text, Icon | Y | Supports text with optional icon styling |
| Event | No triggerable events | |
| Shade | No shaded background | |
| Children | Not a container for nested elements | |
| List | Not a list-type container |
Usage Example
<HighlightText label="Fee" value="$75.00" />
SDK Integration
This element appears in Suggested Scheduling workflows, including:
Example usage within the scheduling card:
{
"reference": "doctor-fee~{x}",
"type": "Highlight",
"value": "$75.00"
}
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | doctor-fee~{x} | Highlight | Fee | Displays total or doctor fee |
Notes
- Used to emphasize amounts, pricing, or status text.
- Often paired with other text elements to display calculated summaries.
- Text is styled prominently (bold, larger font).