# Rich Text

The Rich Text component provides a flexible container for displaying text content with consistent styling and layout options. It's commonly used for paragraphs, articles, and other formatted text content that needs to maintain readability and visual hierarchy.

### Understanding Richtext Components

The richtext system consists of two key parts working together: the parent `.richtext` container and its natural child `.content`[Content Limiter](/framework/docs/content_limiter) component.

The parent `.richtext` container is designed for flexibility and can hold any content. It controls the overall placement and spacing of the component within your layout.

The `.content` component is where your actual text content lives. It provides additional styling and formatting options specific to text.

Both components have separate alignment modifiers that serve different purposes. The table below summarizes each modifier:

| Class | Modifiers | Applies To | Controls | Example |
| --- | --- | --- | --- | --- |
| `richtext` | `left`,  `center`,  `right` | Container (`.richtext`) | Aligns the richtext container within its parent | `richtext--center` |
| `content` | `left`,  `center`,  `right` | Child content (`.content`) | Aligns the content block within the richtext container | `content--right` |
| `text` | `left`,  `center`,  `right` | Text elements inside `.content` | Aligns inline text within the content block | `text--center` |

This multi-level alignment system provides maximum flexibility for positioning both the component and its content independently.

### Rich Text Alignment

The Rich Text component can be aligned in three different ways: left, center, or right.
 Each alignment option provides different text positioning to suit various design needs.

#### Left Aligned

Left alignment is the default and most readable format for longer text content, ideal for paragraphs and articles.

This is an example of left-aligned rich text content. This alignment is generally best for readability with longer paragraphs of text.

Multiple paragraphs will maintain the same alignment, making it easy to read through longer content while maintaining visual consistency.

Rich TextLeft Aligned

    <div class="richtext richtext--left gap--large">
      <img class="image" src="/assets/trmnl--glyph-black-large.svg">
      <div class="content content--left gap text--left">
        <p>This is an example of left-aligned rich text content.</p>
        <p>Multiple paragraphs will maintain the same alignment.</p>
      </div>
    </div>

#### Center Aligned

Center alignment is ideal for headings, quotes, or shorter text that needs to be highlighted or visually balanced within the layout.

This is an example of center-aligned rich text content.

Centered text works well for quotes, headings, or highlighted information that needs visual emphasis.

Rich TextCenter Aligned

    <div class="richtext richtext--center gap--large">
      <img class="image" src="/assets/trmnl--glyph-black-large.svg">
      <div class="content content--center gap text--center">
        <p>This is an example of center-aligned rich text content.</p>
        <p>Centered text works well for quotes or highlighted information.</p>
      </div>
    </div>

#### Right Aligned

Right alignment is less common but can be useful for specific design scenarios or to create visual tension in layouts.

This is an example of right-aligned rich text content.

Right alignment can be used for captions, sidebars, or to create visual interest through contrasting alignments.

Rich TextRight Aligned

    <div class="richtext richtext--right gap--large">
      <img class="image" src="/assets/trmnl--glyph-black-large.svg">
      <div class="content content--right gap text--right">
        <p>This is an example of right-aligned rich text content.</p>
        <p>Right alignment can be used for captions or sidebars.</p>
      </div>
    </div>

### Content Size Variants

The Rich Text component offers six size variants: `small`, `base`, `large`, `xlarge`, `xxlarge`,
 and `xxxlarge`.
 The `content` class without size modifiers
 and the `content--base` class both produce the same visual result.
 Use `content--base` when you need to explicitly set the base size
 in responsive contexts. All size variants support responsive prefixes like `sm:`, `md:`, `lg:`,
 and `portrait:`.

This is xxxlarge size rich text content.

This is xxlarge size rich text content.

This is xlarge size rich text content.

This is large size rich text content.

This is base size rich text content.

This is small size rich text content.

