Skip to main content
Texas Design System

Integration Guide: Static HTML Site

Scenario: Adding Components to a Static HTML Site

A state agency maintains a static HTML website (no CMS, no framework) and wants to adopt design system components to modernize their UI without a full rebuild.

Asset links:

Alert Banner — Live Preview

Here's what a design system component looks like when integrated. The Alert Banner component below is built with a <div> and a few CSS classes — no JavaScript required:

Information: New benefit applications are now being accepted. Apply before December 31.

The HTML for any of these alerts is:

<div class="txds-alert-banner txds-alert-banner--information" role="status">
  <span class="txds-alert-banner__icon" aria-hidden="true">ℹ</span>
  <p class="txds-alert-banner__text">Your message here.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">×</button>
</div>

Variant classes: txds-alert-banner--danger, txds-alert-banner--warning, txds-alert-banner--information

Add txds-alert-banner--open for a No Fill style with a transparent background and left border instead of filled.

What You Get

  • Zero dependencies — pure CSS and semantic HTML, no JavaScript framework required
  • Drop-in components — copy the HTML markup, link one CSS file, done
  • Customizable branding — override CSS custom properties to match your agency's brand
  • Accessible by default — WCAG 2.2 AA compliant markup patterns
  • Namespaced CSS — all classes use txds- prefix so they won't conflict with existing styles

Integration Steps

1 Get design system CSS + JS

Copy design-system.css and design-system.js from the delivered assets folder:

site/assets/css/design-system.css
site/assets/js/design-system.js

These files contain all component styles and interactions.

2 Link CSS + JS

Add CSS in <head> and JS before </body>:

<link rel="stylesheet"
      href="/css/design-system.css">
<script src="/js/design-system.js" defer></script>

3 Copy component markup

Pick any component from the documentation and paste its HTML into your page:

<button class="txds-button txds-button--primary">
  Apply Now
</button>
<div class="txds-alert-banner txds-alert-banner--information" role="status">
  <span class="txds-alert-banner__icon" aria-hidden="true">ℹ</span>
  <p class="txds-alert-banner__text">Applications close Friday.</p>
  <button class="txds-alert-banner__close" aria-label="Dismiss">×</button>
</div>

4 Brand it (optional)

Create a small override file and load it after the design system CSS:

<link rel="stylesheet"
      href="/css/design-system.css">
<link rel="stylesheet"
      href="/css/agency-brand.css">
/* agency-brand.css */
:root {
  --txds-color-primary-50: #8b0000;
  --txds-color-primary-60: #5c0000;
  --txds-font-family: 'Georgia', serif;
}

Example: Before & After

Before (plain HTML)

<div style="background:#f0f0f0;padding:20px;border:1px solid #ccc;">
  <h3 style="color:#333;">Benefit Program</h3>
  <p>Financial assistance for qualifying residents.</p>
  <a href="/apply" style="background:blue;color:white;padding:10px;">Apply</a>
</div>

After (with design system)

<div class="txds-card">
  <div class="txds-card__media">
    <img src="/images/benefit-program.jpg" alt="Benefit Program">
  </div>
  <div class="txds-card__body">
    <h3 class="txds-card__heading">
      <a href="/apply">Benefit Program</a>
    </h3>
    <p class="txds-card__text">Financial assistance for qualifying residents.</p>
  </div>
</div>