Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.
How to use multiple instances of a Solution
Many Finsweet Attributes Solutions, like List Combine and Inject, can be used multiple times on a single page.

How to use Instances
If elements of a Solution instance are not all nested within one another, then it is necessary to manually group them by using the -instance
attributes.
The -instance
attribute name for your current Solution is composed like this: fs-[name-of-Solution]-instance
(e.g., fs-list-instance
.) Its value can be any number or word (e.g., 1
or pricing-free
).
Define an instance on each element
- Select the elements with the element attribute one by one in the Designer
- Add an
-instance
attribute to each and make sure that the value is the same number or word.
An -instance
attribute is declared on each element. Elements in this example will be combined depending on the value of the -instance
attribute.

An -instance
attribute is declared on each element. Elements in this example will be combined depending on the value of the -instance
attribute.
This is how the HTML code will look. It's shown for clarity, you don't need to use this code anywhere in your project.
<div class="container">
<h2>The Dev list</h2>
<p fs-list-element="items-count"fs-list-instance="dev"> 0 </p> <p>items</p>
<div class="list" fs-list-element="list" fs-list-instance="dev">...</div>
<div class="list" fs-list-element="list" fs-list-instance="dev">...</div>
<h2>The Sales list</h2>
<p fs-list-element="items-count"fs-list-instance="sales"> 0 </p> <p>items</p>
<div class="list" fs-list-element="list" fs-list-instance="sales">...</div>
<div class="list" fs-list-element="list" fs-list-instance="sales">...</div>
</div>
Define an instance on a common parent wrapper
- If your layout allows, you can create an instance by assigning a unique attribute to any element that includes all the targeted elements of your Solution's instance.
- Select a wrapper parent that contains all the elements of an instance.
- Add an
-instance
attribute to it, with a unique value. - Repeat for every instance.
An -instance
attribute is declared on common parents of the elements to be combined.

An -instance
attribute is declared on each element. Elements in this example will be combined depending on the value of the -instance
attribute.
This is how the HTML code will look. It's shown for clarity, you don't need to use this code anywhere in your project.
<div class="container">
<div class"lists-group" fs-list-instance="dev">
<h2>Development posts & authors</h2>
<p fs-list-element="items-count"> 0 </p> <p>items</p>
<div class="list" fs-list-element="list">...</div>
<div class="list" fs-list-element="list">...</div>
</div>
<div class"lists-group" fs-list-instance="sales">
<h2>Sales posts & authors</h2>
<p fs-list-element="items-count"> 0 </p> <p>items</p>
<div class="list" fs-list-element="list">...</div>
<div class="list" fs-list-element="list">...</div>
</div>
</div>
Define an instance on a mix of wrappers and elements
- You can combine these two methods if only a portion of your Solution's elements are grouped within a common parent.
- Locate all isolated wrappers and elements related to your Solution.
- Apply the
-instance
attribute, ensuring it carries the same value, to each of them.
An -instance
attribute is declared on common parents of the elements to be combined, as well as on isolated element belonging to our current groups.

An -instance
attribute is declared on common parents of the elements to be combined, as well as on isolated element belonging to our current groups.
This is how the HTML code will look. It's shown for clarity, you don't need to use this code anywhere in your project.
<div class="container">
<div class="header">
<h1>Dev and Sales posts>
<p fs-list-element="items-count" fs-list-instance="dev">0</p> <p>items in Dev</p>
<p fs-list-element="items-count" fs-list-instance="sales">0</p> <p>items in Sales</p>
</div>
<div class="lists-group" fs-list-instance="dev">
<h2>The Dev list</h2>
<div class="list" fs-list-element="list">...</div>
<div class="list" fs-list-element="list">...</div>
</div>
<div class="lists-group" fs-list-instance="sales">
<h2>The Sales list</h2>
<div class="list" fs-list-element="list">...</div>
<div class="list" fs-list-element="list">...</div>
</div>
</div>