A split pushes its children to opposite ends of the container, filling the space between them. It's what you want whenever you need a logo on one side and navigation on the other, a section heading paired with an action button, or a list item whose label and value sit at opposite ends of the row. Any number of children work: the first one hugs the start, the last one hugs the end, and anything in between is evenly distributed.
By default a split runs horizontally; append :column to stack items vertically instead. When the container gets too narrow for everything to fit on one row, the items wrap automatically.
<divclass="wa-split"><div></div><div></div></div>
Examples
Link to This Section
Splits are especially helpful for navigation, header, and footer layouts.
By default, items are centered on the cross axis of the wa-split container. You can add any of the following wa-align-items-* classes to an element with wa-split to specify how items are aligned:
wa-align-items-start
wa-align-items-end
wa-align-items-center
wa-align-items-stretch
wa-align-items-baseline
These modifiers specify how items are aligned in the block direction for wa-split:row and in the inline direction for wa-split:column.
A split's gap determines how close items can be before they wrap. By default, the gap between split items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-split to specify the gap between items: