(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Title

Overview

• The Title component is a text heading element with customizable styling.
• It supports six heading levels (H1–H6) for clear hierarchy.
• It includes alignment options for flexible text placement.
• It can show tooltips with translations when users hover over the text.
• It is useful for section headings, page titles, and emphasized content.

Specs

Tokens

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Page Header" allows for easy identification of the title's purpose in the component structure, making it easier for developers to locate and work with this specific title element.

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the title based on complex rules involving other form values, user roles, or application state. For example, the title might only be shown for certain types of content or when specific data is available.

Tooltip

(Configured in Visual Properties)

• showTooltip – Determines whether a tooltip appears when users hover over the title. When enabled, provides additional information or context about the section the title represents, enhancing usability for complex interfaces.
• tooltipTextTranslations – Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "View all customer data", "de-DE": "Alle Kundendaten anzeigen"} ensures users see clear explanations in their preferred language when hovering over the title.
• tooltipPlacement – Controls where the tooltip appears relative to the title. Options include "top", "right", "bottom", and "left". For example, "bottom" positions the tooltip below the title, which works well when there's limited space above the component.
• tooltipDelay – Sets the delay in milliseconds before the tooltip appears when hovering over the title. For example, setting to "500" will delay the tooltip appearance by half a second, preventing tooltips from appearing too quickly during casual mouse movements.

Styling

(Configured in Visual Properties)

• textTranslations – Sets the text displayed in the title with support for multiple languages. For example, {"en-US": "Customer Dashboard", "de-DE": "Kunden-Dashboard"} ensures proper localization of titles. The text can include template expressions to display dynamic content based on context data.
• width – Specifies the width of the title component. This can be defined using pixels, percentages, or other CSS width values. For example, "80%" will make the title take up 80% of its container width, while "500px" sets a fixed width regardless of the container size.
• textAlign – Controls the horizontal alignment of the title text. Options include "left", "right", "center", "justify", "initial", or "inherit". For example, "center" creates a centered heading that works well as a page title, while "left" alignment is commonly used for section headings.
• textColor – Sets the color of the title text using hexadecimal color codes. For example, "#1a73e8" will display the title in a blue color, while "#212121" provides a dark gray that's less harsh than pure black. This allows for consistent branding and improved visual hierarchy.
• paddingClass – Configures spacing around the title using CSS classes. For example, "p-4" adds medium padding on all sides of the title, improving its visual spacing within its container.
• headerStyle – Determines the heading level (HTML tag) used for the title. Options include "h1" through "h6", with "h1" being the largest and most prominent. For example, "h1" might be used for page titles, while "h3" could be used for section headings within the page, allowing for proper visual hierarchy.

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_INIT – Triggered when the title component is initialized. Can be used to perform setup operations when the title first appears.
• ON_DESTROY – Triggered when the title component is removed from the DOM. Useful for cleanup operations and releasing resources.

Tests

(Configured in Testing Hooks)

• id – Specifies a unique identifier for the component used for programmatic access. For example, "customerDashboardTitle" enables targeted manipulation of this specific title component through scripts or automated tests.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "customer-dashboard-title" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the title can be highlighted during onboarding or tutorial flows to explain its meaning to users.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Dashboard Title", "de-DE": "Dashboard-Titel"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This title shows the current section of the application", "de-DE": "Dieser Titel zeigt den aktuellen Abschnitt der Anwendung"} provides detailed context during guided tours.

Authorization

(Configured in Authorization)

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the title visibility to users with administrative privileges, allowing for role-based UI customization.

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]