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

Title

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=0-1&t=ftfrOGkPzlG2GaTo-1

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.

...

• 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

...

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 (de-duplicated)

• 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.
• Expose deterministic automation hooks for testing via dataTestId and id.
• 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.