SA5 Dynamic Attributes

This cloneable contains demonstrations of the many feaures in Sygnal's SA5 HTML Library.

We'll continue expanding it with demos as we have time.

See the SA5 Dynamic Attributes Documentation
collaboration illustration
Modal
×

Webflow

Webflow is a web design and development platform that allows users to design, build, and launch responsive websites visually, without writing any code.
Button Text

‍

This is some text inside of a div block.
This is some text inside of a div block.
123 Example Street, London UK
Modal
×

Figma

Figma is a web-based user interface (UI) and user experience (UX) design tool that allows for collaborative design, prototyping, and feedback gathering.
Button Text

‍

This is some text inside of a div block.
This is some text inside of a div block.
123 Example Street, London UK

Using Dynamic Attributes to Set Form Field Defaults

A common use case for SA5 Dynamic Attributes is to set the value attribute for form elements, so that the page will load with content already in the field. This can be CMS-bound in a collection list or collection page, as in this demo.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Combining x:*, x:*:pre, & x:*:post

Here's a demonstration of how dynamic attributes combine with :pre and :post.
We've used styles to show how a concatenated string works with the different attribute combinations shown.
x:style =
font-weight: bold;
x:style:pre =
font-style: italic;
x:style:post =
color: blue;
Styled Text Example
x:style
Styled Text Example
x:style:pre
Styled Text Example
x:style:post
Styled Text Example
x:style
x:style:pre
Styled Text Example
x:style
x:style:post
Styled Text Example
x:style:pre
x:style:post
Styled Text Example
x:style
x:style:pre
x:style:post

Dynamic Attribute Script Configs

There are certain areas of Webflow where custom attributes cannot be data-bound, such as in ECommerce-bound collection lists and pages.
In this situation, we have a secondary mechanism to support dynamic attributes using a <script> block. You can see this in the example below.
Styled Text Example