### Basic Column Layout Example (HTML)

Source: https://usetrmnl.com/framework/columns

Demonstrates a basic column layout using the Columns system. This allows for flexible content distribution across multiple columns, suitable for organizing plugin content.

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

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

### Bit-Depth Responsive Example (HTML)

Source: https://usetrmnl.com/framework/responsive

Shows how to apply styles based on display bit-depth. Each variant targets a specific bit-depth (1bit, 2bit, 4bit) for color capabilities.

```html
<!-- black on 1-bit, gray-45 on 2-bit, gray-75 on 4-bit screens -->
<div class="h--36 w--36 rounded--large 1bit:bg--black 2bit:bg--gray-45 4bit:bg--gray-75"></div>
```

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

### Value System: XXSmall Text Size with Tabular Numbers (HTML)

Source: https://usetrmnl.com/framework/value

Demonstrates how to apply the XXSmall text size variant for the Value system. Includes an example with tabular numbers for precise alignment of numerical data.

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

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

### Device-Specific Display Control Examples

Source: https://usetrmnl.com/framework/visibility

Demonstrates combining size and bit-depth prefixes for precise targeting of specific devices and display capabilities. This allows for optimized layouts across TRMNL's diverse hardware.

```html
<!-- Device-specific layouts -->
<div class="hidden md:1bit:block md:2bit:flex lg:4bit:grid">
  Different display types per device generation
</div>

<!-- Optimize for e-ink performance -->
<div class="table 1bit:block 2bit:flex">
  Simple layouts for lower bit-depth displays
</div>

<!-- Complex responsive + bit-depth targeting -->
<div class="hidden sm:inline md:1bit:block md:2bit:flex lg:4bit:grid">
  Progressive enhancement across all device capabilities
</div>
```

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

### HTML for Regular Scale Screen (100%)

Source: https://usetrmnl.com/framework/scale

This HTML example represents the 'Regular' scale level (100%) of the Usetrmnl framework. This is the default scale, serving as the baseline for all other scale adjustments. The 'screen--scale-regular' class is applied to the container.

```html
<div class="screen screen--scale-regular">
  <!-- Your content here -->
</div>
```

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

### HTML: Value Component Size Variants

Source: https://usetrmnl.com/framework/value

Demonstrates how to apply different size classes to the Value component for various text display needs, from body text to prominent headings. Includes examples for .value--small, .value--large, .value--xlarge, .value--xxlarge, and .value--xxxlarge.

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

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

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

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

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

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

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

### HTML: Inline Flex Container Example

Source: https://usetrmnl.com/framework/flex

This snippet demonstrates how to create an inline-level flex container using the `inline-flex` CSS display property. It shows how text can precede and follow the flex container, with the container itself aligning with the text line. No external JavaScript dependencies are required.

```html
<span>Text before</span>
<div class="inline-flex flex--row gap">
  <div>•</div>
  <div>•</div>
</div>
<span>Text after</span>
```

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

### HTML Text Fitting Example

Source: https://usetrmnl.com/framework/fit_value

Demonstrates how to use the 'data-value-fit' and 'data-value-fit-max-height' attributes to enable text fitting. This ensures text content remains within specified height constraints by automatically adjusting font size and weight.

```html
<span class="value value--xxxlarge" data-value-fit="true" data-value-fit-max-height="340">
  Hello. This is a really long headline that will need to adjust significantly to fit within its container space and look good in a layout.
</span>

<span class="value value--xxxlarge" data-value-fit="true" data-value-fit-max-height="340">
  This is a medium length headline that fits nicely.
</span>

<span class="value value--xxxlarge" data-value-fit="true" data-value-fit-max-height="340">
  Hello.
</span>
```

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

### Richtext Component: Center Alignment Example (HTML)

Source: https://usetrmnl.com/framework/rich_text

Illustrates the HTML for a center-aligned richtext component. This example showcases the use of `richtext--center`, `content--center`, and `text--center` classes to achieve centered text layout.

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

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

### Responsive Value Example (HTML)

Source: https://usetrmnl.com/framework/responsive

