# 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   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.