### Responsive Title Example

Source: https://trmnl.com/framework/docs/3.1/title.md

Shows how to make a Title responsive, starting small and becoming xlarge on large screens. This utilizes breakpoint prefixes for adaptive styling.

```html
<span class="title title--small lg:title--xlarge">
  Responsive Title
</span>
```

--------------------------------

### Responsive Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Shows how to apply different Value sizes at different screen widths using breakpoint prefixes like `md:` and `lg:`. Includes an example with progressive scaling and tabular numbers.

```html
<!-- Small by default, large on md screens, xlarge on lg screens -->
<span class="value value--small md:value--large lg:value--xlarge">
  Responsive Value
</span>

<!-- Progressive scaling with screen size -->
<span class="value value--xsmall sm:value--small md:value--medium lg:value--large value--tnums">
  1,234.56
</span>

<!-- Using base modifier to reset to default size at breakpoint -->
<span class="value value--small lg:value--base">
  Small by default, base on large screens
</span>
```

--------------------------------

### Responsive Padding Examples

Source: https://trmnl.com/framework/docs/3.1/spacing.md

Illustrates applying padding with responsive modifiers for size and orientation.

```html
sm:px--{size}
portrait:pb--{size}
md:portrait:pt--{size}
```

--------------------------------

### Base Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Demonstrates the base `value` class and the `value--base` modifier for default text size. Includes examples with and without tabular numbers.

```html
<span class="value">Example</span>
<span class="value value--tnums">48,206.62</span>

<!-- Or using the base modifier -->
<span class="value value--base">Example</span>
<span class="value value--base value--tnums">48,206.62</span>
```

--------------------------------

### Responsive Margin Examples

Source: https://trmnl.com/framework/docs/3.1/spacing.md

Demonstrates how to apply margins with responsive modifiers for size, orientation, or combined conditions.

```html
md:my--{size}
portrait:mx--{size}
lg:portrait:mt--{size}
```

--------------------------------

### XSmall Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Shows the `value--xsmall` class for a text size slightly larger than XXSmall. Includes an example with tabular numbers.

```html
<span class="value value--xsmall">Example</span>
<span class="value value--xsmall value--tnums">48,206.62</span>
```

--------------------------------

### Orientation and Size+Orientation Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Demonstrates responsive Value sizing based on screen orientation using `portrait:` and combining it with size breakpoints like `md:portrait:`.

```html
<!-- Orientation only: smaller in portrait -->
<span class="value value--large portrait:value--small">Orientation Variant</span>

<!-- Size + orientation: xlarge only on md+ screens in portrait -->
<span class="value value--small md:portrait:value--xlarge value--tnums">42,000.00</span>
```

--------------------------------

### Classic Bundle Text Styling

Source: https://trmnl.com/framework/docs/3.1/font_family.md

Example of text styling within the Classic bundle, demonstrating different sizes and bold weights.

```html
text--small · Classic
text--base · Classic
text--large · Classic
text--base font--bold · Classic
```

--------------------------------

### Giga Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Demonstrates the `value--giga` class for massive text. Includes an example with tabular numbers.

```html
<span class="value value--giga value--tnums">42</span>
```

--------------------------------

### Indexed Table Example

Source: https://trmnl.com/framework/docs/3.1/table.md

This example demonstrates an indexed table with the `table--indexed` class applied. The meta block containing the index is docked to the left.

