# Trust strip (`trust-strip`)

Licensed (with the number linking to the state lookup), insured, years in business that update themselves, and the rating: four facts on hairlines, not icon cards.

| | |
|---|---|
| Tag | Showcase |
| Size | 1.3 KB gzipped own code (JS 0.7 KB + CSS 0.7 KB; 2.8 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Trades (plumbing, HVAC, electrical, roofing), cleaners, movers, pest, contractors |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/trust-strip/) |

## What it does
A list of 2-5 facts: bold label + one supporting line. The licence number is mono (a printed-artifact detail, per the type rules) and links to the CSLB licence detail page (set href yourself for other states). data-since recomputes "17 years" from the current year so the page never goes stale.

## When to use
- Under the hero or beside the quote form on CALL pages.
- Hard facts only: a licence # checked on CSLB, an insurance line the owner confirmed.

## Don't
- Claim licensed, insured or bonded without proof (skill rule: ask the owner).
- Icons in circles over each fact (anti-slop: icon-card rows).
- More than 5 facts, or repeating the rating if Rating line is already under the CTA.

## Reduced motion, no JS, accessibility
- No motion.
- No JS: the same text (years as written at build time; lookup link only if you set href).
- A real list with an aria-label; link text is the licence number itself.

## Relation to the effects libraries
Batch 2 seal-stamp animates seals; this is the plain, credible strip.

## Use it
Copy this folder to the site as `/wbl/trust-strip/` (keep `vendor/` if there is one), then:

```html
<!-- Trust strip (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/trust-strip/module.css">
<script src="/wbl/trust-strip/module.js" defer></script>

<!-- markup: -->
<ul class="wbl-ts" data-wbl="trust-strip" aria-label="Why people trust us">
  <li><b>Licensed</b><a class="wbl-ts-mono" data-license="1048231" data-state="CA">CA C-36 #1048231</a></li>
  <li><b>Insured</b><span>$2M general liability</span></li>
  <li data-since="2009"><b data-years>17 years</b><span>Family-run since 2009</span></li>
  <li><b>4.9 ★ Google</b><span>212 reviews</span></li>
</ul>
```

Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).

## License
Our code: WBL-owned, original. No third-party code.