layout-cluster

Horizontal flex layout with wrapping. Ideal for groups of inline elements like buttons, tags, and navigation items.

Attributes

Attribute Values Default Description
data-layout-gap xs, s, m, l, xl s Controls the gap between items
data-layout-justify start, end, center, between start Controls horizontal distribution of items
data-layout-align start, end, center, stretch, baseline center Controls vertical alignment of items
data-layout-nowrap boolean - Prevents items from wrapping to new lines
data-layout-overlap xs, s, m, l, or boolean - Creates overlapping items (for avatar groups, stacked cards)

Gap Variants

The data-layout-gap attribute controls spacing between items.

Justify Variants

The data-layout-justify attribute controls horizontal distribution.

Align Variants

The data-layout-align attribute controls vertical alignment.

Overlap Variant

The data-layout-overlap attribute creates overlapping items - useful for avatar groups and stacked card effects.

Control overlap amount with size values:

Usage Examples

Button Group

Tag Cloud

Card Footer Actions

Navigation

Related
↑