Content

Overview

• The Content Component is a versatile UI element.
• It embeds and displays other content, such as boardlets, inside the application.
• It supports conditional rendering based on context values.
• It allows customized sizing of the embedded content.
• It enables reuse of content across multiple areas while staying context-aware.

Specs

Tokens

Token	Description
displayName	Display name shown in the structure panel.
contentId	ID of the boardlet to display.
rules	Conditional display rules based on context data.
customHeight	Custom height for the content container.
paddingClass	CSS padding classes around the component.
events	Configurable component events.
ON_INIT (Events)	Event triggered when the component is initialized.
ON_DESTROY (Events)	Event triggered when the component is removed.
visibilityPolicySetId	Controls visibility through policy sets.
displayConditions	Defines conditions for showing or hiding the component.
id	Unique identifier for programmatic access.
dataTestId	Identifier for automated testing.
enableAsHotspot	Enables the component as a guided tour hotspot.
guidedTourHotSpotTitle	Title for the guided tour hotspot.
guidedTourHotSpotDescription	Description for the guided tour hotspot.

Structure

• The Content Component embeds other content, such as boardlets, inside the application.

(Configured in General Properties)

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

(Configured in Visual Properties)

• contentId – Specifies the ID of the boardlet to display within this component. For example, setting it to "9f19d7de-d089-46c6-9814-68e8f52b6130" will load and render the boardlet with that ID. This allows you to create content once and reuse it in multiple places throughout your application.
• rules – Configures conditional display rules that determine whether the content is shown based on context data. For example, you can set up a rule that only shows an approval form when a status equals "pending_approval". Each rule contains fields for a field name, operator, and threshold value to be evaluated against the context.

Styling

(Configured in Visual Properties)

• customHeight – Sets a custom height for the content container. This can be defined using pixels, percentages, or other CSS height values. For example, "400px" creates a fixed height container, while "100%" makes the content fill its container's height. This allows for consistent sizing across different display contexts.
• paddingClass – Configures spacing around the content using CSS classes. For example, "p-4" adds medium padding on all sides of the component, improving its visual spacing within its parent container.

Actions & Variants

(Configured in Event Actions Properties)

• events – Configures the events that the component can trigger and respond to:
  • ON_INIT – Triggered when the content component is initialized. Can be used to perform setup operations when the content first appears, such as loading additional data or setting initial states.
  • ON_DESTROY – Triggered when the content component is removed from the DOM. Useful for cleanup operations and releasing resources, such as closing connections or clearing cached data.

(Configured in Visibility Properties)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the entire content component based on complex rules involving form values, user roles, or application state. For example, the content might only be shown when a certain workflow step is active or when the user belongs to a specific department.

Tests

(Configured in Testing Hooks Properties)

• id – Specifies a unique identifier for the component used for programmatic access. For example, "userProfileContent" enables targeted manipulation of this specific content component through scripts or automated tests.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting to "user-profile-content" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the content component can be highlighted during onboarding or tutorial flows to explain important sections to new users.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "User Profile", "de-DE": "Benutzerprofil"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This section displays user profile information", "de-DE": "Dieser Abschnitt zeigt Benutzerprofilinformationen an"} provides detailed context during guided tours.

Authorization

(Configured in Authorization Properties)

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "contentAccessPolicy" restricts the content visibility to users with specific access permissions, allowing for role-based display of sensitive information.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11524-14777&t=iosNC2AkSTGs5lMh-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/3-content-switch

Guidelines

Usage

• Embed and reuse content by setting contentId to the target unit; the component renders that content in place and stays context-aware.
• Expose stable automation handles via id and dataTestId for scripts and tests.
• Make onboarding discoverable by enabling a hotspot with enableAsHotspot and provide localized text via guidedTourHotSpotTitle and guidedTourHotSpotDescription.

Sizing & Layout

• Set a predictable height with customHeight using valid CSS lengths (e.g., 400px, 28rem, 100%) to prevent layout shift.
• Control interior spacing with paddingClass; keep a consistent spacing scale to reinforce grouping and hierarchy.

Data-Driven / Conditional Behavior

• Use displayConditions to show or hide the entire component for high-level gating (progressive disclosure of non-essential content).
• Use rules for precise, context-field logic (field, operator, threshold). When matching multiple allowed values, define one rule per value for clarity.
• Keep conditions mutually exclusive and based on stable fields to avoid rapid toggling.

Visibility & Authorization

• Restrict visibility for sensitive content with visibilityPolicySetId.
• When both role and state must align, combine visibilityPolicySetId with displayConditions.

Content & Localization

• Localize hotspot copy with guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• Use displayName only for authoring clarity in the structure panel; it does not affect end-user text.

Dos & Don’ts

Do	Don’t	Article setting(s)
Gate sensitive content with policy sets.	Show to all users and rely on embedded content to refuse access.	visibilityPolicySetId
Apply interior spacing via tokenized classes to reflect hierarchy.	Depend on surrounding layout to create padding.	paddingClass
Stabilize layout by declaring a height.	Allow uncontrolled growth that shifts adjacent UI.	customHeight
Enable hotspots to guide discovery.	Hide onboarding cues inside unrelated components.	enableAsHotspot

Accessibility

• Expose stable hooks for automated checks: dataTestId (with id for scripted inspection).
• Avoid color-only meaning; when availability changes, hide or show the component using displayConditions/rules.
• Keep hotspot text concise and localized; don’t put critical instructions only in hotspots: guidedTourHotSpotTitle, guidedTourHotSpotDescription.
• Use ON_DESTROY to ensure any live regions or timers in embedded content are torn down when the component is removed.