```html
<table class="table table--indexed" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title title--small"></span></th>
      <th><span class="title title--small">Employee</span></th>
      <th><span class="title title--small">Role</span></th>
      <th><span class="title title--small">Pranks</span></th>
      <th><span class="title title--small">Sales</span></th>
      <th><span class="title title--small">Score</span></th>
      <th><span class="title title--small">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="meta"><span class="index">1</span></span></td>
      <td><span class="label">Pam Beesly</span></td>
      <td><span class="label label--small">Receptionist</span></td>
      <td><span class="label label--small">3</span></td>
      <td><span class="label label--small">$0</span></td>
      <td><span class="label label--small">0.00</span></td>
      <td><span class="label label--small" data-clamp="1">Loves drawing</span></td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### XXLarge Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Demonstrates the `value--xxlarge` class for very large text. Includes an example with tabular numbers.

```html
<span class="value value--xxlarge">Example</span>
<span class="value value--xxlarge value--tnums">48,206.62</span>
```

--------------------------------

### Responsive Width Example

Source: https://trmnl.com/framework/docs/3.1/size.md

Sets element width to 8 units by default, 16 units on medium screens and up, and 24 units on large screens and up.

```html
<div class="w--8 md:w--16 lg:w--24">Responsive Width</div>
```

--------------------------------

### Small Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Illustrates the `value--small` class for a smaller text size. Includes an example with tabular numbers.

```html
<span class="value value--small">Example</span>
<span class="value value--small value--tnums">48,206.62</span>
```

--------------------------------

### XXSmall Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Demonstrates the smallest text size using the `value--xxsmall` class. Includes an example with tabular numbers using `value--tnums`.

```html
<span class="value value--xxsmall">Example</span>
<span class="value value--xxsmall value--tnums">48,206.62</span>
```

--------------------------------

### Tera Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Shows the `value--tera` class for colossal text. Includes an example with tabular numbers.

```html
<span class="value value--tera value--tnums">42</span>
```

--------------------------------

### Responsive Text Size Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies text size utilities at the medium breakpoint and up. Used to fine-tune typography across screen sizes.

```html
<span class="text--base md:text--large portrait:text--small">
  Responsive text sizing
</span>
```

--------------------------------

### Table-Style Structure

Source: https://trmnl.com/framework/docs/3.1/visibility.md

This example uses 'table', 'table-row', and 'table-cell' classes to create a basic table-like structure.

```html
<div class="table">
  <div class="table-row">
    <div class="table-cell">Cell A</div>
    <div class="table-cell">Cell B</div>
  </div>
</div>
```

--------------------------------

### Responsive Height Example

Source: https://trmnl.com/framework/docs/3.1/size.md

Sets element height to 8 units by default, 16 units on medium screens and up, and 24 units on large screens and up.

```html
<div class="h--8 md:h--16 lg:h--24">Responsive Height</div>
```

--------------------------------

### Single View Structure

Source: https://trmnl.com/framework/docs/3.1/structure.md

Example of a single plugin occupying the full screen, consisting of a screen, a full-sized view, and a layout.

```html
<div class="screen">
  <div class="view view--full">
    <div class="layout">
      <!-- Your content here -->
    </div>
    <div class="title_bar">...</div>
  </div>
</div>
```

--------------------------------

### Platform-Provided View Structure

Source: https://trmnl.com/framework/docs/3.1/view.md

This example illustrates the structure of a view that is automatically provided by the platform. It shows the conceptual wrapping of layout and title bar elements within a view container.

```html
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view -->
```

--------------------------------

### XLarge Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Illustrates the `value--xlarge` class for larger text. Includes an example with tabular numbers.

```html
<span class="value value--xlarge">Example</span>
<span class="value value--xlarge value--tnums">48,206.62</span>
```

--------------------------------

### XXXLarge Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Shows the `value--xxxlarge` class for very large text. Includes an example with tabular numbers.

```html
<span class="value value--xxxlarge">Example</span>
<span class="value value--xxxlarge value--tnums">48,206.62</span>
```

--------------------------------

### Peta Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Illustrates the `value--peta` class for the largest text size. Includes an example with tabular numbers.

```html
<span class="value value--peta value--tnums">42</span>
```

--------------------------------

### Three Column Content Example

Source: https://trmnl.com/framework/docs/3.1/columns.md

Demonstrates a basic layout with three distinct columns, each containing placeholder content. This is a common use case for distributing similar types of information.

```html
<div class="columns">
  <div class="column">
    Content for column 1
  </div>
  <div class="column">
    Content for column 2
  </div>
  <div class="column">
    Content for column 3
  </div>
