Cluster
Overview
Arrange items horizontally with consistent spacing.
html
<div class="o-cluster">
<div></div>
<div></div>
</div>Modifiers
Responsive
Changes to vertical orientation on small screens.
| Name | Description |
|---|---|
o-cluster--responsive | Changes to vertical orientation on small screens. |
html
<div class="o-cluster o-cluster--responsive">
<div></div>
<div></div>
</div>Gap
Sets the gap between items.
| Name | Description |
|---|---|
o-cluster--gap-sm | Small. |
o-cluster--gap-md | Medium. |
o-cluster--gap-lg | Large. |
html
<div class="o-cluster o-cluster--gap-sm">
<div></div>
<div></div>
</div>Align
Sets the cross-axis alignment of items.
| Name | Description |
|---|---|
o-cluster--align-start | Start. |
o-cluster--align-center | Center. |
o-cluster--align-end | End. |
html
<div class="o-cluster o-cluster--align-center">
<div></div>
<div></div>
</div>Justify
Sets the main-axis alignment of items.
| Name | Description |
|---|---|
o-cluster--justify-start | Start. |
o-cluster--justify-center | Center. |
o-cluster--justify-end | End. |
html
<div class="o-cluster o-cluster--align-center">
<div></div>
<div></div>
</div>