Demonstrates progressive sizing for text elements. The style changes based on screen size breakpoints (md, lg). Applies to medium screens and larger, then large screens and larger.

```html
<!-- Regular by default, large on medium and above, xlarge on large and above -->
<span class="value md:value--large lg:value--xlarge">
  Responsive Value
</span>
```

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

### Common Divider Usage Patterns (HTML)

Source: https://usetrmnl.com/framework/divider

Provides examples of how the Divider component can be used as a modern replacement for older border-based patterns. It demonstrates both the automatic background detection and manual specification methods for creating section separators.

```html
<!-- Replacing common border--h-x w--full pattern -->
<!-- Old way: -->
<div class="border--h-6 w--full"></div>

<!-- New way (with auto background detection): -->
<div class="divider"></div>

<!-- Or with manual specification: -->
<div class="divider--on-light"></div>
```

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

### Value System: XSmall Text Size with Tabular Numbers (HTML)

Source: https://usetrmnl.com/framework/value

Illustrates the usage of the XSmall text size variant within the Value system. This variant is suitable for secondary information and 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>
```

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

### Rich Text Content Size Variants (HTML)

Source: https://usetrmnl.com/framework/rich_text

Demonstrates how to use different content size variants for the Rich Text component. It includes examples for large, default, and small text sizes, each intended for specific emphasis and readability needs.

```html
<div class="richtext gap--large">
  <!-- Large Size -->
  <div class="content content--large">
    <p>This is large size rich text content.<br>
    Perfect for headings and emphasis.</p>
  </div>

  <!-- Default Size -->
  <div class="content">
    <p>This is the default size for rich text content.<br>
    Optimized for readability and general use.</p>
  </div>

  <!-- Small Size -->
  <div class="content content--small">
    <p>This is small size rich text content.<br>
    Ideal for captions and secondary information.</p>
  </div>
</div>
```

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

### Default Title HTML Example

Source: https://usetrmnl.com/framework/title

This code snippet demonstrates how to apply the default title style using the 'title' CSS class. It creates a standard-sized heading for primary content headers.

```html
<span class="title">Default Title</span>
```

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

### Small Title HTML Example

Source: https://usetrmnl.com/framework/title

This code snippet shows how to create a more compact heading by adding the 'title--small' class to the 'title' class. This is useful for secondary headers or in space-constrained areas.

```html
<span class="title title--small">Small Title</span>
```

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

### Combine Scale Modifiers with Device Configurations

Source: https://usetrmnl.com/framework/scale

This code demonstrates how scale modifiers can be combined with device-specific classes to override the default UI scale for particular devices. It shows examples of using device defaults, overriding with a small scale, and combining with a specific device configuration.

```html
<!-- Use device default UI scale -->
<div class="screen screen--v2">
  <!-- Content -->
</div>

<!-- Override device scale with scale modifier -->
<div class="screen screen--v2 screen--scale-small">
  <!-- Content at 87.5% scale -->
</div>

<!-- Combine with any device configuration -->
<div class="screen screen--amazon_kindle_2024 screen--scale-large">
  <!-- Kindle device with 112.5% scale -->
</div>
```

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

### Richtext Component: Left Alignment Example (HTML)

Source: https://usetrmnl.com/framework/rich_text

Demonstrates the HTML structure for a left-aligned richtext component. It includes the parent `.richtext` container and the `.content` child, both with left alignment modifiers. The content itself is also left-aligned.

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

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

### Highcharts Gauge Chart Setup and Display (HTML/JavaScript)

Source: https://usetrmnl.com/framework/chart

This snippet sets up and displays multiple Highcharts gauge charts. It includes the necessary Highcharts library imports, HTML elements for the charts, and JavaScript to initialize and populate the gauges with data. The gauges are configured to show daily and weekly sleep metrics.

```html
<!-- import Highcharts libraries -->
<script src="https://usetrmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://usetrmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://usetrmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>

