Cluster

Arranges items horizontally using consistent spacing.

<div class="o-cluster">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

Modifiers

Responsive

Stacks the items on smaller screens.

<div class="o-cluster o-cluster--responsive">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

Gap

Sets the gap between items.

<div class="o-cluster o-cluster-gap--sm">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

<div class="o-cluster o-cluster--gap-lg">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

Align

Sets the vertical alignment of items.

<div class="o-cluster o-cluster--align-start">
	<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

<div class="o-cluster o-cluster--align-center">
	<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

<div class="o-cluster o-cluster--align-end">
	<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

Justify

Sets the horizontal distribution of items.

<div class="o-cluster o-cluster--justify-start">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

<div class="o-cluster o-cluster--justify-center">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>

<div class="o-cluster o-cluster--justify-end">
	<a class="c-link-inline" href="#">Link 1</a>
	<a class="c-link-inline" href="#">Link 2</a>
	<a class="c-link-inline" href="#">Link 3</a>				
	<a class="c-link-inline" href="#">Link 4</a>		
</div>