(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.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=0-1&t=ftfrOGkPzlG2GaTo-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/title

Guidelines

Usage

• Use the correct heading level with headerStyle (h1–h6) to encode hierarchy. Reserve h1 for the highest-level title; use h2–h6 for subsections the component labels.
• Provide concise, localized copy via textTranslations; prefer plain language and avoid embedding long explanations in the title text.
• Align page-level titles with textAlign: "center" when the title is the primary focus; align section headers with textAlign: "left" for faster scanning.

Sizing & Layout

• Constrain line length using width so headings remain readable (typographic heuristics recommend ~45–75 characters per line).
• Add breathing room around the heading using a single paddingClass value to separate it from adjacent content.

States & Feedback

• The component exposes no focus/active/disabled states. The only interactive feedback is the optional hover tooltip, controlled by showTooltip (see Tooltips).

Color & Contrast

• Set textColor to meet contrast requirements; don’t use color alone to signal importance—encode hierarchy with headerStyle.

Tooltips

• Enable with showTooltip; provide localized copy via tooltipTextTranslations.
• Use tooltipPlacement (top, right, bottom, left) to avoid covering nearby controls.
• Add a modest tooltipDelay (e.g., ≥300 ms) to reduce accidental triggers. Tooltips are supplemental; never the sole place for critical info.

Data-Driven / Conditional Behavior

• Use textTranslations template expressions to inject runtime context (e.g., a customer name) while keeping the base string short.

Visibility & Authorization

• Gate visibility by role/policy with visibilityPolicySetId.
• Show or hide based on state/data rules with displayConditions.

Content & Localization

• Localize all user-facing strings via textTranslations and, if used, tooltipTextTranslations.
• For guided onboarding, opt in with enableAsHotspot and provide localized guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• Provide stable hooks for automation with id and dataTestId.

Dos & Don’ts

Accessibility

• Provide localized, descriptive headings via textTranslations.
• Use semantic hierarchy via headerStyle and readable alignment with textAlign.
• Ensure legibility through adequate contrast using textColor.
• Avoid tooltip-only information; if used, localize and delay slightly with tooltipTextTranslations and tooltipDelay.
• Avoid color-only emphasis: pair textColor choices with semantic levels in headerStyle.
• Keep headings readable by constraining width; add spacing with paddingClass to separate from neighboring content.
• Reduce cognitive load by hiding irrelevant headings using visibilityPolicySetId and displayConditions.