Rich TextSize Variants

    <div class="richtext gap--large">
      <!-- XXXLarge Size -->
      <div class="content content--xxxlarge">
        <p>This is xxxlarge size rich text content.</p>
      </div>

      <!-- XXLarge Size -->
      <div class="content content--xxlarge">
        <p>This is xxlarge size rich text content.</p>
      </div>

      <!-- XLarge Size -->
      <div class="content content--xlarge">
        <p>This is xlarge size rich text content.</p>
      </div>

      <!-- Large Size -->
      <div class="content content--large">
        <p>This is large size rich text content.</p>
      </div>

      <!-- Base Size (same as default, useful for responsive) -->
      <div class="content content--base">
        <p>This is base size rich text content.</p>
      </div>

      <!-- Small Size -->
      <div class="content content--small">
        <p>This is small size rich text content.</p>
      </div>
    </div>

    <!-- Responsive example -->
    <div class="richtext gap--large">
      <div class="content content--base lg:content--xxxlarge">
        <p>Base by default, xxxlarge on large screens</p>
      </div>
    </div>

### Controlling Width

By default, the Rich Text content takes up as much space as it needs and is centered in the layout, expanding up to a maximum width.
 However, you can precisely control the width of content using Size utility classes[Size](/framework/docs/size) .

This Rich Text content has a fixed width of 240 pixels using utility classes.

Notice how the text is constrained to this specific width regardless of the container size.

Rich TextFixed Width: 240px

    <div class="richtext richtext--center gap--large">
      <div class="content w--[240px] text--center gap">
        <p>This Rich Text content has a fixed width of 240 pixels using utility classes.</p>
        <p>Notice how the text is constrained to this specific width regardless of the container size.</p>
      </div>
    </div>

You can use any of the Size system's fixed sizes (`w--32`, `w--64`, etc.),
 arbitrary sizes (`w--[250px]`), or responsive sizes (`w--full`, `w--auto`).
 This flexibility lets you create perfectly sized text blocks for any layout need.

### Responsive Features

The `content` component supports all three responsive systems: size-based, orientation-based, and bit-depth variants.
 This enables precise control over content text size across different device configurations.

#### Breakpoint Prefixes

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

Responsive content

Base by default, xxlarge on lg screens

Rich TextResponsive

    <!-- Base by default, xxlarge on lg screens -->
    <div class="richtext gap--large">
      <div class="content content--base lg:content--xxlarge">
        <p>Responsive content</p>
      </div>
    </div>

    <!-- Small by default, base on medium+ screens -->
    <div class="richtext gap--large">
      <div class="content content--small md:content--base">
        <p>Small by default, base on medium+ screens</p>
      </div>
    </div>

    <!-- Progressive size scaling -->
    <div class="richtext gap--large">
      <div class="content content--small sm:content--base md:content--large lg:content--xxlarge">
        <p>Progressive content sizing</p>
      </div>
    </div>

#### Orientation and Size+Orientation

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

Orientation variant content

Large by default, small in portrait.

Rich TextOrientation

    <!-- Large by default, small in portrait -->
    <div class="richtext gap--large">
      <div class="content content--large portrait:content--small">
        <p>Orientation variant content</p>
      </div>
    </div>

    <!-- Caption describing the responsive behavior -->
    <div class="content content--small">Large by default, small in portrait.</div>

#### Bit-Depth Responsive

Use bit-depth prefixes like `1bit:`, `2bit:`, and `4bit:` to optimize content text size
 for different display color capabilities.

Display optimized content

Large (1bit) → XLarge (2bit) → XXLarge (4bit)

Selective sizing

Base (1bit) → XLarge (4bit)

Rich TextBit-Depth Responsive

    <!-- Different content sizes for different bit-depth displays -->
    <div class="richtext gap--large">
      <div class="content 1bit:content--large 2bit:content--xlarge 4bit:content--xxlarge">
        <p>Display optimized content</p>
      </div>
    </div>

    <!-- Selective bit-depth targeting -->
    <div class="richtext gap--large">
      <div class="content 1bit:content--base 4bit:content--xlarge">
        <p>Selective sizing</p>
      </div>
    </div>