</div>
```

--------------------------------

### Responsive Minimum Width Example

Source: https://trmnl.com/framework/docs/3.1/size.md

Applies responsive minimum width utilities, setting the minimum width to 8 units by default, 16 units on medium screens and up, and 24 units on large screens and up.

```html
<div class="w--min-8 md:w--min-16 lg:w--min-24">Responsive Min Width</div>
```

--------------------------------

### Plugin View Markup Example

Source: https://trmnl.com/framework/docs/3.1/structure.md

This shows the basic structure for a plugin's view markup, including layout and title bar elements.

```html
<div class="layout">...</div>
<div class="title_bar">...</div>
```

--------------------------------

### Responsive Content Sizing with Breakpoint Prefixes

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Applies different content sizes based on screen width using breakpoint prefixes. This example demonstrates a progressive scaling approach: small by default, base on small screens, large on medium screens, and xxlarge on large screens.

```html
<!-- 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>
```

--------------------------------

### Mega Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Illustrates the `value--mega` class for extremely large text. Includes an example with tabular numbers.

```html
<span class="value value--mega value--tnums">42</span>
```

--------------------------------

### Responsive Font Weight Variants

Source: https://trmnl.com/framework/docs/3.1/font_weight.md

Shows how to apply font weight utilities with responsive prefixes for different screen sizes and display types. This example demonstrates bold text on 4-bit displays and at medium breakpoints.

```html
<span class="text--base font--regular 4bit:font--bold">
  Bold only on 4-bit displays
</span>
<span class="text--large font--regular md:font--bold">
  Bold at medium breakpoint and up
</span>
```

--------------------------------

### Responsive Corner Rounding Example

Source: https://trmnl.com/framework/docs/3.1/rounded.md

Apply different corner rounding for landscape and portrait orientations. Use responsive prefixes to control rounding at different breakpoints.

```html
<div class="rounded-tl--xlarge portrait:rounded-tl--small">
      Xlarge in landscape, small in portrait
    </div>
```

--------------------------------

### Responsive Container Query Width Example

Source: https://trmnl.com/framework/docs/3.1/size.md

Uses container query units to set responsive width, applying 25% of the container width by default, 50% on medium screens and up, and 75% on large screens and up.

```html
<div class="w--[25cqw] md:w--[50cqw] lg:w--[75cqw]">Responsive Container Query</div>
```

--------------------------------

### Responsive Rounded Example

Source: https://trmnl.com/framework/docs/3.1/rounded.md

Shows how to apply different border radius values at different breakpoints and orientations. The `--base` modifier can be used to reset to the default size.

```HTML
<!-- Orientation example -->
    <div class="rounded--xlarge portrait:rounded--small">
      Xlarge in landscape, small in portrait
    </div>
```

--------------------------------

### Bit-depth Text Size Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies text size utilities on specific bit-depth displays. Used to adjust typography for different display capabilities.

```html
<span class="text--base 4bit:text--xlarge">
  Larger on 4-bit displays
</span>
```

--------------------------------

### Base Text Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies the 'text--base' class for base text size. Use 'font--bold' for bold text.

```html
<span class="text--base">Regular text</span>
<span class="text--base font--bold">Bold text</span>
```

--------------------------------

### Responsive Rich Text Size

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Shows how to apply responsive prefixes to Rich Text content. This example sets the content to base size by default and switches to xxxlarge on large screens.

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

--------------------------------

### Orientation-Based Description Sizing

Source: https://trmnl.com/framework/docs/3.1/description.md

Adapt description sizes based on orientation using 'portrait:' prefix. This example sets a large size by default and a base size in portrait mode.

```html
<span class="description description--large portrait:description--base">Orientation Variant</span>
```

--------------------------------

### Small Table Example

Source: https://trmnl.com/framework/docs/3.1/table.md

Use the `table--small` class for a compact table with reduced row heights. The `table--condensed` class is a backward-compatible alias.

```html
<table class="table table--small" data-table-limit="true">
            <thead>
              <tr>
                <th><span class="title title--small">Employee</span></th>
                <th><span class="title title--small">Role</span></th>
                <th><span class="title title--small">Pranks</span></th>
                <th><span class="title title--small">Sales</span></th>
                <th><span class="title title--small">Score</span></th>
                <th><span class="title title--small">Fun Fact</span></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="label label--small">Row 1, Cell 1</span></td>
                <td><span class="label">Row 1, Cell 2</span></td>
                <td><span class="label label--small">Row 1, Cell 3</span></td>
              </tr>
            </tbody>
          </table>
