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.

data-layout-gap="xs"

data-layout-gap="m"

data-layout-gap="xl"

Code

<layout-cluster data-layout-gap="xs"> <button type="button">Button</button> <button type="button">Button</button> <button type="button">Button</button> </layout-cluster>

Justify Variants

The data-layout-justify attribute controls horizontal distribution.

data-layout-justify="start" (default)

Tag 1 Tag 2 Tag 3

data-layout-justify="center"

Tag 1 Tag 2 Tag 3

data-layout-justify="end"

Tag 1 Tag 2 Tag 3

data-layout-justify="between"

Start Middle End

Code

<!-- Items aligned to start (default) --> <layout-cluster data-layout-justify="start">...</layout-cluster> <!-- Items centered horizontally --> <layout-cluster data-layout-justify="center">...</layout-cluster> <!-- Items aligned to end --> <layout-cluster data-layout-justify="end">...</layout-cluster> <!-- Items spread with space between --> <layout-cluster data-layout-justify="between">...</layout-cluster>

Align Variants

The data-layout-align attribute controls vertical alignment.

data-layout-align="start"

data-layout-align="center" (default)

data-layout-align="end"

data-layout-align="baseline"

Small Medium Large

Code

<!-- Items aligned to top --> <layout-cluster data-layout-align="start">...</layout-cluster> <!-- Items centered vertically (default) --> <layout-cluster data-layout-align="center">...</layout-cluster> <!-- Items aligned to bottom --> <layout-cluster data-layout-align="end">...</layout-cluster> <!-- Items stretched to fill height --> <layout-cluster data-layout-align="stretch">...</layout-cluster> <!-- Items aligned by text baseline --> <layout-cluster data-layout-align="baseline">...</layout-cluster>

Overlap Variant

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

User 1 User 2 User 3 +3

Control overlap amount with size values:

data-layout-overlap="xs" (tight)

1 2 3

data-layout-overlap="m" (more overlap)

1 2 3
<layout-cluster data-layout-overlap> <user-avatar><img src="user1.jpg" alt="User 1" /></user-avatar> <user-avatar><img src="user2.jpg" alt="User 2" /></user-avatar> <user-avatar><img src="user3.jpg" alt="User 3" /></user-avatar> <user-avatar><span data-fallback>+3</span></user-avatar> </layout-cluster>

Usage Examples

Button Group

<layout-cluster data-layout-gap="s"> <button type="button">Save</button> <button type="button" class="secondary">Cancel</button> <button type="button" class="ghost">Reset</button> </layout-cluster>

Tag Cloud

HTML CSS JavaScript Web Components Progressive Enhancement
<layout-cluster data-layout-gap="xs"> <span class="tag">HTML</span> <span class="tag">CSS</span> <span class="tag">JavaScript</span> </layout-cluster>

Card Footer Actions

Card Title

Card content goes here.
<layout-cluster data-layout-gap="s" data-layout-justify="between"> <layout-cluster data-layout-gap="xs"> <button type="button">Edit</button> <button type="button">Delete</button> </layout-cluster> <button type="button">View Details</button> </layout-cluster>

Navigation

Logo Home About Services Contact
<layout-cluster data-layout-gap="l" data-layout-justify="between"> <span class="logo">Logo</span> <layout-cluster data-layout-gap="m"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </layout-cluster> </layout-cluster>

CSS Implementation

layout-cluster { display: flex; flex-wrap: wrap; gap: var(--_gap, var(--size-s)); align-items: var(--_align, center); } /* Gap variants */ layout-cluster[data-layout-gap="xs"] { --_gap: var(--size-xs); } layout-cluster[data-layout-gap="s"] { --_gap: var(--size-s); } layout-cluster[data-layout-gap="m"] { --_gap: var(--size-m); } layout-cluster[data-layout-gap="l"] { --_gap: var(--size-l); } layout-cluster[data-layout-gap="xl"] { --_gap: var(--size-xl); } /* Justify variants */ layout-cluster[data-layout-justify="start"] { justify-content: flex-start; } layout-cluster[data-layout-justify="end"] { justify-content: flex-end; } layout-cluster[data-layout-justify="center"] { justify-content: center; } layout-cluster[data-layout-justify="between"] { justify-content: space-between; } /* Align variants */ layout-cluster[data-layout-align="start"] { --_align: flex-start; } layout-cluster[data-layout-align="end"] { --_align: flex-end; } layout-cluster[data-layout-align="center"] { --_align: center; } layout-cluster[data-layout-align="stretch"] { --_align: stretch; } layout-cluster[data-layout-align="baseline"] { --_align: baseline; } /* No-wrap variant */ layout-cluster[data-layout-nowrap] { flex-wrap: nowrap; }

Related Elements