Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

DoDon’tArticle setting(s)
Use headerStyle="h1" only for the top-level page title; use h2+ for sections.Make multiple unrelated headings h1.headerStyle
Keep titles short and localize them.Ship English-only strings or paragraphs as titles.textTranslations
Left-align section headings for scanability.Center-align long, multi-line section headers.textAlign
Constrain width to keep lines readable.Let headings span edge-to-edge with unreadable long lines.width
Add space with a single padding utility.Chain multiple padding utilities in the paddingClass value.paddingClass
Use a tooltip to clarify a term; add a small delay.Put critical instructions only in a tooltip.showTooltip, tooltipTextTranslations, tooltipDelay
Ensure sufficient contrast for readability.Pick text colors with poor contrast on the background.textColor
Show/hide based on explicit rules.Leave irrelevant titles visible at all times.displayConditions
Initialize dynamic text on mount; clean up on unmount.Start listeners and never dispose them.ON_INIT, ON_DESTROY
Gate by role when needed.Expose sensitive titles to all users.visibilityPolicySetId

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