Intro

The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview of the text by default, with a Show More link to reveal the full content and a Show Less link to collapse it again. Depending on the design, the text can expand inline or open in a popover.

Expandable text

false

Use expandable text if:

You need to handle long texts or descriptions inside a responsive table, list or form.
You need to provide access to truncated text.

dont

false

Do not use expandable text if:

You need to display text within UI tables (grid table, tree table, analytical table) or the Gantt chart.
You can provide short and meaningful alternatives.
The content is critical for the user. In this case, use short descriptions that fit into the available space.

Adapt the number of characters shown before truncation to fit your use case (default: 100 characters).
If using a popover: make sure that the width of the popover always corresponds to the length of the text.
If you use the expandable text in a table, set minimal padding to avoid extra white space within the rows.

Anatomy

Expandable Text

Expandable text anatomy

The expandable text component has two display modes - inline and popover - but its core structure includes the same two elements:

Main text: A collapsed text block that shows only part of the content.
Expand text link: A Show More or similar link that reveals the full content when activated.

Popover anatomy

The expandable text component’s popover feature consists of four parts:

Main text: Expanded main text area.
Shadow: Shadow that makes the popover stand out.
Border: Surrounding border.
Pointing arrow (optional): An optional arrow showing text relation.

Types

The expandable text component supports three usage types:

Collapsed text

The text is truncated and a Show More link is shown to reveal the full content.

Text component (collapsed)

Expanded text

The full text is visible with a Show Less link to collapse the content again.

Text component (expanded)

Instead of expanding inline, the full content appears in a popover. The popover can include an arrow pointer positioned on any of its four sides.

Popover (optional)

Behavior and Interaction

Expanding/Collapsing the Text

Clicking the Show More link reveals the full content, either inline or in a popover, depending on the implementation.

Text component (collapsed + expanded)

Clicking the Show Less link collapses the content again. If a popover is used, it can be closed by clicking Show Less or clicking outside the popover.

Text component (collapsed) with a popover on hover state

When the text is fully visible, the Show More link is replaced by a Show Less link.

Responsiveness

In sizes S, M, L, and XL, the text can expand either on the page or in a popover. On size S (small - typically mobile devices), popovers don’t appear as floating boxes. Instead, they expand to cover the full screen, making it easier for users to read and interact with the content.

Localization

The expandable text component supports both left-to-right (LTR) and right-to-left (RTL) reading directions, adapting to the user's language settings. In each case, the text aligns with the reading flow, and the Show More/Show Less link appears at the end of the truncated line, positioned according to the text direction (right side for LTR, left side for RTL).