Text Snippet

Overview

Text snippets provide a way to show previews of long content while allowing users to expand and read the full text when needed. They help condense screen space by truncating long text blocks such as product descriptions, reviews, or articles. By default, content is displayed in condensed mode with a toggle button to expand or collapse the full text.

<daff-text-snippet>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</daff-text-snippet>

Best practices

When to use

• Displaying long content that might overwhelm the interface
• Providing previews of product descriptions, reviews, or articles

Usage

To use text snippet, import DaffTextSnippetComponent directly into your custom component:

import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DaffTextSnippetComponent,
  ],
})
export class CustomComponent {}

Content options

Text snippet supports two ways of providing content.

• For text managed in a CMS or returned from an API, pass the content through the html input:

<daff-text-snippet [html]="categoryDescription"></daff-text-snippet>

• For text written directly in a template, place the content inside the component:

<daff-text-snippet>
  Category description
</daff-text-snippet>

Accessibility

Text snippet provides built-in support for assistive technologies:

• The toggle button includes the aria-expanded attribute, which reflects whether the snippet is currently expanded (true) or condensed (false).
• The button label dynamically switches between "Show More" and "Show Less" to provide clear context for screen reader users.