> 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

General-purpose code components to support your Webflow designs.

{% 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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FiYYGG18SEof5MWHPasYO%2Fimage.png?alt=media&amp;token=565d5612-b65a-4ce1-a574-c62d0eabfdc2">image.png</a></td><td><a href="/sygnal-webflow-components/cc/sygnal-components/inline-svg-icon.md">Inline SVG Icon ✅</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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FMHN3dLeDf6KXaYLR2OoF%2Fimage.png?alt=media&amp;token=57e181f5-fda0-45ac-ba5b-4d1ac579f997">image.png</a></td><td><a href="/sygnal-webflow-components/cc/sygnal-components/qrcode.md">QRCode ✅</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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FK0GjWPZo7PaAEqyFwoq4%2Fimage.png?alt=media&amp;token=76b240e9-8620-4456-803e-f57ff29ea921">image.png</a></td><td><a href="/sygnal-webflow-components/cc/sygnal-components/css-isolation.md">Css Isolation ✅</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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FAjOhFK4AEak4VpkrtYFy%2Fimage.png?alt=media&amp;token=a990eef1-be81-4d7a-8a35-6468452a92d1">image.png</a></td><td><a href="/sygnal-webflow-components/cc/sygnal-components/script-manager.md">Script Manager ✅</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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FRM1EWYHVuzajsdnpJoW7%2Fvcard.png?alt=media&amp;token=afe01721-182f-4a99-8c63-b09fc9f9d88c">vcard.png</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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2Fer0qTIgv5dklcYk3Pbt8%2F2026-01-11_14-08-02.gif?alt=media&amp;token=c5de7945-73ae-47ab-b451-8c99fdd7bc02">2026-01-11_14-08-02.gif</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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F7B1iBk8zrubHci0iLwCB%2Fimage.png?alt=media&amp;token=95567f3b-f7bb-477c-acc7-56abcf041868">image.png</a></td><td><a href="/sygnal-webflow-components/cc/sygnal-components/color-swatch.md">Color Swatch ✅</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="/sygnal-webflow-components/cc/sygnal-components/color-swatch.md">Color Swatch</a> component</td><td>19-Jan-2026</td></tr><tr><td>v0.1.5</td><td><a href="/sygnal-webflow-components/cc/sygnal-components/countdown-timer.md">Countdown Timer</a> component</td><td>11-Jan-2026</td></tr><tr><td>v0.1.4</td><td><a href="/sygnal-webflow-components/cc/sygnal-components/vcard.md">VCard</a> component</td><td>07-Dec-2025</td></tr><tr><td>v0.1.3 </td><td><a href="/sygnal-webflow-components/cc/sygnal-components/script-manager.md">Script Manager</a> component </td><td>06-Oct-2025</td></tr><tr><td>v0.1.2</td><td><a href="/sygnal-webflow-components/cc/sygnal-components/qrcode.md">QRCode</a> component </td><td>01-Oct-2025</td></tr><tr><td>v0.1.1</td><td><a href="/sygnal-webflow-components/cc/sygnal-components/css-isolation.md">Css Isolation</a> component  </td><td>08-Jul-2025</td></tr><tr><td>v0.1.0</td><td><a href="/sygnal-webflow-components/cc/sygnal-components/inline-svg-icon.md">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   |