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. Add any wa-align-items-* class to change how items line up: 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. Add any wa-gap-* class to change the spacing between items.