SA5 HTML Library Demos

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

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

collaboration illustration

SA5's HTML Modules

Below is a list of all of SA5's HTML modules. Those with Demos in this cloneable are marked with a yellow demo indicator. All libs link to the SA5 documentation as well.
Demo
SA5 HTML Lib
dashboard illustration

Dynamic Attributes

Dynamically create your custom attributes, including reserved attributes, and prefix/postfix support
Demo
SA5 HTML Lib
dashboard illustration

Advanced Element Sorting

Custom sort elements by formulas, date parts, localized strings, and more
SA5 HTML Lib
dashboard illustration

Markdown

Convert markdown content into HTML, including tables and CMS support
SA5 HTML Lib
dashboard illustration

Decode HTML

‍Decode a plain-text field containing HTML
SA5 HTML Lib
dashboard illustration

Hide Section w/ Empty Collection Lists

‍Hide an entire section when the collection lists in it are empty
SA5 HTML Lib
dashboard illustration

Truncate Text w/ Ellipsis

‍Line-clamp your plain-text content to a maximum number of lines, to keep your layout tidy
SA5 HTML Lib
dashboard illustration

Numeric Sequencing

Assign a numeric sequence to arbitrary elements in a group
SA5 HTML Lib
dashboard illustration

Limit Items to Multiple-of

Layout your collection lists in grids and show the maximum number of items available while limiting the items to an even multiple
SA5 HTML Lib
dashboard illustration

Limit Items by Breakpoint

Specify and adjust the number of items you want to appear at each breakpoint dynamically.
SA5 HTML Lib
dashboard illustration

Breakpoints

Detect Webflow breakpoint changes, in code
SA5 HTML Lib
dashboard illustration

Advanced Element Filtering

Ffilter any element using a simple JavaScript expression or an evaluation function