Cluster

Used to cluster child elements in a wrap-able horizontal row.

Adding a .flex-grow:2 class, or flex-grow CSS rule to a child element will cause it to stretch to fill available space.

If flexbox gap is not supported, expects a .no-flexbox-gap class to be applied to a parent element. In this case the clusterSpace prop is applied as as padding around the child elements.

Useage

<script>
	import { Cluster } from 'creditdesign-svelte-components';
</script>

<Cluster
	clusterSpace="var(--s-1)"
	clusterJustifyContent="flex-start"
	alignItems="center"
	list={false}
	className="test"
>
	<span>Item</span>
	<span>Item</span>
	<span>Item</span>
	...
</Cluster>

Props

Default