Split
The <Split> is an addition to the <Inline> and <Stack> components. Basically it creates an empty div between two elements with the CSS Flexbox grow class. With that it allows you to split the contents of two elements inside a flex context.
Usage
Use the <Split> together with a <Stack> or <Inline>. It can also serve as an alternative to nested stacks or inlines, because it can also provide enough space between the items.
Of course you can also apply the split in any other flexbox context. But we recommend to use it with our given components.
With inline
You can see below how to use the <Split> within the <Inline>.
To use the split with the inline correctly you have to set the inline as parent and add the split between the two elements you want to seperate.
With that you can provide as much space as given between the two children.
This can be helpful if you need to group related content together but also have other content in the same line. A good use case would be the navigation.
With stack
What applies to the inline is also possible with the stack component. You have to set the <Split> as child inside of the <Stack> between two other children to provide maximal space.