@k8slens/lds-emails

CSS styles for HTML email templates with Lens Design System branding.

Installation

npm install @k8slens/lds-emails

Usage

1. Link the stylesheet in your email HTML:

   <link rel="stylesheet" href="path/to/@k8slens/lds-emails/lib/styles.css" />

2. Build your email using the provided class names

3. Inline all styles before sending with inline-css

Template Structure

<table class="page">
  <tr>
    <td>
      <table class="panel">
        <tr class="panel-header">
          <td>Logo & Title</td>
        </tr>
        <tr class="panel-content">
          <td>Body with <a class="button">CTA</a></td>
        </tr>
        <tr class="panel-footer">
          <td>Footer text</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Available Classes

| Class | Element | Purpose | | --------------- | --------- | ------------------------------ | | page | <table> | Outer wrapper, centers content | | panel | <table> | Main content container | | panel-header | <tr> | Top section (logo, title) | | panel-content | <tr> | Main body content | | panel-footer | <tr> | Footer (legal text) | | button | <a> | CTA button | | link | <a> | Inline link |

Documentation

See examples at lens-design-system.k8slens.dev.

AI Assistance

This package includes an llms.txt file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., AGENTS.md or CLAUDE.md):

Read node_modules/@k8slens/lds-emails/llms.txt for email template reference.

Use LDS email classes instead of custom styles.