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
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 Text
Left 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 Text
Center 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 Text
Right 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 Text
Size 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 .
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 Text
Fixed 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 Text
Responsive
<!-- 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 Text
Orientation
<!-- 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 Text
Bit-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 Text
Combined 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 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
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 Text
With 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-ink displays, the Rich Text component can be enhanced with the Pixel Perfect utility 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
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-ink 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 Text
With 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-ink 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>