Numeric Sequencing ❺

Assign a numeric sequence to arbitrary elements in a group.

Allows you to apply a numeric sequence across a series of elements.

Numbering is always in a traditional 1, 2, 3… style of sequencing.

NOTE: This is primarily useful for sorting and filtering demos, because CSS has a numeric sequencing feature built in for live display.

Demonstration

Sequencewebflow-smart-elements.webflow.io

Demonstration

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

Usage Notes

wfu-seq-group attribute

Place on any element. Give an arbitrary named group, for matching the items after, e.g. articles

wfu-seq attribute

Place on any child element within that group. Give it the same group name as its parent.

Notes

The HTML DOM is a large tree of element and sub-elements.

• You can use wfu-seq-group multiple times throughout your document.

• You can use the same group name on multiple wfu-seq-group’s, provided that those subtrees are independent. Do not use the same name if one group is nested within the other.

• You can have nested wfu-seq-group’s, as long as you use a different group name.

The purpose of these capabilities is to allow you to use numbering on a Webflow collection list that contains a nested list. You can give one numbering sequence to the parent list, and a numbering sequence to each of the child lists as well.

NOTE: Primarily I’d recommend this for demos, where you need to number items and then permute them. In most numbering situations, CSS numbering is generally a better alternative for general sequencing.

Future

Depending on client needs and user requests, we may expand this to allow for control of;

• Starting number

• Step size

• Increasing or decreasing count

• Support for decimal values

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply configuration attributes to the elements you want to filter

See above for details.