.landsoul-carousel

When data-height is set, the carousel will adjust its height accordingly and automatically grouped into columns.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• The height of the carousel will be the max height of the items, if data-height is not set.

.landsoul-divider

An alternative to the <hr> element, which allows you to add extra content.

.landsoul-drawer

An easy-to-use drawer component based on popover API.

.landsoul-list

A versatile list component that supports item selection, nested lists, and expandable groups using the <details> element.

• Item 1
• Item 2
• Item 3
Item 4
• Subitem 1
• Subitem 2

.landsoul-popover

Use one of the following 4x4 classes for positioning the popover:

landsoul-popover-bottom-{left, span-left, right, span-right}

landsoul-popover-top-{left, span-left, right, span-right}

landsoul-popover-right-{top, span-top, bottom, span-bottom}

landsoul-popover-left-{top, span-top, bottom, span-bottom}

// Polyfill
import "https://esm.sh/invokers-polyfill";

// Polyfill
import "https://esm.sh/interestfor";

.landsoul-skeleton

.landsoul-spinner

We can use css var --size or data-size attribute to control the size of the spinner.

We can also use the spinner as a button.

.landsoul-switch

.landsoul-switch is a styled checkbox which acts as a toggle switch.

.landsoul-tabs

.landsoul-tabs is a simple tabs component, each child element represents a tab panel, and data-label attribute is used for the tab label.

.landsoul-tooltip

It is recommended to use .landsoul-popover with popover="hint" instead of this.