```

--------------------------------

### Small Text Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies the 'text--small' class for small text. Use 'font--bold' for bold text.

```html
<span class="text--small">Regular text</span>
<span class="text--small font--bold">Bold text</span>
```

--------------------------------

### Responsive Description Sizing

Source: https://trmnl.com/framework/docs/3.1/description.md

Apply responsive prefixes like 'lg:' to change description sizes at different screen widths. This example sets the description to xlarge size on large screens.

```html
<span class="description lg:description--xlarge">
  Responsive Description
</span>
```

--------------------------------

### Dark Mode with Responsive Variants

Source: https://trmnl.com/framework/docs/3.1/responsive.md

For utilities supporting dark-mode variants, use the `dark:` prefix first, followed by other responsive modifiers. This example targets dark mode on medium+ screens in portrait orientation with a 2-bit display.

```html
<div class="dark:md:portrait:2bit:hidden">...</div>
```

--------------------------------

### Tabular Numbers Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Demonstrates enabling tabular numbers for consistent alignment using the `value--tnums` modifier. Compares regular and tabular number display.

```html
<span class="value value--large">Regular: 48,206.62</span>
<span class="value value--large value--tnums">Tabular: 48,206.62</span>
```

--------------------------------

### Complex Responsive Layout: Changing Display Types

Source: https://trmnl.com/framework/docs/3.1/visibility.md

This example shows how an element's display type can change across different breakpoints, from inline to inline-block, then flex, and finally grid.

```html
<div class="inline sm:inline-block md:flex lg:grid">
  Changes display type at each breakpoint
</div>
```

--------------------------------

### Combine Size, Orientation, and Bit-Depth Variants

Source: https://trmnl.com/framework/docs/3.1/responsive.md

Achieve highly targeted responsive designs by combining size, orientation, and bit-depth variants. The pattern is `size:orientation:bit-depth:utility`. This example targets medium+ screens in portrait mode with a 4-bit display.

```html
<div class="flex flex--row md:portrait:4bit:flex--col">
  <!-- Row layout by default -->
  <!-- Column layout on medium+ screens, in portrait, with 4-bit display -->
</div>
```

--------------------------------

### Bit-Depth Responsive Content Sizing

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Use bit-depth prefixes to optimize content text size for different display color capabilities. This example shows how to display optimized content and selective sizing based on bit-depth.

```html
<div class="richtext gap--large">
      <div class="content 1bit:content--large 2bit:content--xlarge 4bit:content--xxlarge">
        <p>Display optimized content</p>
      </div>
    </div>
```

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

--------------------------------

### Apply Chromatic Backgrounds and Text

Source: https://trmnl.com/framework/docs/3.1/background.md

Use `bg--{hue}-{step}` and `text--{hue}-{step}` classes for applying specific chromatic color backgrounds and text colors. Examples include pure red, red at shade 50, blue at shade 40, and green at shade 60.

```html
<div class="bg--red">Pure red</div>
<div class="bg--red-50">Red 50</div>
<div class="bg--blue-40">Blue 40</div>
<div class="bg--green-60">Green 60</div>
<div class="text--red-50">Red text</div>
```

--------------------------------

### Orientation and Size Variant Title

Source: https://trmnl.com/framework/docs/3.1/title.md

Illustrates applying different Title sizes based on screen orientation. This example is large by default but becomes small in portrait mode.

```html
<span class="title title--large portrait:title--small">Orientation Variant</span>
```

--------------------------------

### Orientation Variant Content Sizing

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Demonstrates adapting Rich Text content size based on device orientation. This example sets the content to large by default and switches to small size in portrait mode.

```html
<!-- 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>
```

--------------------------------

### Position Grid Rows Horizontally

Source: https://trmnl.com/framework/docs/3.1/grid.md

Control the horizontal alignment of items within a grid row using `row--{position}` modifiers (`start`, `center`, `end`). This example uses a single-column grid.

```html
<div class="grid grid--cols-1">
  <div class="row row--start">
    <div>Item</div>
  </div>
  <div class="row row--center">
    <div>Item</div>
  </div>
  <div class="row row--end">
    <div>Item</div>
  </div>
