Try SSR
Server-side rendering (SSR) generates component HTML on the server before the page loads, improving SEO and initial load time. Use the switch to see Web Awesome components render with and without SSR.
Light
Dark
System
Docs
Select Color Scheme
Default
Awesome
Shoelace
Active
Brutalist
Glossy
Matter
Mellow
Playful
Premium
Tailspin
Docs
Select Theme
A cluster arranges its children inline with even spacing and wraps them onto a new line whenever the container runs out of room. Reach for it whenever you have a horizontal group of items of varying widths, like tag lists, button rows, inline metadata, or breadcrumb-style trails, and want the layout to stay tidy on every screen size without writing any media queries.
By default, cluster children are centered vertically. Pair wa-cluster with a wa-gap-* class to change the spacing and a wa-align-items-* class to change how items align on the cross axis.
<divclass="wa-cluster"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><!-- We'll vary the div sizes to show the flow of cluster elements --><style>.wa-cluster div:empty:nth-child(3n){min-inline-size: 6rem;}.wa-cluster div:empty:nth-child(3n + 2){min-inline-size: 8rem;}</style>
Examples
Link to This Section
Clusters are great for inline lists and aligning items of varying sizes.
By default, items are centered in the block direction of the wa-cluster container. You can add any of the following wa-align-items-* classes to an element with wa-cluster to specify how items are aligned in the block direction:
By default, the gap between cluster items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-cluster to specify the gap between items: