Numeric Sequencing ❺
Assign a numeric sequence to arbitrary elements in a group.
Last updated
Assign a numeric sequence to arbitrary elements in a group.
Last updated
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.
wfu-seq-group attributePlace on any element. Give an arbitrary named group, for matching the items after, e.g. articles
wfu-seq attributePlace on any child element within that group. Give it the same group name as its parent.
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.
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
First, add the library as detailed in Quick Start.
See above for details.