</div>
```

--------------------------------

### Position Grid Columns Vertically

Source: https://trmnl.com/framework/docs/3.1/grid.md

Control the vertical alignment of items within a grid column using `col--{position}` modifiers (`start`, `center`, `end`). This example uses a 3-column grid.

```html
<div class="grid grid--cols-3">
  <div class="col col--start">
    <div>Item</div>
  </div>
  <div class="col col--center">
    <div>Item</div>
  </div>
  <div class="col col--end">
    <div>Item</div>
  </div>
</div>
```

--------------------------------

### Resetting Description Size at Breakpoint

Source: https://trmnl.com/framework/docs/3.1/description.md

Use breakpoint prefixes to reset description sizes. This example makes the description large by default and resets it to base size on medium screens and larger.

```html
<span class="description description--large md:description--base">
  Large by default, base on medium+ screens
</span>
```

--------------------------------

### Large Value Example

Source: https://trmnl.com/framework/docs/3.1/value.md

Shows the `value--large` class for larger text. Includes an example with tabular numbers.

```html
<span class="value value--large">Example</span>
<span class="value value--large value--tnums">48,206.62</span>
```

--------------------------------

### Title Bar with Instance Label

Source: https://trmnl.com/framework/docs/3.1/title_bar.md

Add an instance label using the 'instance' class to display additional context, such as the environment (e.g., Production).

```html
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg">
  <span class="title">Title Bar with Instance</span>
  <span class="instance">Production</span>
</div>
```

--------------------------------

### Responsive Clamp Configuration

Source: https://trmnl.com/framework/docs/3.1/clamp.md

Configure clamping behavior based on screen size and orientation using specific `data-clamp-*` attributes. This allows for adaptive text truncation.

```html
<span class="description" data-clamp="2" data-clamp-md="4" data-clamp-portrait="1">Clamp to 2 lines by default, 4 on medium+ screens, 1 in portrait</span>
```

--------------------------------

### Min/Max Width with Dynamic Sizes

Source: https://trmnl.com/framework/docs/3.1/size.md

Use `w--min-full`, `w--max-full`, `w--min-auto`, and `w--max-auto` to set dynamic minimum and maximum width constraints.

```html
<div class="w--min-full">min-width: 100%</div>
<div class="w--max-full">max-width: 100%</div>
```

--------------------------------

### TRMNL Bundle Text Styling

Source: https://trmnl.com/framework/docs/3.1/font_family.md

Example of text styling within the TRMNL bundle, demonstrating different sizes and bold weights.

```html
text--small · TRMNL
text--base · TRMNL
text--large · TRMNL
text--base font--bold · TRMNL
```

--------------------------------

### Using Preferred Gray Shades

Source: https://trmnl.com/framework/docs/3.1/colors.md

Demonstrates the usage of the preferred, new naming convention for gray shades. These map to equivalent extended shades.

```html
<!-- Preferred (new naming) -->
    <div class="bg--gray-10">Gray 10</div>
    <div class="bg--gray-20">Gray 20</div>
```

--------------------------------

### Overflow Component Structure

Source: https://trmnl.com/framework/docs/3.1/overflow

This HTML structure defines the basic setup for an Overflow component. Use this as a template for implementing the component in your project.

```html
<div class="columns">
      <div class="column"
           data-list-limit="true"
           data-list-max-height="340"
           data-list-hidden-count="true"
           data-list-max-columns="2">
        <!-- Items go here -->
      </div>
    </div>
```

--------------------------------

### Large Text Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies the 'text--large' class for large text. Use 'font--bold' for bold text.

```html
<span class="text--large">Regular text</span>
<span class="text--large font--bold">Bold text</span>
```

--------------------------------

### Left Aligned Rich Text Example

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Demonstrates a left-aligned rich text component. This is the default and most readable format for longer text content.

```html
<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>
```

--------------------------------

### Mashup Structure with Multiple Views

Source: https://trmnl.com/framework/docs/3.1/structure.md

Demonstrates how to use a Mashup to arrange multiple views on a single screen, with each view having its own layout.

```html
<div class="screen">
  <div class="mashup mashup--1Lx1R">
    <div class="view view--half_vertical">
      <div class="layout">...</div>
    </div>
    <div class="view view--half_vertical">
      <div class="layout">...</div>
    </div>
  </div>
