List Tabs
Built for

How to use multiple instances

To apply more instances of the solution on the same page, wrap the component inside a parent element with the instance attribute.

Check more examples
How to use multiple instances
The elements outlined in blue have the necessary attributes for this solution. Toggle X-ray by pressing ? on your keyboard and hover the outlined elements to reveal their attributes.

Instance #1

This is the Instance #1.
Please ensure that your component is inside a parent element with the attribute fs-list-instance="1"
Tab 1
Tab 2
Tab 3
This is the block containing the list with the content that will be dynamically added to the tabs. You can hide this block if you want.
Joseph Richard

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Joseph Richard
Karla Saris

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Karla Saris
Jocelyn Bator

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Jocelyn Bator
Steve Mark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Steve Mark
The elements outlined in blue have the necessary attributes for this solution. Toggle X-ray by pressing ? on your keyboard and hover the outlined elements to reveal their attributes.

Instance #2

This is the Instance #2.
Please ensure that your component is inside a parent element with the attribute fs-list-instance="2"
Tab 1
Tab 2
Tab 3
This is the block containing the list with the content that will be dynamically added to the tabs. You can hide this block if you want.
Joseph Richard

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Joseph Richard
Karla Saris

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Karla Saris
Jocelyn Bator

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Jocelyn Bator
Steve Mark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

Steve Mark