Join

Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items

join docs

Class names

component: join, join-item
direction: join-vertical, join-horizontal

Syntax

html

<div class="join {MODIFIER}">{CONTENT}</div>

Rules

{MODIFIER} is optional and can have one of the direction class names
Any direct child of the join element will get joined together
Any element with join-item will be affected
Use lg:join-horizontal for responsive layouts