</div>
```

--------------------------------

### XLarge Text Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies the 'text--xlarge' class for extra large text. Use 'font--bold' for bold text.

```html
<span class="text--xlarge">Regular text</span>
<span class="text--xlarge font--bold">Bold text</span>
```

--------------------------------

### Right Aligned Rich Text Example

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Demonstrates a right-aligned rich text component. Useful for specific design scenarios or to create visual tension.

```html
<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>
```

--------------------------------

### Center Aligned Rich Text Example

Source: https://trmnl.com/framework/docs/3.1/rich_text.md

Demonstrates a center-aligned rich text component. Ideal for headings, quotes, or shorter text that needs to be highlighted.

```html
<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>
```

--------------------------------

### Description Component Size Variants

Source: https://trmnl.com/framework/docs/3.1/description.md

Demonstrates the different size variants available for the Description component, including default, large, extra-large, and extra-extra-large. Also shows how to reset size at breakpoints.

```html
<span class="description">Base Description</span>

<span class="description description--large">Large Description</span>

<span class="description description--xlarge">XLarge Description</span>

<span class="description description--xxlarge">XXLarge Description</span>

<span class="description description--large md:description--base">
  Large by default, base on medium+ screens
</span>
```

--------------------------------

### XXXLarge Text Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies the 'text--xxxlarge' class for triple extra large text. Use 'font--bold' for bold text.

```html
<span class="text--xxxlarge">Regular text</span>
<span class="text--xxxlarge font--bold">Bold text</span>
```

--------------------------------

### Control Item Basis and Order

Source: https://trmnl.com/framework/docs/3.1/flex.md

Set the initial size of flex items with `basis--*` utilities and control their stacking order with `order--*` utilities. This allows for precise layout control.

```html
<div class="flex flex--row">
  <div class="basis--36">basis--36</div>
  <div class="basis--20">basis--20</div>
  <div class="basis--24">basis--24</div>
</div>
```

```html
<div class="flex flex--row">
  <div class="order--last">order--last</div>
  <div class="order--first">order--first</div>
  <div class="order--2">order--2</div>
  <div class="order---1">order---1</div>
</div>
```

--------------------------------

### Responsive Gap Patterns

Source: https://trmnl.com/framework/docs/3.1/gap.md

Illustrates various responsive gap patterns for different layout structures like flex columns and grids.

```html
<div class="flex flex--col gap md:gap--large portrait:gap--small">...</div>
```

```html
<div class="grid grid--cols-2 gap--xsmall lg:gap--medium md:portrait:gap--large">...</div>
```

--------------------------------

### XXLarge Text Example

Source: https://trmnl.com/framework/docs/3.1/text_size.md

Applies the 'text--xxlarge' class for double extra large text. Use 'font--bold' for bold text.

```html
<span class="text--xxlarge">Regular text</span>
<span class="text--xxlarge font--bold">Bold text</span>
```

--------------------------------

### Basic Row Layout with Flex

Source: https://trmnl.com/framework/docs/3.1/layout.md

Demonstrates a basic horizontal layout using layout--row and flex for child arrangement.

```html
<div class="layout">
  <div class="flex flex--row">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>
```

--------------------------------

### Define 3 Columns with Grid

Source: https://trmnl.com/framework/docs/3.1/grid.md

Use `grid--cols-{number}` on the parent element to define the total number of equal-width columns. This example sets up a 3-column grid.

```html
<div class="grid grid--cols-3">
  <div>1/3</div>
  <div>1/3</div>
  <div>1/3</div>