<div class="view view--full">
  <div class="layout layout--col gap--none">
    <div class="grid grid--cols-7 mb--5">
      <div class="h--32">
        <div id="day_0" class="h--24"></div>
        <span class="description text--center">Monday</span>
      </div>
      <div class="h--32">
        <div id="day_1" class="h--24"></div>
        <span class="description text--center">Tuesday</span>
      </div>
      <div class="h--32">
        <div id="day_2" class="h--24"></div>
        <span class="description text--center">Wednesday</span>
      </div>
      <div class="h--32">
        <div id="day_3" class="h--24"></div>
        <span class="description text--center">Thursday</span>
      </div>
      <div class="h--32">
        <div id="day_4" class="h--24"></div>
        <span class="description text--center">Friday</span>
      </div>
      <div class="h--32">
        <div id="day_5" class="h--24"></div>
        <span class="description text--center">Saturday</span>
      </div>
      <div class="h--32">
        <div id="day_6" class="h--24"></div>
        <span class="description text--center">Sunday</span>
      </div>
    </div>

    <div class="divider"></div>

    <div class="grid">
      <div class="col--span-1 col--center">
        <div id="day_all" class="w-[340px] mt--5"></div>
      </div>
      <div class="col--span-1 gap--large">
        <div class="flex flex--col gap--medium w--full flex--center">
          <div class="grid grid--cols-2">
            <div class="item">
            <div class="meta"></div>
            <div class="content">
                <span class="value value--tnums">18%</span>
                <span class="label">REM Sleep</span>
            </div>
          </div>
            <div class="item">
              <div class="meta"></div>
              <div class="content">
                <span class="value value--tnums">23%</span>
                <span class="label">Deep Sleep</span>
        </div>
      </div>
    </div>
          <div class="divider"></div>
          <div class="grid grid--cols-2">
            <div class="item">
              <div class="meta"></div>
              <div class="content">
                <span class="value value--small value--tnums">12m</span>
                <span class="label">Time to Sleep</span>
  </div>
          </div>
            <div class="item">
              <div class="meta"></div>
              <div class="content">
                <span class="value value--small value--tnums">7h 32min</span>
                <span class="label">Sleep Duration</span>
        </div>
          </div>
          </div>
          <div class="divider"></div>
          <div class="grid grid--cols-2">
            <div class="item">
                            <div class="meta"></div>
                            <div class="content">
                <span class="value value--small value--tnums">8</span>
                <span class="label">Toss & Turns</span>
                            </div>
                          </div>
            <div class="item">
              <div class="meta"></div>
              <div class="content">
                <span class="value value--small value--tnums">0.5%</span>
                <span class="label">Snoring</span>
                            </div>
                            </div>
                            </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <script type="text/javascript">
  var dailyScores = [92, 95, 81, 56, 81, 72, 85];
  var weeklyScore = 82;

  function createGauge(score, day, opts) {
    opts ||=
      {
        title: null,
        height: "80%",
        labels: {
          distance: 15,
          style: {
            fontSize: "16px"
          }
        },
        series: {
          fontSize: "3em"
        },
        yAxis: {
          title: textRating(score)
        }
      };

    Highcharts.chart(`day_${day}`, {
                        chart: {
        type: "gauge",
        height: opts.height,
        animation: false
      },

                        title: {
        text: opts.title
      },

      pane: {
        startAngle: -150,
        endAngle: 150,
        background: {

```

```javascript
function createGauge(score, day, opts) {
    opts ||=
      {
        title: null,
        height: "80%",
        labels: {
          distance: 15,
          style: {
            fontSize: "16px"
          }
        },
        series: {
          fontSize: "3em"
        },
        yAxis: {
          title: textRating(score)
        }
      };

    Highcharts.chart(`day_${day}`, {
                        chart: {
        type: "gauge",
        height: opts.height,
        animation: false
      },

                        title: {
        text: opts.title
      },

      pane: {
        startAngle: -150,
        endAngle: 150,
        background: {
        }
      },
      credits: {
        enabled: false
      },
      
      yAxis: {
        min: 0,
        max: 100,
        tickInterval: 25,
        minorTickInterval: null,
        tickPosition: "outside",
        tickLength: 5,
        minorTickLength: 0,
        labels: opts.labels,
        plotBands: [
          {
            from: 0,
            to: 50,
            color: "#e62d2d",
            innerRadius: "75%",
            outerRadius: "95%"
          },
          {
            from: 50,
            to: 80,
            color: "#f2f22d",
            innerRadius: "75%",
            outerRadius: "95%"
          },
          {
            from: 80,
            to: 100,
            color: "#00a600",
            innerRadius: "75%",
            outerRadius: "95%"
          }
        ],
        title: opts.yAxis.title
      },

      series: [
        {
          data: [score],
          dataLabels: opts.series,
          dial: {
            baseWidth: 10,
            baseLength: "0%",
            radius: "0%",
            rearLength: "0%"
          },
          pivot: {
            radius: 0
          }
        }
      ]
    });
  }

  // Populate daily gauges
  dailyScores.forEach((score, index) => {
    createGauge(score, index, {
      title: null,
      height: "80%",
      labels: {
        distance: -20,
        style: {
          fontSize: "12px"
        }
      },
      series: {
        fontSize: "2em"
      },
      yAxis: {
        title: textRating(score)
      }
    });
  });

  // Populate weekly gauge
  createGauge(weeklyScore, "all", {
    title: null,
    height: "340px",
    labels: {
      distance: 15,
      style: {
        fontSize: "16px"
      }
    },
    series: {
      fontSize: "3em"
    },
    yAxis: {
      title: textRating(weeklyScore)
    }
  });

  function textRating(score) {
    if (score > 80)
      return "Excellent";
    else if (score > 50)
      return "Good";
    else
      return "Poor";
  }
</script>
```

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

### Rich Text with Content Limiter (HTML)

Source: https://usetrmnl.com/framework/rich_text

Illustrates the integration of the Rich Text component with the Content Limiter utility to handle overflowing text. This example automatically adjusts text size to fit within available vertical space, ideal for constrained layouts.

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

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

### Row Positioning (HTML)

Source: https://usetrmnl.com/framework/grid

This snippet shows how to control the horizontal alignment of rows within a grid using `row--{position}` classes, where `position` can be `start`, `center`, or `end`.

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

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

### Column Positioning (HTML)

Source: https://usetrmnl.com/framework/grid

This snippet demonstrates controlling the vertical alignment of columns within a grid using `col--{position}` classes, where `position` can be `start`, `center`, or `end`.

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

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

### Control Rich Text Width with Size Utility Classes (HTML)

Source: https://usetrmnl.com/framework/rich_text

Shows how to control the width of Rich Text content using Size utility classes. This example applies a fixed width of 240 pixels to constrain the text, demonstrating precision in layout control.

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

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

### Richtext Component: Right Alignment Example (HTML)

Source: https://usetrmnl.com/framework/rich_text

Presents the HTML structure for a right-aligned richtext component. This code uses `richtext--right`, `content--right`, and `text--right` modifiers to align the content to the right.

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

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

### SCSS: Apply Flexbox Layout Conditionally with screen.screen()

Source: https://usetrmnl.com/framework/responsive_test

This snippet provides examples of using the `screen.screen()` SCSS mixin to apply conditional flexbox utilities. It demonstrates controlling flexbox properties like alignment and direction based on responsive conditions.

```scss
@include screen.screen('md')
// Resulting CSS class: md:flex--center
// Description: Centered flex items on md+ screens

@include screen.screen('portrait')
// Resulting CSS class: portrait:flex--col
// Description: Column layout for flex items in portrait mode

@include screen.screen('lg', 'portrait')
// Resulting CSS class: lg:portrait:flex--center
// Description: Centered flex items on lg+ screens in portrait mode
```

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

### Define Grid Columns by Count (HTML)

Source: https://usetrmnl.com/framework/grid

This snippet demonstrates how to define grid column layouts by specifying the number of columns using the `grid--cols-{number}` class on the parent element. It shows examples for 4 and 3 columns.

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

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

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

### HTML Example for Overflow Legacy Attributes

Source: https://usetrmnl.com/framework/overflow

This HTML snippet demonstrates the usage of legacy attributes for overflow handling within a column structure. It includes `data-list-limit` to enable overflow, `data-list-max-height` to set a height budget, `data-list-hidden-count` to show a hidden count label, and `data-list-max-columns` to define the maximum number of columns.

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

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

### Multi-Series Line Chart with Highcharts

Source: https://usetrmnl.com/framework/chart

This snippet generates a multi-series line chart using Highcharts to compare 'Current' and 'Previous' period data. It includes necessary script imports, chart container setup, data definition, and chart configuration with custom styling for each series. Dependencies include the Highcharts library and its pattern-fill module.

```html
<script src="https://usetrmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://usetrmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://usetrmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>

<div class="view view--full">
  <div class="layout layout--col gap--space-between">
    <div class="grid">
      <div class="row">
        <div class="grid">
          <div class="item col--span-2">
            <div class="meta"></div>
            <div class="content">
              <span class="value value--large value--tnums">$85,240</span>
              <span class="label">Total Sales</span>
            </div>
          </div>

          <div class="item col--span-1">
            <div class="meta"></div>
            <div class="content">
              <span class="value value--small value--tnums">32</span>
              <span class="label">Pending Orders</span>
            </div>
          </div>

          <div class="item col--span-1">
            <div class="meta"></div>
            <div class="content">
              <span class="value value--xsmall value--tnums">
                <div class="w--14 h--1.5 mb--2 bg--black" style="border-radius: 20px;"></div>
                Jul 01 - Jul 15
              </span>
              <span class="label">Current</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="border--h-5 w--full"></div>

    <div class="grid">
      <div class="row">
        <div class="grid">
          <div class="item col--span-2">
            <div class="meta"></div>
            <div class="content">
              <span class="value value--tnums">$128</span>
              <span class="label">AOV</span>
            </div>
          </div>

          <div class="item col--span-1">
            <div class="meta"></div>
            <div class="content">
              <span class="value value--small value--tnums">665</span>
              <span class="label">Fulfilled Orders</span>
            </div>
          </div>

          <div class="item col--span-1">
            <div class="meta"></div>
            <div class="content">
              <span class="value value--xsmall value--tnums">
                <div class="w--14 h--1.5 mb--2 bg--gray-5"></div>
                Jun 15 - Jun 30
              </span>
              <span class="label">Previous</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="multi-series-chart" class="w--full"></div>

    <script type="text/javascript">
      var currentPeriod = [
        ["2024-07-01", 3500], ["2024-07-02", 4200], ["2024-07-03", 3800],
        ["2024-07-04", 5100], ["2024-07-05", 4800], ["2024-07-06", 3600],
        ["2024-07-07", 2900], ["2024-07-08", 4300], ["2024-07-09", 5200],
        ["2024-07-10", 6100], ["2024-07-11", 5700], ["2024-07-12", 4900],
        ["2024-07-13", 5300], ["2024-07-14", 5800], ["2024-07-15", 6500]
      ];

      var previousPeriod = [
        ["2024-07-01", 2800], ["2024-07-02", 3100], ["2024-07-03", 3400],
        ["2024-07-04", 3900], ["2024-07-05", 4500], ["2024-07-06", 4100],
        ["2024-07-07", 3700], ["2024-07-08", 3300], ["2024-07-09", 4200],
        ["2024-07-10", 4800], ["2024-07-11", 5100], ["2024-07-12", 4700],
        ["2024-07-13", 5400], ["2024-07-14", 5800], ["2024-07-15", 5600]
      ];

      var formattedData = [
        { name: "Current", data: currentPeriod },
        { name: "Previous", data: previousPeriod }
      ];

      Highcharts.chart("multi-series-chart", {
        chart: {
          type: "spline",
          height: 203,
          width: null,
          animation: false,
          spacing: [10, 10, 5, 10]
        },
        title: {
          text: null
        },
        plotOptions: {
          series: {
            animation: false,
            enableMouseTracking: false,
            states: {
              hover: { enabled: false }
            },
            marker: {
              enabled: false
            }
          }
        },
        series: [{
          data: formattedData[0].data,
          lineWidth: 4,
          color: "#000000",
        },{
          data: formattedData[1].data,
          lineWidth: 4,
          color: "#A9A9A9"
        }]
      });
    </script>
  </div>
</div>
```

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

### Fit Value - Basic HTML Usage

Source: https://usetrmnl.com/framework/fit_value

Demonstrates how to apply the Fit Value system to numeric content using HTML. By adding the 'data-value-fit="true"' attribute to a span element with a numeric value, the system will automatically adjust the font size and weight to fit the container. This example shows different large numeric values being fitted.

```html
<span class="value value--xxxlarge" data-value-fit="true">$1,000</span>

<span class="value value--xxxlarge" data-value-fit="true">$1,000,000</span>

<span class="value value--xxxlarge" data-value-fit="true">$1,000,000,000</span>
```

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

### Implement Responsive Sizes with Framework Classes

Source: https://usetrmnl.com/framework/size

Apply different width and height values at various screen sizes using responsive prefixes like `md:` and `lg:`. This enables mobile-first design, where styles cascade upwards from smaller breakpoints.

```html
<!-- Width: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="w--8 md:w--16 lg:w--24">Responsive Width</div>

<!-- Height: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="h--8 md:h--16 lg:h--24">Responsive Height</div>
```

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

### Apply Dynamic Width with Framework Classes

Source: https://usetrmnl.com/framework/size

Utilize `w--full` for elements that should span the full width of their container, and `w--auto` for elements that should automatically adjust their width based on content.

```html
<div class="w--full">Full width</div>
<div class="w--auto">Auto width</div>
```

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

### HTML: Value Component Responsive Sizes

Source: https://usetrmnl.com/framework/value

Shows how to implement responsive text sizing for the Value component using breakpoint prefixes like `sm:`, `md:`, and `lg:`. This allows the text size to adapt dynamically to different screen widths for optimal readability.

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

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

### Apply Background Patterns with bg--{shade} Utility Classes

Source: https://usetrmnl.com/framework/background

Demonstrates the usage of `bg--{shade}` utility classes to apply background patterns to HTML elements. These classes offer sixteen distinct shade values from black to white, including intermediate grays.

```html
<div class="bg--black">Black</div>
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-15">Gray 15</div>
<div class="bg--gray-20">Gray 20</div>
<div class="bg--gray-25">Gray 25</div>
<div class="bg--gray-30">Gray 30</div>
<div class="bg--gray-35">Gray 35</div>
<div class="bg--gray-40">Gray 40</div>
<div class="bg--gray-45">Gray 45</div>
<div class="bg--gray-50">Gray 50</div>
<div class="bg--gray-55">Gray 55</div>
<div class="bg--gray-60">Gray 60</div>
<div class="bg--gray-65">Gray 65</div>
<div class="bg--gray-70">Gray 70</div>
<div class="bg--gray-75">Gray 75</div>
<div class="bg--white">White</div>
```

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

### HTML: Responsive Label Styling by Size

Source: https://usetrmnl.com/framework/label

Demonstrates applying responsive label styles based on screen size breakpoints using prefixes like `md:` and `lg:`. This allows for dynamic changes in label appearance across different devices and viewport sizes.

```html
<!-- Progressive label styling across screen sizes -->
<span class="label md:label--outline lg:label--inverted">
  Responsive Label
</span>

<!-- Multiple breakpoint combinations -->
<span class="label label--small sm:label--outline md:label--underline">
  Progressive Styles
</span>
```

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

### Set Min/Max Width with Framework Classes

Source: https://usetrmnl.com/framework/size

Control minimum and maximum width constraints independently using `w--min-{size}` and `w--max-{size}` classes. These classes ensure elements respect defined width limits.

```html
<div class="w--auto w--min-72">Min Width 72 (288px)</div>
<div class="w--full w--max-32">Max Width 32 (128px)</div>
```

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

### Progress Dots Sizes (HTML)

Source: https://usetrmnl.com/framework/progress

Shows how to implement progress dots in small, regular, and large sizes. Size variations are controlled by adding classes like 'progress-dots--small' or 'progress-dots--large' to the main '.progress-dots' container. Each dot represents a discrete step in a process.

```html
<!-- Small dots -->
<div class="progress-dots progress-dots--small">
  <div class="track">
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--current"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

<!-- Regular dots -->
<div class="progress-dots">
  <div class="track">
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--current"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

<!-- Large dots -->
<div class="progress-dots progress-dots--large">
  <div class="track">
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--current"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>
```

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

### Apply Device Variants and Modifiers (HTML)

Source: https://usetrmnl.com/framework/screen

Illustrates using device-specific classes (e.g., `screen--og`, `screen--v2`) and bit-depth modifiers (e.g., `screen--1bit`, `screen--4bit`) to configure screen dimensions and color depth. Shows combining orientation and other modifiers.

```html
<!-- Original TRMNL -->
<div class="screen screen--og screen--1bit">
  <!-- 800x480, 1-bit depth -->
</div>

<!-- TRMNL V2 -->
<div class="screen screen--v2 screen--4bit">
  <!-- 1040x780, 4-bit depth -->
</div>

<!-- Amazon Kindle 2024 -->
<div class="screen screen--amazon_kindle_2024 screen--4bit">
  <!-- 718x540, 4-bit depth -->
</div>

<!-- Combined modifiers -->
<div class="screen screen--v2 screen--portrait screen--4bit">
  <!-- All modifiers work together -->
</div>
```

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

### HTML: Value Component Orientation and Size+Orientation

Source: https://usetrmnl.com/framework/value

Demonstrates how to control the Value component's size based on device orientation using `portrait:` and combining orientation with size breakpoints (e.g., `md:portrait:`). This provides granular control over text display in different contexts.

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

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

### Initialize Daily and Weekly Gauges (JavaScript)

Source: https://usetrmnl.com/framework/chart

Iterates through daily scores to create small gauge charts and creates a main weekly gauge chart. This script utilizes the `createGauge` function with specific options for daily and weekly views, adjusting font sizes and axis titles accordingly.

```javascript
// Create small daily gauges
  dailyScores.forEach((score, idx) => {
    let opts = {
      title: null,
      labels: { enabled: false },
      series: {
        fontSize: "16px",
        fontWeight: "400",
        fontFamily: "NicoClean"
      },
      yAxis: {
        title: null
      }
    }
    createGauge(score, idx, opts);
  });

  // Create main weekly gauge
  createGauge(weeklyScore, "all", {
    title: null,
    height: "80%",
    labels: {
      distance: 15
    },
    series: {
      fontSize: "3em",
      fontWeight: "550"
    },
    yAxis: {
      title: textRating(weeklyScore)
    }
  });
```

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

### HTML Structure for XSmall Table

Source: https://usetrmnl.com/framework/table

This HTML snippet demonstrates the structure for an XSmall table using the `table--xsmall` class. It includes table headers and a sample row with cells, all styled for a compact appearance. This structure is essential for optimizing space in tabular data presentations.

```html
<table class="table table--xsmall" 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 label--small">Row 1, Cell 2</span></td>
            <td><span class="label label--small">Row 1, Cell 3</span></td>
          </tr>
        </tbody>
      </table>
```

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

### Set Min/Max Height with Framework Classes

Source: https://usetrmnl.com/framework/size

Define minimum and maximum height constraints using `h--min-{size}` and `h--max-{size}` classes. `h--min` ensures a minimum height, while `h--max` prevents exceeding a specified height.

```html
<div class="h--min-12">Min Height 72 (288px)</div>
<div class="h--max-8">Max Height 8 (32px)</div>
```

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

### HTML: Responsive Label Styling by Orientation

Source: https://usetrmnl.com/framework/label

Explains how to apply responsive label styles based on screen orientation (e.g., portrait) using prefixes like `portrait:`. This enables distinct label appearances depending on whether the device is held vertically or horizontally.

```html
<!-- Different styles for landscape vs portrait -->
<span class="label label--outline portrait:label--inverted">
  Orientation Aware
</span>

<!-- Portrait-only styling -->
<span class="label portrait:label--underline">
  Portrait Enhancement
</span>
```

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

### Flexbox Item Self Alignment

Source: https://usetrmnl.com/framework/flex

Allows individual flex items to control their alignment along the cross-axis using `self--start`, `self--center`, `self--end`, and `self--stretch`. This utility does not affect sibling items.

```html
<div class="flex flex--row h--36">
  <div class="self--start">self--start</div>
  <div class="self--center">self--center</div>
  <div class="self--end">self--end</div>
  <div class="self--stretch">self--stretch</div>
</div>
```

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

### Responsive Gap Application

Source: https://usetrmnl.com/framework/gap

Shows how to apply different gap values based on screen size and orientation using responsive prefixes like 'md:', 'portrait:', and 'md:portrait:'. The framework uses a mobile-first approach, allowing larger breakpoints to inherit smaller ones.

```html
<div class="grid grid--cols-3 gap--small md:gap--large lg:gap--xlarge portrait:gap md:portrait:gap--xlarge">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

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

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

### Progress Bar Sizes (HTML)

Source: https://usetrmnl.com/framework/progress

Demonstrates how to create progress bars in small, regular, and large sizes. The size is controlled by adding specific classes like 'progress-bar--small' or 'progress-bar--large' to the main container. The fill percentage is set using inline style on the '.fill' element.

```html
<!-- Small bar -->
<div class="progress-bar progress-bar--small">
  <div class="content">
    <span class="label label--small">Small Progress</span>
    <span class="value value--xxsmall">25%</span>
  </div>
  <div class="track">
    <div class="fill" style="width: 25%"></div>
  </div>
</div>

<!-- Regular bar -->
<div class="progress-bar">
  <div class="content">
    <span class="label">Regular Progress</span>
    <span class="value value--xxsmall">50%</span>
  </div>
  <div class="track">
    <div class="fill" style="width: 50%"></div>
  </div>
</div>

<!-- Large bar -->
<div class="progress-bar progress-bar--large">
  <div class="content">
    <span class="label">Large Progress</span>
    <span class="value value--xxsmall">75%</span>
  </div>
  <div class="track">
    <div class="fill" style="width: 75%"></div>
  </div>
</div>
```

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

### Combined Responsive Features for Labels (HTML)

Source: https://usetrmnl.com/framework/label

This snippet shows how to combine multiple responsive systems (size, orientation, bit-depth) for highly targeted label styling. The pattern `size:orientation:bit-depth:utility` allows for complex responsive combinations.

```html
<!-- Highly targeted responsive combinations -->
<span class="label md:portrait:2bit:label--inverted lg:4bit:label--outline">
  Advanced Targeting
</span>

<!-- Multiple responsive conditions -->
<span class="label sm:1bit:label--underline md:portrait:label--outline lg:4bit:label--gray">
  Multi-Condition
</span>
```

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

### HTML for Group Headers with Overflow

Source: https://usetrmnl.com/framework/overflow

This HTML structure demonstrates how group headers are implemented using `div` elements with specific classes. The `data-overflow-max-cols` attribute controls the maximum number of columns, and `group-header` class with `data-group-header='true'` identifies header elements. This setup handles content overflow and ensures headers are not orphaned.

```html
<div class="columns" data-overflow-max-cols="3">
  <div class="column">
    <span class="label label--medium group-header" data-group-header="true">Today</span>
    <!-- Items go here -->
    <span class="label label--medium group-header" data-group-header="true">Tomorrow</span>
    <!-- Items go here -->
    <span class="label label--medium group-header" data-group-header="true">This Week</span>
    <!-- Items go here -->
  </div>
</div>
```

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

### Toggle Screen Orientation (HTML)

Source: https://usetrmnl.com/framework/screen

Demonstrates how to use the `screen--portrait` modifier to swap width and height dimensions for portrait orientation. The framework automatically adjusts layout calculations.

```html
<!-- Landscape (default) -->
<div class="screen">
  <!-- 800x480 dimensions -->
</div>

<!-- Portrait orientation -->
<div class="screen screen--portrait">
  <!-- 480x800 dimensions (swapped) -->
</div>
```