# Description

The Description component provides a standardized way to display descriptive text content with consistent styling.

### Size Variants

Descriptions come in four size variants to suit different use cases. Each variant provides a distinct visual style
 that can be used for various content hierarchies.

Base

Large

XLarge

XXLarge

Description

Description

Description

Description

DescriptionSize Variants

    <!-- Base (default) -->
    <span class="description">Base Description</span>

    <!-- Large: larger text for emphasis -->
    <span class="description description--large">Large Description</span>

    <!-- Extra Large: prominent descriptions -->
    <span class="description description--xlarge">XLarge Description</span>

    <!-- Extra Extra Large: maximum emphasis -->
    <span class="description description--xxlarge">XXLarge Description</span>

    <!-- Using base modifier to reset to default size at breakpoint -->
    <span class="description description--large md:description--base">
      Large by default, base on medium+ screens
    </span>

### Text Overflow Behavior

Descriptions can handle longer text content through natural wrapping or text clamping. Understanding how descriptions behave with
 overflow content helps ensure your interface remains readable and visually balanced.

#### Multi-line Wrapping

By default, descriptions will wrap to multiple lines when content exceeds the available width,
 maintaining readability for longer text.

Base

Large

XLarge

XXLarge

This longer description will wrap to multiple lines when it exceeds the available width

This longer description will wrap to multiple lines when it exceeds the available width

This longer description will wrap to multiple lines when it exceeds the available width

This longer description will wrap to multiple lines when it exceeds the available width

DescriptionMulti-line

    <!-- Descriptions with longer text will wrap naturally -->
    <span class="description">This longer description will wrap to multiple lines when it exceeds the width</span>

#### Text Clamping

Use the framework's `data-clamp` attribute to limit descriptions to a specific number of lines with ellipsis overflow.

Base

Large

XLarge

XXLarge

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

This is a very long description text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow

DescriptionClamped

    <!-- data-clamp applies to any description size (base, large, xlarge, xxlarge) -->

    <!-- Single line clamping with data attribute -->
    <span class="description" data-clamp="1">
      This text will be clamped to one line
    </span>

    <!-- Two line clamping -->
    <span class="description" data-clamp="2">
      This text will be clamped to exactly two lines with ellipsis
    </span>

    <!-- Three line clamping with large size -->
    <span class="description description--large" data-clamp="3">
      This larger text will be clamped to three lines
    </span>

### Responsive Features

Description components support all three responsive systems: size-based, orientation-based, and bit-depth variants.
 This enables precise control over description appearance across different device configurations.

#### Breakpoint Prefixes

Use breakpoint prefixes like `sm:`, `md:`, `lg:` to apply different sizes at different screen widths.

Responsive DescriptionBase by default, xlarge on lg screens

DescriptionResponsive

    <!-- Base by default, xlarge on lg screens -->
    <span class="description lg:description--xlarge">
      Responsive Description
    </span>

    <!-- Caption describing the responsive behavior (optional) -->
    <span class="label label--small">Base by default, xlarge on lg screens</span>

    <!-- Using base modifier to reset to default size at breakpoint -->
    <span class="description description--large md:description--base">
      Large by default, base on medium+ screens
    </span>

    <!-- Progressive size scaling -->
    <span class="description sm:description--large md:description--xlarge lg:description--xxlarge">
      Progressive Description Sizing
    </span>

#### Orientation and Size+Orientation

Description sizes can adapt to orientation with `portrait:` and can be combined
 with size breakpoints (e.g., `md:portrait:`).

Orientation VariantLarge by default, base in portrait.

DescriptionOrientation

    <!-- Large by default, base in portrait -->
    <span class="description description--large portrait:description--base">Orientation Variant</span>

    <!-- Caption describing the responsive behavior (optional) -->
    <span class="label label--small">Large by default, base in portrait.</span>

Previous

[Label Create clear labels for unified content identification](/framework/docs/label)

Next

[Divider Create horizontal or vertical dividers between elements](/framework/docs/divider)