</div>
```

--------------------------------

### Define 4 Columns with Grid

Source: https://trmnl.com/framework/docs/3.1/grid.md

Use `grid--cols-{number}` on the parent element to define the total number of equal-width columns. This example sets up a 4-column grid.

```html
<div class="grid grid--cols-4">
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
</div>
```

--------------------------------

### Base Table Styling

Source: https://trmnl.com/framework/docs/3.1/table.md

This snippet demonstrates the standard table styling using the `table--base` class. It includes a header and a sample row with basic cell structure.

```html
<table class="table table--base" data-table-limit="true">
            <thead>
              <tr>
                <th><span class="title">Employee</span></th>
                <th><span class="title">Role</span></th>
                <th><span class="title">Pranks</span></th>
                <th><span class="title">Sales</span></th>
                <th><span class="title">Score</span></th>
                <th><span class="title">Fun Fact</span></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="label label--small">Row 1, Cell 1</span></td>
                <td><span class="label">Row 1, Cell 2</span></td>
                <td><span class="label label--small">Row 1, Cell 3</span></td>
              </tr>
            </tbody>
          </table>
```

--------------------------------

### Setting Custom Max Height

Source: https://trmnl.com/framework/docs/3.1/content_limiter.md

Use the `data-content-max-height` attribute on a div to set a specific maximum height for the content limiter. This example sets the maximum height to 140 pixels.

```html
<div class="content" data-content-limiter="true" data-content-max-height="140">
  <p>Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble...</p>
</div>
```

```html
<div class="content" data-content-limiter="true" data-content-max-height="140">
  <p>Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble...</p>
</div>
```

--------------------------------

### Applying Classic Font Bundle

Source: https://trmnl.com/framework/docs/3.1/font_family.md

Add the 'screen--fonts-classic' class to the screen root to activate the Classic font bundle on low-density displays. High-density displays will still use Inter.

```html
<div class="screen screen--fonts-classic">...</div>
```

--------------------------------

### Using Deprecated Gray Shades

Source: https://trmnl.com/framework/docs/3.1/colors.md

Demonstrates the usage of deprecated gray shade class names for background colors. These are still supported for backward compatibility.

```html
<!-- Deprecated (but still works) -->
    <div class="bg--gray-1">Gray 1</div>
    <div class="bg--gray-2">Gray 2</div>
```

--------------------------------

### Distribute Gap

Source: https://trmnl.com/framework/docs/3.1/gap.md

The `gap--distribute` modifier places the first item at the start of the container and the last item at the end, with equal spacing between items. This uses `justify-content: space-between`.

```html
<!-- Distribute spacing in a flex container -->
<div class="flex flex--col gap--distribute h--52">
  <div>First item (at start)</div>
  <div>Middle item</div>
  <div>Last item (at end)</div>
</div>
```

--------------------------------

### Responsive Arbitrary Pixel Sizes

Source: https://trmnl.com/framework/docs/3.1/trmnl_x_guide.md

Apply responsive prefixes to arbitrary pixel width and height utilities. The maximum value for these utilities is now 800px.

```html
<!-- Responsive arbitrary sizes -->
<div class="w--[150px] md:w--[250px] lg:w--[400px]">Responsive arbitrary width</div>
```

```html
<div class="h--[100px] portrait:h--[200px]">Orientation-aware height</div>
```

--------------------------------

### Table Overflow Example

Source: https://trmnl.com/framework/docs/3.1/table_overflow.md

A regular-sized table demonstrating overflow behavior within a fixed height budget. The 'and X more' row is automatically added when rows exceed the available height.

```html
<table class="table" data-table-limit="true">
            <thead>
              <tr>
                <th><span class="title"></span></th>
                <th><span class="title">Employee</span></th>
                <th><span class="title">Role</span></th>
                <th><span class="title">Pranks</span></th>
                <th><span class="title">Sales</span></th>
                <th><span class="title">Score</span></th>
                <th><span class="title">Fun Fact</span></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="label label--small">Row 1, Cell 1</span></td>
                <td><span class="label">Row 1, Cell 2</span></td>
                <td><span class="label label--small">Row 1, Cell 3</span></td>
              </tr>
            </tbody>
          </table>
```

--------------------------------

### Responsive Visibility: Visible then Hidden on Large Screens

Source: https://trmnl.com/framework/docs/3.1/visibility.md

Use 'visible' with a responsive prefix like 'lg:' to show an element by default and hide it on large screens and larger.

```html
<div class="visible lg:hidden">lg:hidden</div>
```