> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components.md).

# Sygnal Components

{% hint style="success" %}
**QUESTIONS?  PROBLEMS?  FEATURE REQUESTS?** \
Contact me on [Sygnal's forum](https://sygnal-attr.discourse.group/c/general). 
{% endhint %}

## Components

The following code components are included in this library.  

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h3>Inline SVG Icon</h3><ul><li>Easily add inline SVG icons to your page</li><li>Supports currentcolor</li><li>CMS-bindable, for item-specific SVG icons ( store in a plain text field ) </li></ul></td><td><a href="/files/Zp8mwgyz64MA1KVLaQvy">/files/Zp8mwgyz64MA1KVLaQvy</a></td><td><a href="/pages/stTMOrcQZWrQUzBPPIK4">/pages/stTMOrcQZWrQUzBPPIK4</a></td></tr><tr><td><h3>QR Code</h3><ul><li>Link to Appstore</li><li>Link to AR experiences</li><li>Quick contact card sharing from web to mobile </li><li>Provide special mobile views</li><li>CMS support</li></ul></td><td><a href="/files/71wHlEEoCkn0AEzj5dRI">/files/71wHlEEoCkn0AEzj5dRI</a></td><td><a href="/pages/GEhJcsWp6iD7blMD3lZ6">/pages/GEhJcsWp6iD7blMD3lZ6</a></td></tr><tr><td><h3>CSS Isolation</h3><ul><li>Define CSS and Vars that only affect the slotted content</li><li>Control component styling at the instance-level</li></ul></td><td><a href="/files/0s5UUmV9qz8P5OA859hl">/files/0s5UUmV9qz8P5OA859hl</a></td><td><a href="/pages/v54jvEGQLiosKKplGjAU">/pages/v54jvEGQLiosKKplGjAU</a></td></tr><tr><td><h3>Script Manager</h3><ul><li>Special developer mode DEV, TEST, PROD script mode support </li></ul></td><td><a href="/files/T0eNSyveies9sH3UkXTf">/files/T0eNSyveies9sH3UkXTf</a></td><td><a href="/pages/FuqI57V6w26Zh1bwzIG7">/pages/FuqI57V6w26Zh1bwzIG7</a></td></tr><tr><td><h3>VCard</h3><ul><li>Share contacts easily with your users by adding VCard support </li></ul></td><td><a href="/files/vKjX3l883eVZmEzBohpt">/files/vKjX3l883eVZmEzBohpt</a></td><td></td></tr><tr><td><h3>Countdown Timer</h3><ul><li>Marketing timer to create urgency</li><li>Fully custom styling, to your site design </li></ul></td><td><a href="/files/jWOu1KlRGstQFPd0i21c">/files/jWOu1KlRGstQFPd0i21c</a></td><td></td></tr><tr><td><h3>Color Swatch</h3><ul><li>Add color swatches to a brand guide page for your clients, with click to copy </li></ul></td><td><a href="/files/r2mLZZIhz9KktjzssXiw">/files/r2mLZZIhz9KktjzssXiw</a></td><td><a href="/pages/3WAc1sjSbC27W9s6dFXn">/pages/3WAc1sjSbC27W9s6dFXn</a></td></tr></tbody></table>

## Version History

<table><thead><tr><th width="100.333251953125">Version</th><th width="499">Changes</th><th>Date</th></tr></thead><tbody><tr><td>v0.1.6</td><td><a href="/pages/3WAc1sjSbC27W9s6dFXn">Color Swatch</a> component</td><td>19-Jan-2026</td></tr><tr><td>v0.1.5</td><td><a href="/pages/dHPf2MpEbmBajWjk6s8C">Countdown Timer</a> component</td><td>11-Jan-2026</td></tr><tr><td>v0.1.4</td><td><a href="/pages/AzEG3idmCdMgGqjfttgF">VCard</a> component</td><td>07-Dec-2025</td></tr><tr><td>v0.1.3 </td><td><a href="/pages/FuqI57V6w26Zh1bwzIG7">Script Manager</a> component </td><td>06-Oct-2025</td></tr><tr><td>v0.1.2</td><td><a href="/pages/GEhJcsWp6iD7blMD3lZ6">QRCode</a> component </td><td>01-Oct-2025</td></tr><tr><td>v0.1.1</td><td><a href="/pages/v54jvEGQLiosKKplGjAU">Css Isolation</a> component  </td><td>08-Jul-2025</td></tr><tr><td>v0.1.0</td><td><a href="/pages/stTMOrcQZWrQUzBPPIK4">Inline SVG Icon</a> component </td><td>03-Jul-2025</td></tr></tbody></table>

## Project Notes&#x20;

| Module         | Source | Version |
| -------------- | ------ | ------- |
| Deploy scripts | NPM    | 0.3.0   |