Text Truncate | Nordsecurity Design

Overview

The TextTruncate component is your go-to for handling long secondary text gracefully. It ensures your content looks clean and professional by trimming down lengthy text and providing an expandable option when users need the full story.

When to use

To display text that might otherwise overflow or look messy.
Perfect for use cases like articles, product descriptions, or FAQs.

When not to use

When truncating text could lead to confusion or loss of important context.
To shorten primary or vital information for the user

Anatomy

TextTruncate
Text
Link

Variants & States

Variants

The TextTruncate component toggles between two variants:

Collapsed: The text is truncated, with a “Read more” link inviting users to expand.
Expanded: The full content is displayed, and the link updates to “Read less” for collapsing.

Accessibility

To make the TextTruncate component more inclusive and accessible:

Descriptive Link Text: Instead of using generic text like “Read more” or “Read less”, use links that provide context about the content. For example: “Read more about our privacy policy”, “Collapse product description”. These options give users, including those using screen readers, a better understanding of the action’s purpose.
Semantic HTML: Use appropriate HTML elements like <button> or <a> for the toggle link to ensure proper keyboard navigation and screen reader support.
Keyboard Navigation: Ensure the toggle link is focusable and supports Enter and Space for interaction.
ARIA Attributes:
- Add aria-expanded="true" or "false" on the toggle link to indicate its current state.
- Use aria-controls to associate the link with the expandable content.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made.

Accessibility

To make the TextTruncate component more inclusive and accessible:

Descriptive Link Text: Instead of using generic text like “Read more” or “Read less”, use links that provide context about the content. For example: “Read more about our privacy policy”, “Collapse product description”. These options give users, including those using screen readers, a better understanding of the action’s purpose.
Semantic HTML: Use appropriate HTML elements like <button> or <a> for the toggle link to ensure proper keyboard navigation and screen reader support.
Keyboard Navigation: Ensure the toggle link is focusable and supports Enter and Space for interaction.
ARIA Attributes:
- Add aria-expanded="true" or "false" on the toggle link to indicate its current state.
- Use aria-controls to associate the link with the expandable content.

Properties

Name	Type	Values	Description
variant	String	`collapsed` `expanded`	Sets the initial state of the component: “collapsed” for truncated text or “expanded” for full text.
textExpanded	String		Text when the full content is displayed
textCollapsed	String		Text when the the content is truncated.
ButtonExpanded	String		Text for the link when the content is truncated.
ButtonCollapsed	String		Text for the link when the full content is displayed.

Usage Guidelines

DoUse for lengthy content: Implement TextTruncate to keep long text tidy and provide an option to reveal more when necessary.

DoProvide descriptive links: Use contextual link text like "Read more about our services" or "Collapse FAQ answer" to improve accessibility and user understanding.

Don’tDon’t truncate critical information: Avoid hiding essential content that users need to see immediately for context or understanding.

Don’tDon’t use vague link text: Skip generic phrases like "Read more" without context, as they can confuse users, especially those relying on assistive technology.

Don’tDon’t overuse: Reserve TextTruncate for scenarios where it genuinely improves readability and UI cleanliness. Using it excessively can frustrate users.

Don’tTo display text that might otherwise overflow or look messy.

Don’tPerfect for use cases like articles, product descriptions, or FAQs.

Don’tWhen truncating text could lead to confusion or loss of important context.

Don’tTo shorten primary or vital information for the user

Don’tDescriptive Link Text: Instead of using generic text like "Read more" or "Read less", use links that provide context about the content. For example: "Read more about our privacy policy", "Collapse product description". These options give users, including those using screen readers, a better understanding of the action's purpose.

Don’tSemantic HTML: Use appropriate HTML elements like <button> or <a> for the toggle link to ensure proper keyboard navigation and screen reader support.

Don’tKeyboard Navigation: Ensure the toggle link is focusable and supports Enter and Space for interaction.

Don’tARIA Attributes:

Don’tAdd aria-expanded="true" or "false" on the toggle link to indicate its current state.

Don’tUse aria-controls to associate the link with the expandable content.

Content Guidelines

We use text truncation when space is limited and the content cannot fully fit in the interface. Truncation should never hide critical information, and users must always have a way to view the full text.

Voice and tone

We write so that the essential meaning remains clear if cut off.
We use wording that encourages the user to read more, but without dramatic exaggeration.
We use truncation only when showing the full text would harm scannability or layout.
We use ellipses (…) to indicate that text is truncated.
We make sure at least four visible characters remain before the ellipsis.
We put keywords first so the most important information is visible.
We do not truncate headers, titles, labels, error messages, or validation messages.

DoScam Protection blocks malware and makes browsing safer…

Don’tOur amazing Scam Protection feature helps you…

Accessibility

We use descriptive links like “Read more about Scam Protection,” especially if the link is not immediately adjacent to the content it extends.
We avoid vague links like “Click here.”