layout cluster

The Cluster component is a simple layout primitive for grouping (clustering) elements together. It improves upon basic inline and inline-block solutions by using Flexbox and the gap property to apportion space only between the child elements.

Branding

The layout-cluster component can be used in any brand context. You just need to import the component itself:

@import '@springernature/elements/components/layout-cluster';

Usage

Demo

<h2>Default</h2>

{{> layout-cluster }}

<h2>Horizontal alignment "center"</h2>

{{> layout-cluster hAlign='center'}}

<h2>Horizontal alignment "right"</h2>

{{> layout-cluster hAlign='right'}}

Default settings

A cluster of buttons:

<fieldset class="l-cluster">
    <button class="u-button" type="button">Edit</button>
	<button class="u-button" type="button">Save</button>
	<button class="u-button" type="button">Delete</button>
	<button class="u-button" type="button">Share</button>
</fieldset>

Alignment

You can align the cluster’s child elements along both axes with the modifiers l-cluster--right, l-cluster--center, l-cluster--top, l-cluster--middle, and l-cluster--bottom.

By default, the elements are justified to the left and aligned with stretch. This is particularly useful for clustering text inputs with (submit) buttons, since the elements will stretch to share the same height regardless of padding and font-size.

<label for="name">Name:</label>
<div class="l-cluster">
    <input type="text" id="name" name="name">
</div>

Custom gap

The layout-cluster component’s gap setting is mapped to a CSS custom property, meaning you can alter it inline. In the following example, the gap is 0, making the submit button flush with the input (1em is the default value).

<label for="name">Name:</label>
<div class="l-cluster" style="--cluster-gap: 0">
    <input type="text" id="name" name="name">
</div>