#### Combined Responsive Features

Combine multiple responsive systems for highly targeted content sizing. Use size, orientation,
 and bit-depth modifiers together following the pattern: `size:orientation:bit-depth:content--size`.

Advanced targeting

Complex responsive combinations

Multi-condition content

Multiple responsive conditions

Rich TextCombined Responsive

    <!-- Highly targeted responsive combinations -->
    <div class="richtext gap--large">
      <div class="content md:portrait:2bit:content--xlarge lg:4bit:content--xxlarge">
        <p>Advanced targeting</p>
      </div>
    </div>

    <!-- Multiple responsive conditions -->
    <div class="richtext gap--large">
      <div class="content sm:1bit:content--large md:portrait:content--base lg:4bit:content--xlarge">
        <p>Multi-condition content</p>
      </div>
    </div>

### Integration with Content Limiter

The Rich Text component works seamlessly with the Content Limiter utility[Content Limiter](/framework/docs/content_limiter) to handle overflowing text. When combined,
 it automatically adjusts text size to fit the available space, which is particularly useful in constrained layouts.

Simply add the `data-content-limiter="true"` attribute to your richtext content element. You can also specify a custom maximum height using the `data-content-max-height` attribute (e.g., `data-content-max-height="140"`).

When `data-content-limiter="true"` is present, the limiter auto-measures the available height in the nearest container and adjusts text to fit. You can override the auto height by specifying `data-content-max-height` with a pixel value.

Automatically resize text when content exceeds height limits

[View Content Limiter Documentation](/framework/docs/content_limiter)  

The Rich Text component with Content Limiter will automatically adjust text size when content exceeds the auto-measured available height. This is particularly useful for views with limited vertical space such as quadrants or half-horizontal layouts.  

Notice how this text is rendered smaller to fit within the quadrant view. Without Content Limiter, this text would overflow the container.

Rich TextWith Content Limiter

    <div class="richtext richtext--left gap--large">
      <div class="content" data-content-limiter="true">
        <p class="text--left">
          The Rich Text component with Content Limiter will automatically
          adjust text size when content exceeds the height threshold.
          This is particularly useful for views with limited vertical space.
        </p>
      </div>
    </div>

### Integration with Pixel Perfect

For optimal text rendering on e-paper displays, the Rich Text component can be enhanced with the Pixel Perfect utility[Pixel Perfect](/framework/docs/pixel_perfect) .
 This ensures text is rendered with crisp edges by aligning precisely to the pixel grid, preventing blurry or inconsistent text weight.

Simply add the `data-pixel-perfect="true"` attribute to your richtext content element.

Ensure crisp text rendering on 1-bit displays

[View Pixel Perfect Documentation](/framework/docs/pixel_perfect)  

This text is rendered with pixel perfect alignment, ensuring that each character aligns precisely with the pixel grid. Notice how the text appears crisp and clear with consistent weight.

Pixel Perfect is especially important for e-paper displays that use a 1-bit color space (just black and white), where anti-aliased gray pixels are forced to become either fully black or fully white.

Rich TextWith Pixel Perfect

    <div class="richtext richtext--left gap">
      <div class="content" data-pixel-perfect="true">
        <p>
          This text is rendered with pixel perfect alignment, ensuring that each character aligns precisely with the pixel grid. Notice how the text appears crisp and clear with consistent weight.
        </p>
      </div>
      <div class="content" data-pixel-perfect="true">
        <p>
          Pixel Perfect is especially important for e-paper displays that use a 1-bit color space (just black and white), where anti-aliased gray pixels are forced to become either fully black or fully white.
        </p>
      </div>
    </div>

Previous

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

Next

[Item Build standardized list items and content blocks](/framework/docs/item)